Como alcançar uma boa pontuação no PageSpeed?

Um site rápido é pré requisito para qualquer tipo de negócio. Se você tem interesse de converter clientes ou possui estratégias de SEO ativas, é necessário otimizar a velocidade do site com urgência.

Os usuários não esperam mais que 3 minutos para o completo carregamento de uma página, se esse visitante está utilizando um dispositivo móvel, esse dado é ainda menor.

Existem algumas opções de ferramentas de consulta de pagespeed, mas a mais utilizada é o PageSpeed Insights.

Ele te entrega dados de como está o desempenho das suas páginas e ainda te entrega recomendações para aplicar e melhorar seu desempenho.

Como posso alcançar uma boa pontuação no PSI?

Ficar acima de 90 pontos no PSI não é tarefa simples ou rápida. Existe muito esforço e dedicação para conseguir chegar neste resultado satisfatório.

Conseguir 100 pontos no PSI é praticamente impossível! Mas se manter acima dos 90 é fundamental.

Apesar de todo o esforço, ter um PageSpeed satisfatório é muito importante para qualquer negócio. Se você quer crescer no mercado, você precisa ter uma presença digital relevante.

Por isso, separei os principais itens para manter o seu site voando e sempre acima dos 90 pontos no PageSpeed Insights.

Codigo interno

O código interno (ou HTML) pode ser um grande vilão para o desempenho do PageSpeed. A forma que o código foi estruturado determina como os servidores vão ler as informações e em quanto tempo elas aparecerão na tela.

Código duplicado ou tags usadas fora de propósito atrapalham e podem reduzir muito o desempenho do site ou aplicações em geral. Procure manter o seu código limpo, evitando requisições desnecessárias ao servidor.

Se o seu site for WordPress, fique muito atento aos temas escolhidos. Eles precisam ser bem avaliados e escolha o que se encaixa melhor para o desempenho.

Além disso, os plugins podem ser seus maiores vilões, plugins desnecessários ou pesados causam muita lentidão.

Cache

Um dos principais elementos que causam alteração no desempenho é a quantidade de recursos que o navegador precisa assimilar de uma página.

A cada novo visitante que seu site recebe, uma nova requisição é solicitada no servidor e no banco de dados. Ou seja, a cada nova visita o navegador solicita para o servidor todas as informações, arquivos e dados daquela página para poder entregar ao visitante.

Mas você consegue reduzir essas requisições habilitando o cache nos seus sites. Assim, todos os arquivos estáticos (as imagens, CSS, HTML, JavaScript, etc) ficam salvos na memória do servidor, facilitando o pré-carregamento e aumentando o PagaSpeed.

Se o seu site for WordPress, o cache pode ser bem mais simples de configurar. Plugins como o Total Cache são muito eficientes,

Habilitando cache do Apache

Para habilitar o cache do Apache, basta adicionar no .htaccess, esse código:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 day"
ExpiresByType image/jpg "access plus 5 days"
ExpiresByType image/jpeg "access plus 5 days"
ExpiresByType image/gif "access plus 5 days"
ExpiresByType image/png "access plus 5 days"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
</IfModule>

Habilitando cache no Nginx

Para habilitar no Nginx, abra o arquivo nginx.conf e use o código a baixo:

location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}

A linha “expires 365d;” define o tempo que o navegador vai manter aqueles arquivos. Neste caso, 365 dias

A linha “location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {“ determina o tipo de arquivo que será feito o cache. Basicamente, todos os arquivos jpg, jpeg, png etc.. que o site requisitar, vão ficar 365 dias no computador do usuário até serem excluídos.

Redimensionamento de imagem

Outro elemento que tem grande peso no desempenho de um site é o carregamento de imagens.

Com um mundo cada vez mais visual, a gente precisa apelar para imagens incríveis em nossos sites para conseguir atrair a atenção dos clientes.

O grande problema é que essas imagens são muito pesadas e consomem bastante do seu tempo de carregamento, o que faz da compressão uma das recomendações mais recorrentes do PageSpeed Insights.

A forma ideal de comprimir uma imagem é utilizando softwares específicos, como o Photoshop. Dessa forma, você evita utilizar plugins no seu site. Portanto, já peça a imagem compactada e do tamanho correto para o seu designer.

Mas se você preferir, existem dezenas de plugins no mercado que fazem isso automaticamente. Um bom exemplo é o WP Smush:

Minificação de Arquivos

A compressão , ou minificação, de arquivos HTML, CSS e JavaScript vão na mesma lógica que a de imagens.

Minificando esses arquivos, você evita espaços em branco nos códigos e comentários desnecessários.

Assim, o seu código estará otimizado, fazendo o seu desempenho melhorar significativamente, e a sua nota geral no PSI.

AMP

O Accelerated mobile pages é uma ferramenta do Google que permite uma experiência mobile mais básica para o usuário. Ele exclui as coisas que funcionam melhor, em um site, nas versões para desktop.

Eles são frequentemente destacados nos primeiros resultados de pesquisa do Google e os conteúdos dos links são carregados instantaneamente

Sim, é muita coisa. Mas vale a pena

Como você pode perceber, é muito importante o desempenho positivo de qualquer página na web.

Mas em contrapartida, ter um site atrativo para o usuário é pesado. Por isso, a relevância do PageSpeed Insights, ele te mostra o caminho das pedras para conseguir melhorar a velocidade de qualquer página.

Vale lembrar que um site rápido não é necessariamente sinônimo de um site simples ou pequeno.

Bom, seguindo essas orientações, com certeza a nota do seu site ficará classificada como “verde” :D

Ufa! É muita coisa para administrar em um site para que isso aconteça, né? Seria um sonho se tudo isso fosse feito automaticamente com um clique…