O Google admitiu que o acelerar é um fator determinante para o posicionamento de um site. Por esse motivo, e para atender às necessidades dos especialistas em SEO, a gigante de Mountain View introduziu no Webmaster Tools, hoje Search Console, uma nova ferramenta chamada Page Speed Insight. Esta ferramenta permite que você analise os problemas de desempenho de uma página da Web de forma intuitiva e diretamente do navegador Mozilla Firefox. A ferramenta, além de relatar possíveis problemas, também traz dicas e funções úteis para solucioná-los.
Algumas das falhas que podem ser encontradas com o Page Speed são facilmente resolvidas durante a fase de design do front-end de um site. Outros, por outro lado, precisam de um pouco mais de conhecimento no nível do sistema.
Indo em mais detalhes, os fatores que podem depender das configurações do sistema são:
- caching;
- compressão;
Já as relacionadas ao frontend e à estruturação do site são:
- redução de resoluções de DNS e redirecionamentos
- minificação de arquivos Css / Js / Html;
- otimização de imagem;
- ordem em que os elementos da página são carregados;
- paralelização e redução de requisições Http.
- Vamos analisar esses aspectos em detalhes.
Fase Um: Cache
A grande maioria das páginas da web contém recursos, como arquivos Javascript, Css, imagens que compõem o layout e outros tipos de arquivos que raramente são alterados. Embora esses recursos mudem, na verdade, raramente, toda vez que um usuário solicita a página da web com seu navegador, eles são, no entanto, baixado novamente. Isso aumenta o tempo de carregamento da página. Bem oHttp cache permite salvar esses recursos no navegador do usuário que visita o site ou nos servidores proxy do provedor. O resultado é que, por exemplo, a imagem em cache não será mais servida a partir do site, mas diretamente do PC do usuário ou do Proxy.
Isso dá uma vantagem dupla: reduz o tempo de ida e volta (o tempo que os dados levam para ir e voltar de um cliente para um servidor), eliminando muitas solicitações de Http necessárias para obter todos os recursos e, consequentemente, reduz o tamanho resposta geral do servidor. Reduzir o peso total da página para cada visitante que retorna também reduz significativamente o uso da largura de banda e os custos de carregamento do site.
Compressão em andamento ..
A compressão de páginas da web pode ser alcançada, usando sistemas gzip o esvaziar. Todos os navegadores modernos em circulação, de fato, suportam a compressão de arquivos Html, Css e Javascript e, portanto, permitem o envio de arquivos menores pela Rede sem perder informações. O processo de compactação ocorre no lado do servidor, habilitando alguns módulos ou usando scripts específicos.
A compactação é recomendada para recursos não muito pequenos, pois esse processo tem sua própria carga na máquina. A solução ideal, portanto, é combiná-lo com mecanismos de cache. Outro aspecto a se ter em mente é evitar a compactação de arquivos em formato binário (como imagens, vídeos, arquivos e pdfs) e, portanto, praticamente já compactados.
Resoluções de DNS e redirecionamento
O tempo de download da página também é significativamente afetado pelo número de resoluções Dns e o número de Redirecionar. Vamos ver em detalhes o que é:
La Resolução DNS é o tempo que o navegador leva para identificar a origem de cada nome de host único que atende aos recursos, mais o atraso causado pelo tempo de ida e volta. Para ser claro, o uso de muitos widgets na página causa um forte aumento nas resoluções de DNS. Consequentemente, é bom usar esses objetos com consciência e apenas se eles realmente beneficiarem os visitantes.
O mesmo é claro para o redirecionar: é aconselhável tentar incluir recursos que não se referem a outros. Deve-se dizer que, em alguns casos, como em sites que incluem muitos vídeos e imagens, você pode se beneficiar do uso de diferentes nomes de host, pois o tempo de resolução do DNS é compensado pela paralelização do download de vários recursos. Portanto, é necessário fazer as avaliações certas com base em cada necessidade.
Paralelização
Conforme recomendado pelo Google, o número ideal de hosts a usar é entre 1 e 5 (distribuído de forma que haja um host principal e quatro dos quais baixar os recursos "armazenáveis em cache") e a proporção entre o número de hosts e recursos deve ser 1 a 6. Então, nunca use vários nomes de host se o número de recursos usados pela página for inferior a seis. Por exemplo, é possível levantar a hipótese de que um site que usa um CSS, um Javascript e seis imagens não se beneficiaria com o uso de um nome de host adicional, o que seria justificável se os recursos se tornassem 12.
Minificazione Css / Html / Javascript
La minificação nada mais é do que a operação de compactação do código-fonte dos arquivos para minimizar a presença de espaços em branco e novas linhas. Esta intervenção, combinada com o compressão, permite obter uma redução significativa no tamanho do arquivo. Um pequeno e trivial exemplo de minimização é este:
em primeiro lugar:
a{
cor: # 0027ee
}
Depois de:
a {cor: # 0027ee}
Otimização de imagem
Os pontos principais quando se trata de otimização de imagens, são, sem dúvida, maximização da proporção qualidade / tamanho e o uso dos melhores algoritmos de compressão existentes. Uma ótima ferramenta para fazer isso é smush.com Yahoo, mas também RIOT por i arquivo JPG e TinyPng para arquivos PNG são ótimas ferramentas.
Outra operação muito importante na hora de criar uma página Web que utiliza imagens é usar sempre fotos já dimensionadas e, portanto, do tamanho correspondente ao tamanho real exibido. Usar uma imagem grande, 200 × 200, e incluí-la na página, redimensioná-la para 100 × 100 por meio de tags largura e altura, usaremos uma imagem maior do que a necessária e, conseqüentemente, o tempo necessário para seu download será maior. Outro parâmetro importante é especificar com as tags que acabamos de mencionar o tamanho exato que evita todas as operações de renderização desnecessárias.
Ordem de carregamento e redução de solicitações HTTP
Ao projetar uma página, as regras básicas a levar em consideração são:
- combinar vários arquivos Css em um recurso para reduzir o número de solicitações Http (o mesmo vale para JS);
- carregue primeiro o css e depois o Js como os últimos estão bloqueando, enquanto os primeiros são paralelizáveis;
- se possível, incluir Javascript no final da página;
- evite incluir Css e Js inline dentro da página;
- evite incluir arquivos Css usando @import;
- servem documentos estáticos de domínios que não definir cookies.
Todas essas otimizações não só permitem reduzir significativamente os tempos de carregamento das páginas, pois minimizam o número de requisições Http que possuem um tempo fisiológico para serem resolvidas, mas também permitem paralelizar o download dos diversos recursos à massa.
