Site mais leve:

Quanto mais pesada a pgina, mais lenta ela se torna. As causas podero ser vrias, um template mal estruturado, um cdigo CCS no optimizado, muitos widgets na sidebar (botes grficos na barra lateral), imagens no optimizadas em tamanho ou em definio, javascript, flashUma coisa certa, ou a pgina relativamente rpida ou ento corre-se o risco de perder utilizadores dessa mesma pgina. Assim, existem muitas ferramentas para testar o carregamento de pginas, uma dessas ferramentas encontra-se no site SpeedTester. A sua utilizao bastante simples, basta digitar o endereo do seu site/blog (URL), o cdigo de confirmao e clicar em CHECK! Este site ir criar um relatrio para o tempo de abertura da pgina analizada. O ideal que a pgina abra em menos de 6 seg. para uma ligao telefnica (56k). Para melhorar o tempo de acesso de um determinado podemos verificar o seguinte: 1-Optimizar as METATAGS Utilize apenas as METATAGS importantes para a indexao do seu Site/Blog. As METATAGS mais importantes so as Metatag Title (nome do site), Description (descrio do site, contedo para as buscas) e Keywords (palavras-chave).Outras metatags importantes so a verificao de motores de busca (ex. Google e Yahoo!) e a metatag robots. 2-Eliminar os espaos em branco no cdigo do template verdade! Os espaos em branco do template ocupam espao no ficheiro 3-Optimizar o cdigo CSS (style) do template Nos sites CleanCSS e/ou CSSTweaks possvel optimizar o cdigo CSS online. H opes para optimizao simples (somente abreviatura dos parmetros), optimizao normal (deixa cada classe numa nica linha) e optimizao profunda (deixa tudo numa nica linha). Em vez de adicionar os cdigos javascript na seco HEAD do template, adicione pginas externas. Isto contribui para que o Site/Blog carregue mais rpidamente. Exemplo disso faa o seguinte: pegue no cdigo javascript e coloque no bloco de notas. Salve o ficheiro com o nome de javascript.js e coloque esse arquivo na directoria do site. Por fim adicione o seguinte cdigo na seco HEAD: 4-Deixar os cdigos em javascript em arquivos externos (fora do template)
script language=JavaScript src=http://aprenderwebdesign.com/seu javascript.js type=text/javascript

5-Deixar o arquivo CSS em arquivo Externo Faz-se igualmente como no tpico anterior e coloca-se o cdigo CSS no bloco de notas. De seguida grava-se o ficheiro seu_estilo.css e coloca-se na directoria do seu site. Por fim coloque na seco HEAD o seguinte cdigo:

link rel=stylesheet type=text/css href=http://seusite.com.br/seu estilo.css

6-TABLELESS Tabeless significa sem tabelas num template. As Tags TABLE, TR, TD no ser mais utilizadas pois geram um enorme espao branco no HTML e provocam o carregamento de um site mais lento. Utiliza sempre de preferncia o trabalho com CSS 7-Diminuir os comentrios do cdigo do template O template que possui vrios comentrios do tipo :/****incio do cabealho***/, /***incio do cdigo***/, ???Se sabe o que cada cdigo do template faz, no sero necessrios esses comentrios. Apague-os deixando o cdigo mais leve. 8-Usar a barra / no fim dos directrios em endereos URL Esta dica parece simples mas faz muita diferena! Abrir um Site/Blog com http://teublog.blogspot.com/ abre de forma mais rpida que http://teublog.blogspot.com/ 9-Definir sempre a altura e largura das Imagens Inserir uma imagem no Site/Blog sem os atributos de WIDTH e HEIGHT (largura e altura) obriga a quem navega calcular essas medidas, deixando o carregamento de pginas mais lento. Defina sempre esses parmetros dentro da tag IMG SRV e veja o seu Site/Blog carregar de forma mais rpida! 10-Usar miniaturas nas imagens Utilizar imagens em miniaturas deixa o Site/Blog com um look mais profissional e permite que a abertura das pginas se faa de um modo mais rpido. Se o leitor quiser visualizar a imagem no seu tamanho real, basta clicar sobre a miniatura. Tanto o Blogger como o WordPress tm suporte para o uso de miniaturas. Se pretende mostrar a imagem com o seu tamanho real utiliza a funo Resize num editor de imagens do tipo Photoshop, GIMP, PSP 11-No usar Flash Um efeito flash muito engraado mas ser mesmo necessrio? Lembre-se que a utilizao deste tipo de animaes Consomem espao tornando o site mais pesado Existem outras dicas para optimizar um Site/Blog, entretanto estas 11 so suficientes para melhorar o seu desempenho. Boas Optimizaes! Fonte: http://aprenderwebdesign.com

