Você está na página 1de 13

Site mais leve

:

Quanto mais ³pesada´ é a página, mais lenta ela se torna. As causas poderão ser várias, um template mal estruturado, um código CCS não optimizado, muitos widgets na sidebar (botões gráficos na barra lateral), imagens não optimizadas em tamanho ou em definição, javascript, flash«Uma coisa é certa, ou a página é relativamente rápida ou então corre-se o risco de perder utilizadores dessa mesma página. Assim, existem muitas ferramentas para testar o carregamento de páginas, uma dessas ferramentas encontra-se no site SpeedTester. A sua utilização é bastante simples, basta digitar o endereço do seu site/blog (URL), o código de confirmação e clicar em CHECK! Este site irá criar um relatório para o tempo de abertura da página analizada. O ideal é que a página abra em menos de 6 seg. para uma ligação telefónica (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 indexação do seu Site/Blog. As METATAGS mais importantes são as Metatag Title (nome do site), Description (descrição do site, conteúdo para as buscas) e Keywords (palavras-chave).Outras metatags importantes são a verificação de motores de busca (ex. Google e Yahoo!) e a metatag robots. 2-Eliminar os espaços em branco no código do template É verdade! Os espaços em branco do template ocupam espaço no ficheiro 3-Optimizar o código CSS (style) do template Nos sites CleanCSS e/ou CSSTweaks é possível optimizar o código CSS online. Há opções para optimização simples (somente abreviatura dos parâmetros), optimização normal (deixa cada classe numa única linha) e optimização profunda (deixa tudo numa única linha). Em vez de adicionar os códigos javascript na secção HEAD do template, adicione páginas externas. Isto contribui para que o Site/Blog carregue mais rápidamente. Exemplo disso faça o seguinte: pegue no código 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 código na secção HEAD: 4-Deixar os códigos 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 tópico anterior e coloca-se o código 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 secção HEAD o seguinte código:

blogspot. PSP« 11-Não usar Flash Um efeito flash é muito engraçado mas será mesmo necessário? Lembre-se que a utilização deste tipo de animações ³Consomem´ espaço tornando o site mais ³pesado´ Existem outras dicas para optimizar um Site/Blog. Se pretende mostrar a imagem com o seu tamanho real utiliza a função ³Resize´ num editor de imagens do tipo Photoshop. .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. que significa usar a propriedade style=´" do elemento para mudar o estilo dele.com/ abre de forma mais rápida que http://teublog. /***início do código***/. ???Se sabe o que cada código do template faz.br/seu estilo. Apague-os deixando o código mais leve. não serão necessários esses comentários.css 6-TABLELESS Tabeless significa sem tabelas num template. Tag <style> e style-in-line Muita gente ainda usa o CSS todo dentro de uma tag style ou ± não menos errado ± usa style-in-line. o uso de CSS em folhas de estilos separadas otimiza o carregamento do site e permite uma melhor separação entre a estrutura (HTML) e a aparência (CSS) do mesmo. entretanto estas 11 são suficientes para melhorar o seu desempenho.blogspot. Tanto o Blogger como o WordPress têm suporte para o uso de miniaturas. GIMP. O CSS foi lançado na década de 90 gente! Ele foi feito pra ser usado! Além de deixar o seu código fonte muito mais limpo.com 1. 8-Usar a barra ³/´ no fim dos directórios em endereços URL Esta dica parece simples mas faz muita diferença! Abrir um Site/Blog com http://teublog. Se o leitor quiser visualizar a imagem no seu tamanho real. deixando o carregamento de páginas mais lento. Boas Optimizações! Fonte: http://aprenderwebdesign. TR.com. TD não será mais utilizadas pois geram um enorme espaço branco no HTML e provocam o carregamento de um site mais lento. Defina sempre esses parâmetros dentro da tag IMG SRV e veja o seu Site/Blog carregar de forma mais rápida! 10-Usar miniaturas nas imagens Utilizar imagens em miniaturas deixa o Site/Blog com um look mais profissional e permite que a abertura das páginas se faça de um modo mais rápido.link rel=stylesheet type=text/css href=http://seusite. basta clicar sobre a miniatura. As Tags TABLE. Utiliza sempre de preferência o trabalho com CSS 7-Diminuir os comentários do código do template O template que possui vários comentários do tipo :/****início do cabeçalho***/.

Livro do autor Você é um autor de livros super renomado e quer disponibilizar toda as 841 páginas do seu livro de bolso no seu site pessoal? Então. uni-vos! Falei sobre isso no outro artigo mas vale repetir: muita gente usa um site que. levante uma tocha e inicie uma caçada contra mim. pra você já se preparar? 2. sandbox. cinco requisições diferentes que o seu servidor recebe. Separe as páginas do livro em páginas do site« Várias! Quanto menor o . manipula e redireciona só pra inserir o JavaScript do seu site. chama o jQuery mais três plugins e um script criado com os efeitos do site. isso vai economizar MUITO bandwidth (tráfego mensal) pro seu site. essa dica vale para a exibição de conteúdo« Não daquele topo fofinho que você fez pro seu site. Isso dá um total de cinco arquivos. veja sobre o Google Minify 3. previsão do tempo e tudo mais? Pode sair dele agora. Evite usar objects espalhados pelo site« O Flash é mal lido pelo Google. entre uma linha e outra. e sé isso for te dar muita dor-de-cabeça. pesa. Arquivos JavaScript. por favor. que pesa muito menos que o Flash e você não precisa do . designer. 5. Não saia enfiando códigos prontos e iframes e scripts no seu site só pra tentar deixar ele mais legal« Isso é coisa de principiante e isso não traz vantagem nenhuma pro seu site! A não ser. não coloque tudo em uma página só. não segue nenhum padrão de organização de código (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). 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). mural de recados.. 6. organiza. As futilidades da Web Achou um chat cheio de códigos prontos de chats. você encontra uma observação que diz que o seu personagem tem cabelo vermelho« Não seria melhor que isso viesse logo depois da capa. que vantagem pra você signifique coisas que ninguém vai usar. Acabe com o Flash Antes que você. por exemplo. 4.Imagine que você vai fazer o papel de uma peça de teatro e lá pela terceira página. claro. Flash pesa? Sim.fla para editar« Qualquer problema é só entrar no FTP e mudar. Una (junte) todos os códigos JavaScript do seu site em um arquivo só.

