Saber como tornar seu site mais rápido, em breve será um requisito fundamental para qualquer editor online com pretensões sérias. Por uma questão de fato, como já mencionado na Parte 1 deste guia, o Google irá em breve começar a usar a velocidade de carregamento do seu site juntamente com os outros fatores para determinar a sua classificação nos resultados da pesquisa. Você está preparado para isso?
Crédito da foto norebbo
Na Parte 1 deste guia, você já encontrou ferramentas e tutoriais úteis para acelerar o seu site, enquanto nesta segunda parte, você terá a oportunidade de conhecer em profundidade, a partir do próprio diretor técnico da MasterNewMedia, Drazen Dobrovodski, o que deve ser um outro elemento crucial para a sua estratégia como otimizar o código do seu site.
Este guia pode ser lido e entendido por pessoas sem conhecimentos técnicos, e é, de fato, dedicado aqueles que precisam decidir e coordenar tais tarefas de otimização de desempenho, bem como para aqueles que realmente as realiza.
Ao mesmo tempo, como você não precisa ser um programador para entender o que está escrito neste guia, é realmente de grande ajuda se você for um técnico competente ou se tiver alguém que possa auxiliá-lo na implementação de algumas destas técnicas de otimização de velocidade.
Nesta parte do guia, você encontrará um manual detalhado sobre como otimizar o código do seu site na Internet a fim de torná-lo muito mais rápido do que é agora.
Você pode de fato testar e medir a velocidade de carregamento da página, comparando-a com um outro site do mesmo nicho, ou seja, um concorrente seu, para assegurar-se de ser tão rápido ou mais que eles.
Aqui estão os principais pontos abordados
por Drazen Dobrovodski
Se você estiver criando as suas páginas estáticas por conta própria, pode pular esta etapa. No entanto, isso só será de utilidade para quem desenvolve poucas páginas como hobby para um site pequeno ou corporativo, é mais um cartão de visita "online" que qualquer outra coisa.
Qualquer site que tenha mais ambição geralmente usará outras plataformas, como Movable Type, WordPress, ou um sistema de gerenciamento de conteúdo como o Drupal.
A maioria delas irá gerar conteúdo dinâmico por padrão. Isto significa que para cada um dos visitantes de qualquer das páginas haverá um script CGI ou PHP executando um banco de dados para obter o modelo (aparência) da página, o conteúdo da página (texto e imagens) e, em seguida, combina-os para exibir tudo isso ao visitante.
Não é preciso ser um gênio para descobrir que se você receber 1000 visitantes, isto se traduz em pelo menos 2000 consultas aos bancos de dados e muito tempo de processamento para "vestir" o seu texto com um modelo. Tudo isso em cima dos 1000 pedidos de HTTP que o servidor terá de lidar.
Usar páginas estáticas em HTML é muito mais rápido e fácil para o servidor e por isso você deve usar disso sempre que puder.
Este é um ponto tão importante que todas as principais plataformas de publicação e de sistemas de gerenciamento de conteúdo que eu posso pensar tem a capacidade de fazer pré-cache das páginas. Com isso, os visitantes podem obter páginas estáticas já prontas em vez de esperar que o banco de dados leia e desenvolva os scripts para formar as mesmas páginas para cada visitante.
Para usar páginas estáticas HTML:
Quase todas as páginas e templates hoje usam imagens, JavaScripts, Flash e includes. Para cada um desses, o servidor web tem que estabelecer uma conexão, verificar as permissões de arquivos, enviar cabeçalhos, etc.. Cada um destes aumenta o tempo de carregamento. Por isso, novamente - todas essas coisas estão lá por um motivo. Eles são necessários.
Portanto, como você preserva suas imagens, JavaScript e includes ao mesmo tempo em que mantém o número de elementos baixo? Você agrupa o maior número possível deles em um arquivo.
2.1 Agrupando Imagens Em Um Único Arquivo Usando CSS Sprite
A linguagem CSS permite que você faça a fusão de várias imagens em um mesmo arquivo de imagens e posicionar esse mesmo arquivo de forma diferente para que apenas uma seção seja mostrada em qualquer lugar da página.
Esta é a imagem que você obterá:
Esta é a imagem com dimensão em pixels.
Agora, o primeiro layer DIV que você obterá do "SuperGreatLogo" terá 194px de largura, 33px de altura e começaria da parte de cima à esquerda da imagem (zero offset a partir do topo, zero offset a partir da esquerda).
#supergreatlogo {
width:194px;
height:33px;
background: url(http://www.mysiteurl.org/images/image.jpg) no-repeat 0px 0px;
}Em formato HTML, você terá o código com uma única linha:
<div id="supergreatlogo"></div>
E é assim que fica:
O "Menu Item", como podemos ver é de 43px de altura e 194px de largura. Começa em zero a partir da esquerda e 33px no topo. Portanto, o CSS do "Menu item" ficaria assim:
#ourmenuitem {
width:194px;
height:43px;
background: url(http://www.mysiteurl.org/images/image.jpg) no-repeat 0px -33px;
}
Em HTML, é assim que fica:
<div id="ourmenuitem"></div>
E essa é a parte final:
"Icon1" parte da imagem tem 36px de altura e 89px de largura. Começa de zero a partir da esquerda e 76px do topo. Por isso, o CSS para esse trecho é:
#ourIcon1 {
width:89px;
height:36px;
background: url(http://www.mysiteurl.org/images/image.jpg) no-repeat 0px -76px;
}
Em HTML, fica só essa linha:
<div id="ourIcon1"></div>
E é assim que fica:
Finalmente, "Icon2" tem 36px de altura e 105px de largura. Começa em 89px à esquerda e 76px no topo. O CSS será:
#ourIcon2 {
width:105px;
height:36px;
background: url(http://www.mysiteurl.org/images/image.jpg) no-repeat -89px -76px;
}
Em HTML:
<div id="ourIcon2"></div>
E é assim que fica:
Usando CSS Sprites, você pode mesclar todas as imagens de seu site em uma interface, assim, reduzindo drasticamente o número de solicitações HTTP. Dependendo da complexidade da interface do site isso pode ser um fator principal para a velocidade do site.
2.2. Agrupando JavaScript e Includes PHP/ASP/JSP
Se você já codificou alguma coisa em JavaScript, PHP ou qualquer outra linguagem, você sabe que não é muito problema mesclar um código. O problema começa quando esse script tem que mostrar algo em um lugar exato na página.
Como você pode mesclar JavaScripts se alguém escreve algo no cabeçalho, o segundo na coluna lateral e alguma coisa em um terço em rodapé?
A resposta é: usando a propriedade innerHTML JavaScript. Ele permite que você mude - bem - o HTML interno de qualquer elemento que você especificar.
Dê uma olhada no layout deste exemplo:
var myTopText="Text for the header";
var mySideText="Text for the side div";
var mySideText="Text for the footer";document.getElementById('topdiv').innerHTML=myTopText;
document.getElementById('sidediv').innerHTML=mySideText;
document.getElementById('footerdiv').innerHTML=mySideText;
Usando este método, você pode mesclar vários JavaScripts, ou do lado do servidor (como PHP) e includes e ainda dirigir as suas saídas de qualquer lugar que você quiser na página.
2.3 Use Caminhos Relativos Em Vez De Caminhos Absolutos
Em vez de nomear as suas imagens usando:
img src="http://www.mysite.com/images/extra-pretty-images/image.jpg"use um caminho relativo para o arquivo no servidor, como o seguinte:
img src="../images/extra-pretty-images/image.jpg"Obviamente este código muda dependendo da posição de seus arquivos HTML, mas depois de substituir todos os caminhos absolutos de imagem por caminhos relativos, o servidor não terá mais que reestabelecer uma conexão para cada imagem na página.
Todas as versões recentes dos navegadores da internet têm a capacidade de aceitar conteúdo Gzipado (e desde o Internet Explorer 4 e Netscape/Mozilla versões 6 e 7). Isso significa que você pode compactar todos os seus CSS e JavaScripts com gzip e os navegadores os exibirão normalmente.
A página que você está lendo usa o gzip para CSS e JavaScripts diversos. Imagens em JPEG já são compactadas para que você as deixe como são, mas fazendo uma pré-compressão do CSS e do JavaScript, você pode reduzir significativamente o tamanho dos arquivos que estão sendo transferidos. Isso acelera tanto o carregamento da página, como reduz a sua largura de banda.
Vamos explicá-lo usando um arquivo CSS.
Primeiro você faz um Gzip do seu arquivo e o hospeda em um servidor. Agora, altere a chamada CSS em suas páginas para refletir a nova extensão GZ. Por exemplo:
Agora, na pasta CSS, crie um arquivo .htaccess com o seguinte código:
AddEncoding x-gzip gz
AddType 'text/css; charset=UTF-8' .gz
A primeira linha mostra que os arquivos com extensão "gz" estão em codificação "x-gzip". A segunda diz que eles devem ser enviados com o cabeçalho (header) "text/css" para que o navegador possa saber como usá-los.
Para fazer isso para JavaScripts, faça uma pasta separada (por exemplo / js) e adicione o mesmo .htaccess usando somente linhas "text/javascript" em vez de "text/css".
Nas seções 2, 3, vimos como substituir caminhos absolutos por caminhos relativos. No entanto, se as suas imagens (ou outros componentes) estão em um servidor web em separado, usar um código como este:
img src="http://www.mysite.com/images/extra-pretty-images/image.jpg"
força o navegador do usuário a realizar uma pesquisa DNS.
Veja bem, o verdadeiro endereço do seu site não é "www.meusite.com" (ou o que quer que seja). Seu endereço real é um número IP. O endereço IP consiste de quatro números, cada um com 1-3 dígitos dividido por pontos. Por exemplo: IP 69.147.76.15 é o Yahoo!, 216.92.198.27 é MasterNewMedia e assim por diante.
Cada vez que você usa um endereço como "mysite.com" no código da página, o primeiro navegador tem que realizar uma pesquisa DNS (Domain Name Service) para ver qual IP está associado ao domínio "meusite.com". Não é preciso dizer que isto leva tempo.
Para evitar isso (e o conteúdo está em um servidor separado e, portanto, você não pode usar caminho relativo), use o endereço IP em vez do nome de domínio como "www.meusite.com".
Alguns tutoriais colocam muita ênfase em tudo o que se refere ao cache, como por exemplo cabeçalhos de expiração. O valor deste depende do tipo de tráfego que seu site recebe.
Você tem que conhecer o seu site. É comum ter 80% de novos visitantes vindo através de algum mecanismo de pesquisa (s).
5.1 Coloque o JavaScript e CSS em Arquivos Externos
O navegador irá armazenar o cache do CSS e JavaScript e utilizá-los novamente quando o visitante for para outras páginas. Desta forma, você não tem que carregar o mesmo código CSS e JavaScript de cada página.
5.2 Adicione um Cabeçalho de "Expiração" com uma Data Futura Distante
Você pode fazer isso para qualquer tipo de arquivo em .htaccess, desta forma:
Header set Expires "Thu, 15 Apr 2020 20:00:00 GMT"
O exemplo acima é para imagens e arquivos em Flash, mas você pode fazer isso para arquivos em CSS e Javascript também.
5.3 Configure as Etags
Etags são enviadas em cabeçalhos HTTP para cada arquivo. Em seguida, o navegador web pode comparar a Etag dos arquivos que tem em cache com o arquivo no servidor e, em seguida, se as Etags baterem, o navegador usará o arquivo em cache em vez de baixá-lo novamente.
As Etags permitem que você seja flexível com o cache. Se você não necessita ter essa flexibilidade (por exemplo, para imagens em suas páginas, css, etc), pode simplesmente desligar as Etags e o navegador usará outros métodos para decidir se deve ou não utilizar a cópia em cache. Portanto, se você já tiver adicionado as linhas acima do item 5.2 ponto para o seu .htaccess, utilize então apenas esta linha:
FileETag none
6. Economize o Tempo do Navegador nos Arquivos em CSS e JavaScript
6.1 Evite Expressões em CSS
Expressões em CSS são um recurso do IE que não é suportado por outros navegadores. Ele permite que você coloque os valores não-fixos no CSS. Por exemplo:
width:expression(document.body.clientWidth > 1024? "1024px": "auto" );
Leva tempo para que os navegadores interpretem isso e só o IE o suporta isso, portanto, é melhor evitá-lo.
6.2 Reduza o Número de Elementos em DOM
Cada camada DIV, cada link ou formulário de cada página, todos esses elementos formam parte do que se conhece por DOM (Document Object Model).
Se diminuir o número de elementos em DOM, o navegador vai gastar menos tempo comparando-os com a CSS e abrindo a página.
6.3 CSS na Parte de Cima, JavaScript na Parte de Baixo
Se você carregar o CSS na parte superior da página (de preferência na seção
), conforme a página for carregada, o browser será capaz de formatá-la corretamente.Caso contrário, o browser terá que passar o código da página, até que ele "chegue" no CSS e em seguida, volte para formatar as seções da página carregadas antes do CSS. Obviamente, isso não é uma forma eficiente de proceder. Para explicar melhor - onde quer que você coloque o CSS, a quantidade de dados que trafegam entre o servidor e o visitante ainda será o mesmo. No entanto, todo o conteúdo da página que é carregado antes do CSS vai aparecer não formatado. Então, quando finalmente o navegador ler o CSS, ele vai voltar e iniciar a formatação desse conteúdo. É como se blocos de texto estão sendo movimentados e e transformados com diferentes fontes e cores, e o visitante percebe isso como tempo de carregamento da página.
O JavaScript irá bloquear downloads paralelos. Isso significa que o seu navegador deve esperar até que o script seja carregado e executado antes de proceder com o carregamento de tudo o que vem depois do código JavaScript (imagens, Flash, CSS, mesmo se você as colocou abaixo JavaScript).
O JavaScript também depende muito dos elementos da página. Se você consultar a seção 2.2, verá um exemplo disso. Se carregar o JavaScript dado no topo da página, verá um erro. O JavaScript foi carregado antes que os elementos de identificação foram estabelecidos e, portanto, não pode encontrar o ID a que você está se referindo.
Tudo considerado, o melhor é manter os JavaScripts na parte inferior da página de código.
6.4 Reduza o Número de Linhas Usados em JavaScript e CSS
Em qualquer circunstância normal, isso não é importante, mas merece lugar na sua lista.
Todos os comentários, novas linhas, espaçamento duplo, etc simplesmente aumentam o tamanho do seu CSS e JavaScript. Se você tem um monte deles, pode aumentar.
Você pode fazer isso sozinho ou baixar o YUI Compressor para reduzir a quantidade de CSS e JavaScript para você.
7. Reduza O Número De Cookies
Se você usa cookies, tenter mantê-los na menor quantidade possível. Os cookies chegam carregados com os cabeçalhos antes do conteúdo, de modo que se forem poucos, o usuário pode usufruir de uma página que carrega mais rápido.
8. Evite Redirecionamentos
Os redirecionamentos são usados para (surpresa, surpresa) os usuários redirecionarem automaticamente uma URL para outra. Isto pode ser feito porque uma URL antiga não é mais usada ou porque você está enviando o usuário a uma área de login, etc
Redirecionamentos não são uma coisa que todo website usa (por isso está no 7o. lugar na lista). Alguns sites não os usam, mas não devem removê-los.
Por exemplo, se você usar a plataforma de publicação WordPress, não precisa escolher. O WordPress irá adicionar um redirecionamento para o arquivo .htaccess e se removê-lo, o site morrerá.
Ainda assim, você deve ter em mente usar redirecionamentos com moderação, porque aumentam o tempo do carregamento da página.
9. Use Uma Rede De Entrega De Conteúdo
Isto é só para peixes grande.
Já mencionamos na Parte 1 que a velocidade de transmissão de conteúdos depende da proximidade da audiência com o servidor.
Quando você tem um site internacional, pode colocar o seu conteúdo (ou pelo menos componentes estáticos do mesmo) em vários servidores em várias localizações geográficas, fazendo com que carregar as páginas se torne cada vez mais rápido para um número maior de pessoas. Novamente, isso é útil apenas para sites grandes.
Conclusões
Acelerar seu site depende de uma série de fatores. Aqui, só abordei os fatores mais gerais que a maioria dos usuários será capaz de usar.
Para obter mais sugestões orientadas para o seu site em específico, você pode baixar o Speed Google Page ou o Yahoo! YSlow.
O YSlow vai até dar uma nota para os itens que adicionam ou diminuem a velocidade do seu site. Na verdade, se você testar o YSlow Yahoo, apontando para algumas das páginas do Yahoo vai perceber perceber que esta página recebe um mero C. O ponto é: não leve esta "nota" tão a sério assim.
Algumas das dicas e medidas sugeridas só são viáveis para sites maiores (uma rede de distribuição de conteúdo, como exemplo óbvio).
Também tenha em mente que a adição de qualquer conteúdo de terceiros, tais como widgets, anúncios ou botões significa que o número de elementos DOM sobe e vai para o mesmo número de solicitações HTTP, DNS lookups, componentes sem compressão, cookies, etc. Quanto mais você usá-los, mais a velocidade do seu site vai depender de componentes fora de seu controle.
Cada web site é diferente e para cada site há algum ponto realista para o qual a otimização é factível ou significativa.
Por último, como uma ressalva a mais, ando prestando bastante atenção no protocolo spdy. O Google está fazendo pressão sobre a questão, portanto é algo que pode se tornar um grande problema em breve.
Agora todos os endereços de Internet começam com " http://", porque todas as páginas da internet usam o HyperText Transfer Protocol (HTTP). O HTTP foi criado há muito tempo quando a internet era acessada em modems a 9600 KB (ou mais mais lento ainda) as páginas eram apenas textos acadêmicos, com talvez um quadro de imagem ou dois.
Este novo mundo do Flash, CSS, sobreposições de imagens e todos os sinos e assobios de hoje não foram feitos para o HTTP.
O spdy deve aproximar os protocolos de transferência da velocidade necessária para o conteúdo do século 21, mas, se as dicas de velocidade listadas aqui ajudarão a raspar alguns segundos a menos do tempo de carregamento da sua página.
Fim da Parte 2 -- Parte 1 aqui.Nico Canali De Rossi -
Crédito das fotos:
Evite Criar Páginas Dinâmicas - norebbo
Use A Menor Quantidade De Includes E HTTP Possível - John Takai
Use Componentes Gzip A Seu Favor - Kirsty Pargeter
Reduza O Número de DNS Lookups - pixbox
Use Cache O Quanto Puder - Stepan Popov
Economize o Tempo do Navegador nos Arquivos em CSS e JavaScript - mipan
Reduza O Número De Cookies - superdumb
Evite Redirecionamentos - hypermania
Use Uma Rede De Entrega De Conteúdo - adistock
Reference: MasterNewMedia [ leia mais ]
Feed RSS de Notícias Diárias
