Você está precisando de uma informação urgente. Faz uma pesquisa no google e encontra um resultado com o título perfeito. Já se sente até mais aliviado por tê-lo encontrado. Mas quando clica nesse resultado, a página demora para carregar. Volta aquele desespero, a angustia aumenta e o stress toma conta. Ah! Que demora. Volta para a página do google em busca de outro resultado.
Não basta ter um site bem feito, com conteúdo 100% e layout incrível se ele não abrir rápido. Portanto, velocidade é um ponto essencial e deve fazer parte do seu checklist quando for criar o seu.
Veja 5 dicas para deixar seu site mais rápido:
Minificação de scripts e estilos css
Minificação é uma técnica que retira a indentação e deixa o código em apenas uma linha. Isso diminui o tamanho do arquivo original. Quanto menor for o tamanho do arquivo, mais rápido ele irá baixar. Recomenda-se também unir todos os arquivos de scripts (.js) e estilos css (.css) em um só. (Ex: all.js e all.css) Isso diminui a quantidade de requisições que serão feitas ao servidor.
Além disso, quando a página precisa carregar arquivos externos, o navegador espera a conclusão desses arquivo para renderizar o restante do conteúdo. Portanto, quanto mais rápido eles carregarem, mais rápido a página será exibida.
Otimização de imagens
Ao usar imagens no seu site, lembre-se sempre de otimizar a qualidade e a resolução. Existem ferramentas que otimizam a qualidade diminuindo o peso. Se você tem photoshop, dentro do menu arquivo existe uma opção ‘Salvar para web’ que faz isso.
Quanto a resolução, se a a largura da imagem for maior que a largura máxima do site, redimensione a largura (e altura usando a proporção) para a mesma largura do site.
Use o formato de imagem WEBP
Através das tags picture e source você pode utilizar formato de imagem .webp. Esse formato consegue reduzir bastante o peso da imagem sem perder qualidade. Além disso, é possível utilizar imagens para cada tamanho de tela e também utilizar imagens com maior densidade de pixels.
<picture>
<source
srcset="image-example--mobile.png, image-example--mobile@2x.png 2x, image-example--mobile@3x.png 3x"
type="image/png"
media="(max-width: 667px)">
<source
srcset="image-example--mobile.webp, image-example--mobile@2x.webp 2x, image-example--mobile@3x.webp 3x"
type="image/webp"
media="(max-width: 667px)">
<source
srcset="image-example.png, image-example@2x.png 2x, image-example@3x.png 3x"
type="image/png">
<source
srcset="image-example.webp, image-example@2x.webp 2x, image-example@3x.webp 3x"
type="image/webp">
<img src="image-example.png" alt="Imagem de exemplo">
</picture>
Use HTTP/2
A nova versão do HTTP trás grandes melhorias de performance, como a compressão automática com o formato HPACK, a multiplexação que permite o navegador baixar vários arquivos em um único request, além de aumentar a segurança, visto que o HTTP/2 requer o uso de HTTPS.
Outro recurso muito interessante do HTTP/2 é o server-push. Com ele o servidor pode enviar arquivos associados ao documento HTML antes do navegador solicitar, diminuindo o tempo de carregamento do site.
Compressão Gzip
Caso o servidor que você utilize ainda não ofereça suporte para o HTTP/2, você pode utilizar a compressão gzip. Com a compressão gzip habilitada no servidor, recursos como páginas HTML, folhas de estilos, scripts, imagens, são compactados antes de serem enviados ao usuário. Com a compactação, os arquivos diminuem de tamanho aumentando a velocidade de carregamento do site.
Offline cache através do Service workers
Com o service worker — um arquivo .js que roda em segundo plano — conseguimos utilizar o Application cache do navegador para que o site funcione offline.
Isso diminui e muito o tempo de carregamento, além de diminuir a carga do servidor, já que ele não precisará enviar esses arquivos. No site de developers.google.com tem uma matéria mostrando como podemos implementar o service worker para o site funcionar offline.
Utilize ferramentas para medir a velocidade do site
Existem ferramentas que nos ajudam a medir a velocidade de carregamento do site.
Uma delas é o PageSpeed Insights do Google. Ele mostra o que pode ser melhorado pra carregar o site mais rápido e também da uma nota de 0 a 100.
Outra ferramenta que você pode utilizar é a do Pingdom, o Pingdom Website Speed Test. Ele te dá um relatório detalhado do que está sendo carregado, o tempo que leva, tamanho de arquivos e mostra o que precisa ser melhorado.
Esses são apenas algumas dicas para melhorar o tempo de carregamento da página.
Conhece mais algum? Gostou do artigo? Compartilhe nas redes sociais.