o tratamento do browser não é eficiente e as imagens perdem suas características. pode usar alternativas gratuitas também. Quanto mais arquivos você chamar de servidores que não são o seu site. Meu site é HD! Bom« Você já diviu seu site em páginas. sua galeria de fotos usa thumbnails e. como o Notepad++.com e por ai vai. mal-redimensionadas ou de resolução alterada). 3. 9. Aprenda a criar sites usando um editor de texto que não te mostra uma representação visual. Isso também deixa as imagens feias (distorcidas. seja no CSS. .. e melhor pro seu bolso (se você trabalhar com publicidade online). mais lento vai ser o carregamento dele pois o visitante vai precisar ³resolver´ vários DNSs. Se você não possui. Elas serão carregadas com o tamanho original (grande) e será redimensionada no browser. Seu site não é um Centro de Convenções! Não precisa ficar chamando um arquivo de cada site« jQuery do Google. melhor pro visitante. Não reduza as imagens com HTML Nunca use HTML puro para redimensionar suas imagens. não só o seu. melhor pra velocidade do seu site. 2. 8. melhor pro Google. vale a pena. CSS da Globo. 20 Dicas para Deixar Páginas Web Mais Leves 1. isso vai economizar trabalho pro navegador do visitante que não vai ter que carregar toda a imagem antes pra descobrir o tamanho de exibição. mas não é 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 código fonte criado por ele e comece a fazer uma limpeza geral. NetBeans e vários outros« Até o próprio Notepad serve! 10. E o tamanho da minha imagem é« Quando você usar o atributo <img « /> defina a largura e altura da imagem. Isso irá reduzir o tempo de renderização da página pois o browser saberá como encaixar os elementos na tela. O que você vê é o que você tem. seja no HTML. Especifique as dimensões da imagem Sempre especifique os tamanhos das imagens no código HTML.. peraí« As fotos (grandes) estão com 100% de qualidade?! Pra que? O cérebro humano quase nunca conseguiu reparar a diferença entre uma imagem com 80% e outra com 100% de qualidade. EditPlus. Reduza a qualidade das suas fotos.conteúdo. Na maioria dos casos eles acabam criando códigos além do necessário. Menos é mais! 7. Comprima suas imagens Se você usa o photoshop use sempre a opção Save for Web .

Remova os espaços em branco do seu HTML Lembre-se. . será necessário pedir o pacote. pois uma vez lido o CSS externo. Cada servidor será otimizado para um serviço. Será uma economia significativa no código. divida-as em algumas partes para agilizar o carregamento. É preciso saber ponderar muito bem ao dividir ou não. mais rápido será o carregamento da sua página. receber o pacote e confirmar sua chegada. para layout arquitetura da pagina você deve usar CSS que tem esse propósito. para o qual será mais importante o cache dos arquivos. considerando quando emprestam seu conteúdo. espaço em branco também é um caracter e consome banda e espaço em disco. 8. você irá ajudar o crawler e o seu usuário. 16. mas para HTML faz uma grande diferença.4. Não corte demais! Isso poderá gerar muitas requisições HTTP e consequentemente deixará mais lento e fará o efeito contrario do esperado. ele será jogado no cache e não precisará ser recarregado a cada nova página.com. Use Gzip para reduzir o tamanho do HTML Uma alternativa muito válida é comprimir seu HTML para ser entregue. mas você irá dar uma mãozinha para ele usando tableless. e muito. É muito comum deixarmos sujeiras de espaço em branco em nossos códigos. 5. Use CSS ao invés de imagens Use CSS para criar os efeitos necessários para seu site quando possível. principalmente para Javascript. Claro. 11. na velocidade do seu site. remova-os sempre. mas o carregamento das imagens como background de uma div é mais rápido do que carregar a imagem com as tags HTML. Use arquivos Javascript externos também Segue o mesmo princípio do CSS externo. 14. 7. Uso de links relativos Pensando ainda na questão de tamanho dos arquivos HTML. Esse tipo de conexão segura é pelo menos 3 vezes mais lentas que o HTTP normal. Separe servidores de conteúdo e de banco de dados Se você possui um alto tráfego no seu site. Não use HTTPS desnecessariamente Somente use HTTPS quando for necessário. 15. esperar a resposta. Em termos de SEO. usar caminhos relativos ajuda a remover os caracteres http://www. o conteúdo a ser carregado será muito menor. Por isso. Imagens grandes? Corte-as Se você precisa carregar uma imagem muito grande no seu site. Especifique o DocType Páginas que tem DocType definido tendem a ser mais rápidas para serem carregadas. e em quantas partes será dividido. 13. 9. 6. flash ou arquivos embarcados. Imagens com CSS ao invés de imagens em tag HTML Pode parecer estranho. mas é um peso para SEO. criar servidores dedicados pode ajudar. quanto menos requisições HTTP você tiver. o melhor é usar o caminho absoluto. Isso também deixará seu código mais limpo e melhor para ser lido e entendido. Isso não tem impacto para imagens. 17. Reduza requisições HTTP do seu site Cada vez que você faz uma requisição HTTP. Os crawlers conseguem ler sites com tabelas. 12. Não use tabelas quando não forem necessárias Tabelas são feitas para apresentar dados tabelados.br/ cada vez que criar um link. Use arquivos CSS externos Usando arquivos externos. 10. Obviamente.seusite. não reduzirá o tamanho mas passará impressão de agilidade na abertura do site.

Este não é um validador que aponta erros CSS. Isso reduzirá o número de requisições HTTP do seu site e apresentará uma aparência de velocidade na entrega do seu conteúdo. Há várias configurações disponíveis e regras que você pode aplicar para conseguir o tipo de formato que deseja. 22. seu código deve estar bem formado. remover linhas em branco e adicionar novas linhas automaticamente entre as chaves. . Isso não melhora o desempenho real. CSS Compressor Outra popular ferramenta de compressão CSS web é o Robson CSS Compressor ela é open-source . CSS Optimizer Online CSS Optimizer é uma ferramenta web que reduz o tamanho do arquivo de folhas de estilo compactando e otimizando o CSS. use o validador do W3C. 25. 20. 21. Oferece varias de opções de compressão. também são suportados códigos PHP. Validação e Verificação 30. 23. pode sobrecarregar a página com cookies. ao se utilizar AJAX ou Javascript. Atente -se também para o tamanho de cada cookie transmitido. 26. Ela imprime um relatório linha a linha para mostrar a você exatamente o que foi alterado.18. 28. 19. Perl e JavaScript. Uncompress CSS application Essa aplicação oferece o caminho inverso das anteriores. tornado novamente possível a leitura humana do arquivo. mas passa mais conforto para o usuário que está utilizando seu site saber que está sendo processado o pedido. Isso quer dizer que se você não tomar cuidado. Use AJAX quando puder Usar AJAX ao invés de ficar recarregando seu site pode ser muito útil para otimizar a velocidade. Coloque imagens indicando carregamento É importante também. Notas importantes: Os mesmos seletores e propriedades são automaticamente agregados. 29. Há opções como reduzir espaços em branco. tratamento de cores. Reduza o número de cookies Cada vez que um browser faz uma requisição. C. colocar imagens que indiquem que o conteúdo está sendo carregado. ela é capaz de descomprimir código CSS compactados. Prettyprinter. basta inserir a URL do seu CSS e ele mostrará o status do seu estilo apontando erros. É possível inclusive. Clean CSS Clean CSS é baseado no popular CSS minifier CSSTidy . Serviço de validação CSS da W3C W3C CSS Validation Service é muito simples de usar. 24.de não se limita apenas ao CSS. FormatCSS FormatCSS permite que você corrija e padronize seu código fonte. Java. (confira o código-fonte em PHP ). Para se certificar de que seu código é válido. C + +.de prettyprinter. avisos e outras considerações. cookies são transmitidos. deixar seu CSS em ordem alfabética ou descapitalizá-lo. regras e propriedades CSS. Formatação 27. Você pode configurar o nível de compressão desejado e personalizar as opções de compressão.

Arquivo não otimizado: 36. Assim evita problemas como ficar fora do ar ou ainda demora de acesso. pois assim o número de requisições vai diminuir. Se necessário realizar comentarios. Por exemplo. 39. Confira algumas dicas para deixar seu site mais leve e adequado para a web. no modo otimizado. Verifique os Arquivos de CSS e Javascript 34. } Não use Várias Imagens Pequenas 38. } Arquivo Otimizado: 37. Coloque os Arquivos em Cache com o .31. Os arquios de CSS e Javascript podem ser otimizados para facilitar o carregamento da página. Por isso cada vez mais sites e até blogs estão tomando cuidado para deixar suas páginas mais leves. border: 3px dotted #000. 32. Se possível. observe o trecho de um arquivo CSS a seguir em duas versões: no modo não otimizado e depois. Colocar os arquivos em cache otimiza o carregamento no navegador do cliente. por isso é extremamente importante que você faça um backup de seus arquivos antes de substitui-los. body { color: #000. body { color: #000000. Verdana. border-width: 3px. espaços e comentários desnecessários devem ser apagados. já que cada imagem é uma nova requisição realizada. Escolha bons provedores de hospedagem. Escolha bem o seu Provedor de Hospedagem 33. font: bold 16px Arial. As imagens pequenas passam a falsa impressão que serão rapidamente carregadas. Verdana. font-size: 16px. border-color: #000000. Prefira criar imagens maiores que contenham as menores. Helvetica. 35. que mantenham um link estável e disponibilidade. contrate provedores brasileiros. seja claro e breve. font-weight: bold. tornando o conteúdo acessível para a maior parte dos internautas. mas isso não é verdade.htaccess 40. Helvetica. o que acaba deixando o carregamento total da página lento. font-family: Arial. pois quando ele for visitar o site novamente os arquivos já estarão no seu . Como exemplo. Todas essas ferramentas utilizam métodos automáticos de manipulação do CSS.

