Possuir um site de rápido carregamento é indispensável, ainda mais quando sabemos que os usuários podem estar acessando de um dispositivo móvel — onde em muitos casos não dispõem de uma boa conexão. Para evitarmos transtornos, até mesmo em desktop, é preciso otimizá-lo. No entanto existem alguns cuidados que devemos tomar, e ferramentas que nos auxiliam nessa tarefa.
Índice
Boas Práticas para uma boa performance
Versão reduzida do site em mobile
Uma prática muito utilizada quando falamos principalmente em um site multi plataforma é o desenvolvimento e adequação para diferentes dispositivos. Grandes portais na web, como o Globo, Uol, Terra e outros, utilizam uma versão reduzida de seu site em versão mobile. Isso ajuda muito quando falamos em um carregamento, pois é aproveitado apenas a parte principal do site, com áreas linkadas para partes internas.
Imagens salvas para WEB
Embora pareça difícil, é possível utilizarmos imagens em alta resolução com um tamanho aceitável para o carregamento no site. Ferramentas de design entregam essa solução de forma simples e ágil. Essa solução se chama “Salvar para web” , trata-se de uma opção onde é possível manter a imagem em seu formato original, porém com um tamanho menor.
CSS Inline
Sabemos que utilizar uma folha de estilo externa é sempre a melhor opção. Quanto menos linhas de css tivermos em nosso arquivo .html, melhor será a performance do nosso site. Isso ocorre, principalmente porque quando uma página html é carregada, ela obedece uma linha cronológica de arquivos, e quanto mais mudanças de css forem encontradas no meio do caminho, mais tempo irá demorar o carregamento. Além disso, quando trazemos o css inline, algumas partes do site podem ir se alterando conforme a página é carregada, o que prejudica e muito a performance.
Utilização de arquivos externos
Com a chegada do HTML5, muitas animações e outros efeitos se tornaram possíveis apenas utilizando diferentes galerias e frameworks diferentes. Embora pareça muito mais fácil importarmos os arquivos diretos de sua fonte, de um github ou de outro servidor, esta é uma das piores coisas que podemos fazer se estamos preocupados com a performance de nosso site. Quanto mais referências externas tivermos, mais requisições em outros servidores nosso site fará, sendo assim mais tempo será necessário para o fim do carregamento da página. É extremamente importante deixarmos todos os arquivos em nossos ambientes, e apenas referenciá-los quando necessário.
Carregamento externos de fontes
Outra boa prática que devemos nos atentar é o excessivo uso de fontes externas. Hoje o google nos entrega uma ótima ferramenta, a qual podemos importar as fontes diretamente de seu ambiente, onde só se é utilizado uma linha de código. Embora isso soe de maneira muito boa, o uso excessivo dessa ferramenta pode acarretar em um problema de performance. Como dito acima, quanto menos requisições externas forem realizadas, melhor para o site.
Ferramentas que nos auxiliam para uma boa performance
GT Metrix
A análise do GT Metrix utiliza 27 critérios distintos para gerar sua nota de classificação. Em cada critério é possível visualizar o que precisa ser otimizado.
Em destaque, você verá o índice de classificação Page Speed, da GT Metrix, e também o índice YSlow, que é uma ferramenta de código aberto para análise de velocidade baseada em regras de performance definidas pelo Yahoo. As notas de classificação são exibidas em percentual (de 0 a 100%).
Page Speed Insights, do Google
A ferramenta do Google faz parte do portal para desenvolvedores da empresa e analisa o carregamento do site tanto em desktops quanto em dispositivos móveis. Após submeter a url da página, você receberá uma avaliação baseada nos seguintes critérios: Velocidade mobile, velocidade desktop, e experiência do usuário.
Em cada um dos critérios listados acima, a página receberá uma nota de classificação, entre 0 e 100, sendo 0 o pior índice e 100 o melhor. Quanto mais próximo de 100, menos itens você terá para corrigir.
Além disso, será realizada uma avaliação detalhada dos problemas encontrados e uma recomendação do que pode ser feito para correção. Da mesma forma, os elementos que estiverem em ordem, serão listados na área de “Aprovado”.
Smush.it
As imagens correspondem por mais da metade do tráfego de um site, por esse motivo são uma das melhores formas de otimizar carregamento de um site. O Smush.it é um serviço do Yahoo! que reduz o tamanho das imagens sem perder qualidade. O melhor de tudo é que existe também o plugin Smush.it para WordPress que otimiza as imagens na hora que você faz o upload e ainda permite otimizar todas as imagens que já foram enviadas.
Pingdom Tools
Outra ferramenta de diagnóstico muito mais especializada, o Pingdom Tools faz o inverso do PageSpeed Insights. O Pingdom Tools é uma ferramenta de diagnóstico de DNS, ele analisa as requisições HTTP feitas pelo seu site, ou seja as requisições a imagens, scripts, folhas de estilo e recursos externos (widgets sociais, vídeos, iframes, ajax, etc.). O mais legal é que o Pingdom gera um relatório de todos os arquivos do seu site, que mostra o momento em que o arquivo foi requisitado, quanto tempo levou para o servidor responder, o tempo de carregamento e finalizou a requisição. Dessa forma é possível identificar gargalos desempenho que de outra forma você não notaria, como arquivos pesados, servidor lento, scripts externos (como os do Facebook), links quebrados, etc.
Plugin WP Fastest Cache
Quando se trata de plugins de cache para o WordPress o W3 Total Cache é a maior referência, sendo recomendado por empresas de hospedagem, como GoDaddy, Hackspace e Hostgator. O que ele faz e salvar uma cópia das páginas em html estático, eliminando a necessidade de consultas ao banco de dados e de grandes processos no servidor. Ele também tem outros recursos, como gzip, cache no navegador, minimização de html, js e css.
Utilizando as ferramentas e boas práticas citadas acima, é possível que seu site tenha uma boa performance e entregue uma boa experiência ao usuário final. Vale lembrar que novas ferramentas aparecem sempre no mercado, portanto é precisa estar ligado as novas tendências e atualização do mundo web.