1. Tag <style> e style-in-line

Muita gente ainda usa o CSS todo dentro de uma tag style ou no menos errado usa style-in-line, que significa usar a propriedade style=" do elemento para mudar o estilo dele. O CSS foi lanado na dcada de 90 gente! Ele foi feito pra ser usado! Alm de deixar o seu cdigo fonte muito mais limpo, o uso de CSS em folhas de estilos separadas otimiza o carregamento do site e permite uma melhor separao entre a estrutura (HTML) e a aparncia (CSS) do mesmo.

Imagine que voc vai fazer o papel de uma pea de teatro e l pela terceira pgina, entre uma linha e outra, voc encontra uma observao que diz que o seu personagem tem cabelo vermelho No seria melhor que isso viesse logo depois da capa, pra voc j se preparar?

2. Arquivos JavaScript, uni-vos!

Falei sobre isso no outro artigo mas vale repetir: muita gente usa um site que, por exemplo, chama o jQuery mais trs plugins e um script criado com os efeitos do site.. Isso d um total de cinco arquivos, cinco requisies diferentes que o seu servidor recebe, organiza, manipula e redireciona s pra inserir o JavaScript do seu site. Una (junte) todos os cdigos JavaScript do seu site em um arquivo s, e s isso for te dar muita dor-de-cabea, veja sobre o Google Minify

3. Acabe com o Flash

Antes que voc, designer, levante uma tocha e inicie uma caada contra mim, essa dica vale para a exibio de contedo No daquele topo fofinho que voc fez pro seu site. Flash pesa? Sim, pesa. Evite usar objects espalhados pelo site O Flash mal lido pelo Google, no segue nenhum padro de organizao de cdigo (j que trabalhamos apenas com imagens e efeitos visuais) e muito mais dificil de alterar do que um simples (X)HTML Tente usar efeitos com JavaScript (leia-se jQuery), que pesa muito menos que o Flash e voc no precisa do .fla para editar Qualquer problema s entrar no FTP e mudar.

4. As futilidades da Web
Achou um chat cheio de cdigos prontos de chats, sandbox, mural de recados, previso do tempo e tudo mais? Pode sair dele agora. No saia enfiando cdigos prontos e iframes e scripts no seu site s pra tentar deixar ele mais legal Isso coisa de principiante e isso no traz vantagem nenhuma pro seu site! A no ser, claro, que vantagem pra voc signifique coisas que ningum vai usar.

5. Galeria de fotos
Seu site uma galeria de fotos super transada e cheia de efeitos em JavaScript? Legal Mas precisa mesmo carregar todas aquelas 80 fotos de uma s vez em escala real? Crie thumbnails (miniaturas) das suas fotos e imagens que pesam muito (mais que 50Kb), isso vai economizar MUITO bandwidth (trfego mensal) pro seu site.

6. Livro do autor
Voc um autor de livros super renomado e quer disponibilizar toda as 841 pginas do seu livro de bolso no seu site pessoal? Ento, por favor, no coloque tudo em uma pgina s. Separe as pginas do livro em pginas do site Vrias! Quanto menor o

contedo, melhor pro visitante, melhor pro Google, melhor pra velocidade do seu site, e melhor pro seu bolso (se voc trabalhar com publicidade online). Menos mais!

7. Meu site HD!

Bom Voc j diviu seu site em pginas, sua galeria de fotos usa thumbnails e.. pera As fotos (grandes) esto com 100% de qualidade?! Pra que? O crebro humano quase nunca conseguiu reparar a diferena entre uma imagem com 80% e outra com 100% de qualidade. Reduza a qualidade das suas fotos, vale a pena.