basta acessar o site www. opte por apresentar páginas estáticas. Sempre que Possível. reinicie o Firefox. marque a opção Não.htaccess no diretório público (o mesmo em que estão armazenados os arquivos utilizados pelo site). por exemplo. o que vai tornar o carregamento bem mais rápido pois não será necessário realizar novamente o download de imagens. Assim. 41. clique em Avançar Na segunda tela precisa criar uma conta de usuário gratuita no Foxmarks. Use Páginas Estáticas e não Dinâmicas 42. então informar seu usuário e senha.foxmarks. . Como as páginas dinamicas precisam ser mais processadas pelo servidor. ao voltar será aberta a janela Foxmarks Login. Clique em Avançar na janela seguinte para Sincronizar seus dados. escolha Não e clique em Avançar. ajude-me a cadastrar e clique em Avançar Preencha o cadastro e clique em Avançar Será exibida a informação que sua conta foi criada com sucesso.computador.com e clicar em My Foxmarks. Favoritos em qualquer lugar: Utilizando o Foxmarks no Firefox y y y y y y y Clique aqui para fazer a instalação do complemento Foxmarks Ao terminar. elas demoram mais pra carregar. Ferramentas especializadas (como Page Speed do Google e YSlow do Yahoo) podem auxiliar a conferir a velocidade de carregamento. basta configurar o arquivo . Para isso. As páginas serão comprimidas como GZIP para os navegadores que suportam este tipo de tecnologia. se nao for necessario algum tipo de processamento na página. 43. Use-as para melhorar a qualidade do site. clique em Avançar Na tela seguinte o FoxMark lhe informa que também pode sincronizar de forma segura as senhas de seu site. Para acessar seus favoritos de qualquer computador você não precisa instalar o complemento Foxmarks nele.

