No final de 2010, o Google anunciou publicamente que a velocidade do site se tornou uma nova variável introduzida em seu algoritmo do ranking de busca orgânica. Já se passaram 7 anos, mas ainda assim muitos desenvolvedores deixam de otimizar a velocidade do site. Vamos corrigir isso?

Além de importar para fatores de ranqueamento, a velocidade de carregamento do site também é importante para a experiência do usuário. Afinal, de nada adianta se o usuário acessar seu site e não conseguir fazer nada nele, não é?

Para te ajudar a resolver esse problema – ou ao menos minimizá-lo, separamos uma série de procedimentos que vão influenciar e muito na velocidade de carregamento. Então, aqui vão algumas dicas para melhorar a velocidade da sua página:

1. Aproveitar o Browser Caching

“Expires headers” dizem ao navegador se um recurso em um site precisa ser solicitado ao servidor ou se ele pode ser obtido a partir do cache do browser. Quando você define uma “Expires headers” para um recurso, como por exemplo uma imagem em seu site, o navegador irá armazenar esses recursos em seu cache. A próxima vez que o visitante volta para essa página, caso o cabeçalho não tenha expirado e o recurso não tenha sido alterado, ela irá carregar mais rápido já que o navegador terá essa imagem disponível.

2. Enable gzip compression

Gzip é o método de compressão mais popular e eficaz atualmente disponívei e geralmente reduz o tamanho da resposta em cerca de 70%. Cerca de 90% do tráfego da Internet de hoje viaja através de navegadores que suportam gzip.

O gzipping reduz o tamanho da resposta HTTP e ajuda a reduzir o tempo de resposta. É uma maneira fácil de reduzir o tamanho da página.

3. Minificar o seu código

Remoção de comentários HTML, seções CDATA, espaços em branco e os elementos vazios irão diminuir o tamanho da página, reduzir a latência de rede e acelerar o tempo de carregamento.

4. Definir dimensões de imagem

Seu navegador começa a processar uma página antes que as imagens sejam carregadas. Se as dimensões não são especificadas, seu browser irá atrasar a renderização da página uma vez que as imagens ainda estão sendo transferidas. Para que isso não ocorra, utilize tags de altura e largura nos seus elementos de imagem.

5. Otimização de Imagens

As imagens, quando mal comprimidas, contém informações irrelevantes e cores que não são utilizadas. É essencial usar formatos com boas técnicas de compressão, como PNG e JPG, definir um valor de compressão adequado e não ter imagens em escalas maiores do necessárias.

Manter a imagem comprimida e seu tamanho mínimo é uma grande ajuda para os usuários em conexões lentas.

6. Usar CSS e Javascript externos

Ao usar repositórios externos (CDNs) para os arquivos fonte de frameworks e componentes mais comuns, é muito provável que o browser do usuário já os tenha visto em outras páginas e eles estejam em cache. Assim, não teriam de ser carregados novamente.

7. Reduzir acessos ao banco de dados

O pior tipo de load de um site é a espera por uma resposta do servidor à requisição da página, já que, enquanto isso ocorre, o usuário vê uma janela em branco carregando.

Para aumentar a capacidade do seu servidor de responder às requisições, é vital que ele consiga servir as páginas o mais rápido possível e, em geral, o maior atraso vem de acessos ao banco de dados.

Implementar camadas de cache entre a aplicação e o banco é uma medida essencial para se preparar para grandes volumes de tráfego e reduzir o tempo de carregamento.

E aí, gostou das dicas? Você já realizou alguma dessas otimizações em seu site? Conte pra gente nos comentários!