8. E o tamanho da minha imagem

Quando voc usar o atributo <img /> defina a largura e altura da imagem, isso vai economizar trabalho pro navegador do visitante que no vai ter que carregar toda a imagem antes pra descobrir o tamanho de exibio.

9. O que voc v o que voc tem, mas no o que voc precisa!

Sabe aquele seu editor de sites com suporte ao WYSIWYG (What You See Is What You Get)? Acha legal ele fazer todo o trabalho pra voc de criar o HTML e o CSS sem que voc precise se preocupar? Pois v at o cdigo fonte criado por ele e comece a fazer uma limpeza geral. Na maioria dos casos eles acabam criando cdigos alm do necessrio, seja no HTML, seja no CSS. Aprenda a criar sites usando um editor de texto que no te mostra uma representao visual, como o Notepad++, EditPlus, NetBeans e vrios outros At o prprio Notepad serve!

10. Seu site no um Centro de Convenes!

No precisa ficar chamando um arquivo de cada site jQuery do Google, CSS da Globo.com e por ai vai.. Quanto mais arquivos voc chamar de servidores que no so o seu site, mais lento vai ser o carregamento dele pois o visitante vai precisar resolver vrios DNSs, no s o seu.

20 Dicas para Deixar Pginas Web Mais Leves

1. Comprima suas imagens Se voc usa o photoshop use sempre a opo Save for Web . Se voc no possui, pode usar alternativas gratuitas tambm. 2. No reduza as imagens com HTML Nunca use HTML puro para redimensionar suas imagens. Elas sero carregadas com o tamanho original (grande) e ser redimensionada no browser. Isso tambm deixa as imagens feias (distorcidas, mal-redimensionadas ou de resoluo alterada), o tratamento do browser no eficiente e as imagens perdem suas caractersticas. 3. Especifique as dimenses da imagem Sempre especifique os tamanhos das imagens no cdigo HTML. Isso ir reduzir o tempo de renderizao da pgina pois o browser saber como encaixar os elementos na tela.

4. Imagens grandes? Corte-as Se voc precisa carregar uma imagem muito grande no seu site, divida-as em algumas partes para agilizar o carregamento. Claro, no reduzir o tamanho mas passar impresso de agilidade na abertura do site. 5. No corte demais! Isso poder gerar muitas requisies HTTP e consequentemente deixar mais lento e far o efeito contrario do esperado. preciso saber ponderar muito bem ao dividir ou no, e em quantas partes ser dividido. 6. Use CSS ao invs de imagens Use CSS para criar os efeitos necessrios para seu site quando possvel. Obviamente, o contedo a ser carregado ser muito menor. 7. No use tabelas quando no forem necessrias Tabelas so feitas para apresentar dados tabelados, para layout arquitetura da pagina voc deve usar CSS que tem esse propsito. Isso tambm deixar seu cdigo mais limpo e melhor para ser lido e entendido. Os crawlers conseguem ler sites com tabelas, mas voc ir dar uma mozinha para ele usando tableless. 8. Use arquivos CSS externos Usando arquivos externos, voc ir ajudar o crawler e o seu usurio, pois uma vez lido o CSS externo, ele ser jogado no cache e no precisar ser recarregado a cada nova pgina. 9. Use arquivos Javascript externos tambm Segue o mesmo princpio do CSS externo, principalmente para Javascript, para o qual ser mais importante o cache dos arquivos. 10. Remova os espaos em branco do seu HTML Lembre-se, espao em branco tambm um caracter e consome banda e espao em disco. muito comum deixarmos sujeiras de espao em branco em nossos cdigos, remova-os sempre. 11. Imagens com CSS ao invs de imagens em tag HTML Pode parecer estranho, mas o carregamento das imagens como background de uma div mais rpido do que carregar a imagem com as tags HTML. 12. Uso de links relativos Pensando ainda na questo de tamanho dos arquivos HTML, usar caminhos relativos ajuda a remover os caracteres http://www.seusite.com.br/ cada vez que criar um link. Ser uma economia significativa no cdigo, mas um peso para SEO, considerando quando emprestam seu contedo. Em termos de SEO, o melhor usar o caminho absoluto. 13. Especifique o DocType Pginas que tem DocType definido tendem a ser mais rpidas para serem carregadas. 14. Reduza requisies HTTP do seu site Cada vez que voc faz uma requisio HTTP, ser necessrio pedir o pacote, esperar a resposta, receber o pacote e confirmar sua chegada. Por isso, quanto menos requisies HTTP voc tiver, mais rpido ser o carregamento da sua pgina. 15. No use HTTPS desnecessariamente Somente use HTTPS quando for necessrio. Esse tipo de conexo segura pelo menos 3 vezes mais lentas que o HTTP normal. 16. Use Gzip para reduzir o tamanho do HTML Uma alternativa muito vlida comprimir seu HTML para ser entregue. Isso no tem impacto para imagens, flash ou arquivos embarcados, mas para HTML faz uma grande diferena. 17. Separe servidores de contedo e de banco de dados Se voc possui um alto trfego no seu site, criar servidores dedicados pode ajudar, e muito, na velocidade do seu site. Cada servidor ser otimizado para um servio.