4. em azul branco e preto. O site delicious importa os favoritos do Internet Explorer.Outro serviço interessante é o site Delicious onde você pode exportar seus sites favoritos para um arquivo e depois enviá-lo para o site. A desvantagem é que ele não sincroniza seus favoritos. você pode também compartilhar seus sites favoritos com outras pessoas. o Firefox apresentará uma barra com novos botões que antecedem a barra de endereço  o primeiro: é um quadrado semelhante a uma bandeira. você tem a ferramenta Bookmarklets. Para facilitar a inclusão de novos sites favoritos na sua conta no delicious. Reiniciado. Digite no campo de busca DELICIOUS 3. Vá na guia FERRAMENTAS > COMPLEMENTOS > ADICIONAR (na jenala que abrirá). . então significa que o novos sites que salvar no favoritos da suas casa não serão enviados para a sua conta no Delicious. clique no DELICIOUS BOOKMARKS e em "instalar". você precisará fechar e abrir novamento o Firefox 5. Firefox. Este lhe levará para o site do Delicious onde você fará um breve cadastro e pronto. pode adicionar seus sites favoritos quando quizer. Aparecerá uma breve lista de complementos. para poder acessá-los de qualquer computador que esteja. Feito isso. 2. Instale o Firefox (não o tiver) 1.  Abrirá uma janela para que você busque o complemento a ser instalado. Safari e Opera. que adiciona o site que está visitando em seu favoritos no delicious com apenas um clique.

