Como conseguir pontuação 100 no Google PageSpeed Insights

PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO

Você já acessou um site lento e acabou desistindo? Essa situação é muito comum de acontecer por causa da velocidade de conexão da internet e principalmente pela falta de otimização do site.

Se você tem um site, ele deve estar otimizado para ser carregado em todos os dispositivos e no menor tempo possível, com design adaptável e recursos de acessibilidade, assim você garante um público maior.

Neste post eu vou mostrar como você pode medir o desempenho do seu site com o Google PageSpeed e também o significado dos itens auditados, dessa forma você terá o entendimento do que fazer para conseguir a pontuação máxima.

Se preferir, acesse "Como conseguir pontuação 100 no Google PageSpeed Insights" no YouTube.

O Google PageSpeed Insights

O PageSpeed Insights do Google é uma ótima ferramenta pra medir o nível de otimização do seu site e também a velocidade de carregamento, simulando o acesso em celular e também no computador.

Ao acessar a ferramenta, que você pode encontrar também pesquisando na internet por "Google PageSpeed", basta entrar com o endereço do site e iniciar a auditoria.

A pontuação de velocidade é baseada nos dados de laboratório analisados pelo Lighthouse, ferramenta completa de auditoria de sites feita pelo Google.

O resultado será uma lista com todos os itens que foram reprovados e aprovados. Além disso, cada item conta com uma breve explicação de como corrigir, se necessário, e link para documentação completa.

Antes de analisar cada item auditado, a melhor dica que posso deixar para melhorar o desempenho do seu site é: faça o simples! Pense em como você pode atingir os objetivos do seu site, oferecendo a melhor experiência para seu usuário utilizando a menor quantidade possível de recursos.

Elimine recursos que impedem a renderização

O seu site deve mostrar algo para o usuário o mais rápido possível, então os recursos de CSS e JS que não são críticos, podem ser carregados depois, e os críticos podem ser colocados inline.

Defina um tamanho adequado para as imagens

O seu site deve ter imagens em tamanhos adequados, de acordo com o dispositivo do usuário. É possível usar o atributo srcset da tag img para definir um conjunto de imagens, para que o navegador decida a mais adequada.

Adie imagens fora da tela

Se seu site conta com muito scroll de tela, imagens que não aparecem no topo podem ficar ocultas e serem carregadas dinamicamente, conforme o usuário faz a rolagem da tela. Esse recurso se chama Lazy Load e pode ser feito com JavaScript.

Reduza o CSS

Os arquivos CSS do seu site, responsáveis pela formatação visual, podem ser "minificados", ou seja, ter o código otimizado para ocupar menos linhas e caracteres, diminuindo o payload de rede.

Reduza o JavaScript

Os arquivos JS do seu site, responsáveis pelo comportamento, podem ser "minificados", ou seja, ter o código otimizado para ocupar menos linhas e caracteres, diminuindo o payload de rede.

Adie CSS não utilizado

Seu site pode ter vários códigos CSS não utilizados ou com pouca importância, então considere eliminar essas instruções ou adiar o carregamento.

Codifique as imagens com eficiência

As imagens do seu site devem ser otimizadas, pois elas são responsáveis por boa parte do tempo do carregamento. Considere usar softwares de tratamento como Photoshop em conjunto com ferramenta online, APIs e serviços de CDN.

Imagens em formatos de última geração

Considere utilizar imagens de última geração no lugar das tradicionais JPEG e PNG. Os formatos JPEG 2000, JPEG XR e WebP podem reduzir drasticamente o tamanho das imagens.

Ative a compactação de texto

Compacte os arquivos do seu site, assim como faz com os arquivos do seu computador. Você pode fazer isso com gzip, deflate ou brotli através de configurações no servidor ou CDN.

Pré-conecte às origens necessárias

Se seu site conta com recursos em links de terceiros, como fontes, por exemplo, vale a pena fazer uma pré-conexão ou pré-carregamento, assim você pode definir os recursos mais importantes e antecipar comunicações. Para fazer isso, é necessário usar parâmetros como rel="preload" e rel="preconnect" junto com a tag link.

Evite redirecionamentos múltiplos de página

Considere não usar redirecionamentos no seu site, ou seja, os links devem apontar para as versões atuais das páginas. Quanto mais redirecionamentos, mais solicitações HTTP são feitas gerando um pior desempenho.

Pré-carregue as principais solicitações

Se seu site conta com diversos carregamentos dinâmicos de arquivos JS e CSS, você pode pré-carregar os mais importantes, eliminando assim a espera de processamento de recursos anteriores. Use o atributo rel="preload" nas chamadas dos arquivos.

Use formatos de vídeo para conteúdo animado

Evite os antigos GIFs animados! Use vídeos MPEG4/WebM para animações e PNG/WebP para imagens estáticas, assim você reduz a quantidade de bytes transferidos na rede.

Evita payloads de rede muito grandes

Evitar carregamento de bytes desnecessários ajuda a reduzir custos para os usuários e melhorar o tempo de download. Faça isso aplicando os itens anteriores, principalmente compactação, minificação e imagens otimizadas.

Cache eficiente em recursos estáticos

Considere definir um cache com ciclo de vida longo para arquivos estáticos, assim requisições ao servidor são poupadas, acelerando o carregamento do site. Faça isso com configurações no servidor ou através de CDNs.

Evita DOM de tamanho excessivo

O DOM é o modelo de objetos da página, ou seja, possui todas as tags HTML e ramificações. O ideal é trabalhar com no máximo 1500 nós, evitando uso excessivo de memória e cálculos mais longos.

Tempo de execução de JavaScript

Considere reduzir o tempo gasto com análise, compilação e execução de arquivos JavaScript. Faça a execução somente de códigos que o usuário precisa, além de "minificar", comprimir e colocar em cache os arquivos necessários.

Texto visível durante o carregamento da webfont

Use o recurso CSS de exibição de fonte para garantir que o texto possa ser visto pelo usuário enquanto as webfonts são carregadas. Basta usar font-display: swap; com o @font-face no seu código CSS.

Agora é com você! Faça o teste do seu site e revise item por item. Alguns podem dar muito trabalho para otimizar, mas é algo que vale a pena para seu site, buscas e principalmente para o usuário.