18. Use AJAX quando puder Usar AJAX ao invs de ficar recarregando seu site pode ser muito til para otimizar a velocidade. Isso reduzir o nmero de requisies HTTP do seu site e apresentar uma aparncia de velocidade na entrega do seu contedo. 19. Coloque imagens indicando carregamento importante tambm, ao se utilizar AJAX ou Javascript, colocar imagens que indiquem que o contedo est sendo carregado. Isso no melhora o desempenho real, mas passa mais conforto para o usurio que est utilizando seu site saber que est sendo processado o pedido. 20. Reduza o nmero de cookies Cada vez que um browser faz uma requisio, cookies so transmitidos. Isso quer dizer que se voc no tomar cuidado, pode sobrecarregar a pgina com cookies. Atente -se tambm para o tamanho de cada cookie transmitido.

21. CSS Optimizer Online CSS Optimizer uma ferramenta web que reduz o tamanho do arquivo de folhas de estilo compactando e otimizando o CSS. 22. Clean CSS Clean CSS baseado no popular CSS minifier CSSTidy . Voc pode configurar o nvel de compresso desejado e personalizar as opes de compresso. Ela imprime um relatrio linha a linha para mostrar a voc exatamente o que foi alterado. 23. CSS Compressor Outra popular ferramenta de compresso CSS web o Robson CSS Compressor ela open-source , (confira o cdigo-fonte em PHP ). Oferece varias de opes de compresso, tratamento de cores, regras e propriedades CSS. 24. Uncompress CSS application Essa aplicao oferece o caminho inverso das anteriores, ela capaz de descomprimir cdigo CSS compactados, tornado novamente possvel a leitura humana do arquivo. 25. Notas importantes: Os mesmos seletores e propriedades so automaticamente agregados, seu cdigo deve estar bem formado. Este no um validador que aponta erros CSS. Para se certificar de que seu cdigo vlido, use o validador do W3C. 26. Formatao 27. FormatCSS FormatCSS permite que voc corrija e padronize seu cdigo fonte. H vrias configuraes disponveis e regras que voc pode aplicar para conseguir o tipo de formato que deseja. possvel inclusive, deixar seu CSS em ordem alfabtica ou descapitaliz-lo. 28. Prettyprinter.de prettyprinter.de no se limita apenas ao CSS, tambm so suportados cdigos PHP, Java, C + +, C, Perl e JavaScript. H opes como reduzir espaos em branco, remover linhas em branco e adicionar novas linhas automaticamente entre as chaves. 29. Validao e Verificao 30. Servio de validao CSS da W3C W3C CSS Validation Service muito simples de usar, basta inserir a URL do seu CSS e ele mostrar o status do seu estilo apontando erros, avisos e outras consideraes.

31. Todas essas ferramentas utilizam mtodos automticos de manipulao do CSS, por isso extremamente importante que voc faa um backup de seus arquivos antes de substitui-los. 32. Por isso cada vez mais sites e at blogs esto tomando cuidado para deixar suas pginas mais leves, tornando o contedo acessvel para a maior parte dos internautas. Confira algumas dicas para deixar seu site mais leve e adequado para a web.