nem de como achou aquela página. ou ainda do seu celular. o recurso ³Favoritos´ é essencial para se ter acesso rápido às páginas mais visitadas. Chrome e Safari. Seguindo esse simples tutorial. 2 . e deseja acessar um site que está gravado na sua lista de favoritos de outro computador. Para complicar. Encontre a melhor relação resolução x qualidade. que vai do 0(low) ao 12(maximum). Porém. Confira: Passo 1. clicar no ícone em cinza semelhante a uma etiqueta chamdo "TAG". O Xmarks possui versões compatíveis com o Internet Explorer. Basta acessar o Firefox. para criar um atalho para seus sites referências de pesquisa. em casa ou no trabalho. cujo endereço é muito longo ou difícil de decorar. Firefox. não esquecendo: 1 . reduza pra 72dpi. Complicou. . Abra o arquivo no PS. Se você tem uma imagem em 300dpi. Faça o download do Xmarks no site do BaixaTudo. JPG. a resolução de 72 dpi é suficiente. você poderá acessar os seus sites favoritos de qualquer computador. não é? Isso vai deixar de ser um problema para você a partir de agora. Após clicar em Salvar. ou ainda. o ideal é que elas tenham 300dpi. Aplicativos Necessários: Navegador de internet e Xmarks Número de passos: 6 Presente desde as primeiras versões dos navegadores de internet. imagine que você esteja usando um computador. você não se recorda nem do endereço. não precisa ir até o site do DELICIOUS. abre-se outra janela que tem a opção de qualidade.Se estas imagens serão apenas visualizadas no computador.Se você precisa imprimir estas imagens. clique em Salvar Como.Importante Para adicionar um novo site.

e marque a opção ³Habilitar sincronização de Histórico de Navegação´ somente caso você precise acessar seu histórico de navegação de qualquer computador. um assistente o conduzirá pelas próximas etapas. será apresentada a tela solicitando a permissão para instalar o Xmarks. Com sua conta criada. . onde será criada a sua conta. Em seguida. e após a instalação. O navegador. Estas duas opções não são obrigatórias. Marque a opção ³Habilitar sincronização de abas´ caso queria acessar suas abas iniciais em qualquer computador. mas haverá uma nova aba. Passo 3. reinicie o navegador. Passo 4. Aceite. então.Preencha os dados para criar sua conta (Foto: Reprodução/João Paulo Carrara) Passo 2. Preencha os dados solicitados. se abrirá na mesma página que você estava.

toda vez que você adicionar um novo site aos seus favoritos. Acesse o site my. Essa opção é muito útil caso você . Passo 6.Seus favoritos ficarão salvos no servidor do Xmarks (Foto: Reprodução/João Paulo Carrara) Passo 5.com de qualquer computador para acessar seus favoritos (Foto: Reprodução/João Paulo Carrara) Uma observação importante: Caso você instale o Xmarks em dois computadores diferentes e faça login com a mesma conta. o navegador realizará a sincronização. Entre em my. o Xmarks vai sincronizar automaticamente os favoritos de seu computador com o servidor. A partir de agora.xmarks.xmarks.com e faça o login. seus favoritos serão sincronizados e ficarão disponíveis para acessar em ambos os computadores. Concluído o assistente. Pronto! Seus sites favoritos estão disponíveis para serem acessados a qualquer hora e lugar.

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