Escolha bem o seu Provedor de Hospedagem

33. Escolha bons provedores de hospedagem, que mantenham um link estvel e disponibilidade. Assim evita problemas como ficar fora do ar ou ainda demora de acesso. Se possvel, contrate provedores brasileiros.

Verifique os Arquivos de CSS e Javascript

34. Os arquios de CSS e Javascript podem ser otimizados para facilitar o carregamento da pgina. Por exemplo, espaos e comentrios desnecessrios devem ser apagados. Se necessrio realizar comentarios, seja claro e breve. 35. Como exemplo, observe o trecho de um arquivo CSS a seguir em duas verses: no modo no otimizado e depois, no modo otimizado. Arquivo no otimizado: 36. body {
color: #000000; font-size: 16px; font-family: Arial, Helvetica, Verdana; font-weight: bold; border-width: 3px; border-color: #000000; }

Arquivo Otimizado:
37. body {
color: #000; font: bold 16px Arial, Helvetica, Verdana; border: 3px dotted #000; }

No use Vrias Imagens Pequenas

38. As imagens pequenas passam a falsa impresso que sero rapidamente carregadas, mas isso no verdade, j que cada imagem uma nova requisio realizada, o que acaba deixando o carregamento total da pgina lento. 39. Prefira criar imagens maiores que contenham as menores, pois assim o nmero de requisies vai diminuir.

Coloque os Arquivos em Cache com o .htaccess

40. Colocar os arquivos em cache otimiza o carregamento no navegador do cliente, pois quando ele for visitar o site novamente os arquivos j estaro no seu

computador, o que vai tornar o carregamento bem mais rpido pois no ser necessrio realizar novamente o download de imagens, por exemplo. 41. Para isso, basta configurar o arquivo .htaccess no diretrio pblico (o mesmo em que esto armazenados os arquivos utilizados pelo site). As pginas sero comprimidas como GZIP para os navegadores que suportam este tipo de tecnologia.

Sempre que Possvel, Use Pginas Estticas e no Dinmicas

42. Como as pginas dinamicas precisam ser mais processadas pelo servidor, elas demoram mais pra carregar. Assim, se nao for necessario algum tipo de processamento na pgina, opte por apresentar pginas estticas. 43. Ferramentas especializadas (como Page Speed do Google e YSlow do Yahoo) podem auxiliar a conferir a velocidade de carregamento. Use-as para melhorar a qualidade do site. Favoritos em qualquer lugar:

Utilizando o Foxmarks no Firefox

y y y y y y y

Clique aqui para fazer a instalao do complemento Foxmarks Ao terminar, reinicie o Firefox, ao voltar ser aberta a janela Foxmarks Login, clique em Avanar Na segunda tela precisa criar uma conta de usurio gratuita no Foxmarks, marque a opo No, ajude-me a cadastrar e clique em Avanar Preencha o cadastro e clique em Avanar Ser exibida a informao que sua conta foi criada com sucesso, clique em Avanar Na tela seguinte o FoxMark lhe informa que tambm pode sincronizar de forma segura as senhas de seu site, escolha No e clique em Avanar. Clique em Avanar na janela seguinte para Sincronizar seus dados.

Para acessar seus favoritos de qualquer computador voc no precisa instalar o complemento Foxmarks nele, basta acessar o site www.foxmarks.com e clicar em My Foxmarks, ento informar seu usurio e senha.

Outro servio interessante o site Delicious onde voc pode exportar seus sites favoritos para um arquivo e depois envi-lo para o site, para poder acess-los de qualquer computador que esteja, voc pode tambm compartilhar seus sites favoritos com outras pessoas. A desvantagem que ele no sincroniza seus favoritos, ento significa que o novos sites que salvar no favoritos da suas casa no sero enviados para a sua conta no Delicious. O site delicious importa os favoritos do Internet Explorer, Firefox, Safari e Opera. Para facilitar a incluso de novos sites favoritos na sua conta no delicious, voc tem a ferramenta Bookmarklets, que adiciona o site que est visitando em seu favoritos no delicious com apenas um clique. Instale o Firefox (no o tiver) 1. V na guia FERRAMENTAS > COMPLEMENTOS > ADICIONAR (na jenala que abrir).


Abrir uma janela para que voc busque o complemento a ser instalado.

2. Digite no campo de busca DELICIOUS 3. Aparecer uma breve lista de complementos, clique no DELICIOUS BOOKMARKS e em "instalar". 4. Feito isso, voc precisar fechar e abrir novamento o Firefox 5. Reiniciado, o Firefox apresentar uma barra com novos botes que antecedem a barra de endereo


o primeiro: um quadrado semelhante a uma bandeira, em azul branco e preto. Este lhe levar para o site do Delicious onde voc far um breve cadastro e pronto, pode adicionar seus sites favoritos quando quizer.

Importante
Para adicionar um novo site, no precisa ir at o site do DELICIOUS. Basta acessar o Firefox, clicar no cone em cinza semelhante a uma etiqueta chamdo "TAG".
Abra o arquivo no PS, clique em Salvar Como, JPG. Aps clicar em Salvar, abre-se outra janela que tem a opo de qualidade, que vai do 0(low) ao 12(maximum). Encontre a melhor relao resoluo x qualidade, no esquecendo: 1 - Se estas imagens sero apenas visualizadas no computador, a resoluo de 72 dpi suficiente. Se voc tem uma imagem em 300dpi, reduza pra 72dpi. 2 - Se voc precisa imprimir estas imagens, o ideal que elas tenham 300dpi.

Aplicativos Necessrios: Navegador de internet e Xmarks Nmero de passos: 6 Presente desde as primeiras verses dos navegadores de internet, o recurso Favoritos essencial para se ter acesso rpido s pginas mais visitadas, ou ainda, para criar um atalho para seus sites referncias de pesquisa, cujo endereo muito longo ou difcil de decorar. Porm, imagine que voc esteja usando um computador, em casa ou no trabalho, e deseja acessar um site que est gravado na sua lista de favoritos de outro computador. Para complicar, voc no se recorda nem do endereo, nem de como achou aquela pgina. Complicou, no ? Isso vai deixar de ser um problema para voc a partir de agora. Seguindo esse simples tutorial, voc poder acessar os seus sites favoritos de qualquer computador, ou ainda do seu celular. Confira: Passo 1. Faa o download do Xmarks no site do BaixaTudo. O Xmarks possui verses compatveis com o Internet Explorer, Firefox, Chrome e Safari;

Preencha os dados para criar sua conta (Foto: Reproduo/Joo Paulo Carrara) Passo 2. Em seguida, ser apresentada a tela solicitando a permisso para instalar o Xmarks. Aceite, e aps a instalao, reinicie o navegador; Passo 3. O navegador, ento, se abrir na mesma pgina que voc estava, mas haver uma nova aba, onde ser criada a sua conta. Preencha os dados solicitados; Com sua conta criada, um assistente o conduzir pelas prximas etapas. Passo 4. Marque a opo Habilitar sincronizao de abas caso queria acessar suas abas iniciais em qualquer computador; e marque a opo Habilitar sincronizao de Histrico de Navegao somente caso voc precise acessar seu histrico de navegao de qualquer computador. Estas duas opes no so obrigatrias;

Seus favoritos ficaro salvos no servidor do Xmarks (Foto: Reproduo/Joo Paulo Carrara) Passo 5. Concludo o assistente, o Xmarks vai sincronizar automaticamente os favoritos de seu computador com o servidor. A partir de agora, toda vez que voc adicionar um novo site aos seus favoritos, o navegador realizar a sincronizao; Passo 6. Acesse o site my.xmarks.com e faa o login. Pronto! Seus sites favoritos esto disponveis para serem acessados a qualquer hora e lugar.

Entre em my.xmarks.com de qualquer computador para acessar seus favoritos (Foto: Reproduo/Joo Paulo Carrara) Uma observao importante: Caso voc instale o Xmarks em dois computadores diferentes e faa login com a mesma conta, seus favoritos sero sincronizados e ficaro disponveis para acessar em ambos os computadores. Essa opo muito til caso voc

tenha, por exemplo, um notebook e um desktop, ou ainda, deseje sincronizador os favoritos do seu computador pessoal com os do trabalho.