Como chegar a 100 no Google PageSpeed ​​Insights (no WordPress)

Não seria ótimo se houvesse uma ferramenta para ajudá-lo a tornar seu site mais rápido? Bem, existe! Google PageSpeed ​​Insights é o nome, e é um serviço gratuito disponível para resolver os problemas de lentidão do seu site. Neste artigo, veremos o que é, como funciona e como você pode alcançar a pontuação indescritível do Google PageSpeed ​​Insights 100/100 no WordPress.

O que é o Google PageSpeed ​​Insights?

O Google PageSpeed ​​Insights é uma ferramenta online para medir a velocidade e a experiência do usuário em seu site. Ele mede o tempo de carregamento de um site no computador e no celular e exibe várias métricas sobre o desempenho de um site. Se as métricas forem consideradas abaixo do ideal, a ferramenta dará sugestões sobre como melhorá-las.

Basta acessar o Google PageSpeed ​​Insights, inserir uma URL e clicar em Analisar. O Google julga seu site tanto no celular quanto no computador. Você pode achar que pontua melhor em um do que no outro.

O Google costumava dar uma pontuação geral de 100 para uma página da web, mas não dá mais.

Em vez disso, o Google mede três estatísticas que chama de Core Web Vitals . Estes são:

• Largest Contentful Paint (LCP) : quão rápido o conteúdo principal do site é carregado. Isso deve ser de 2,5 segundos ou menos para uma boa experiência do usuário.
• First Input Delay (FID) : quão responsivo o site é à entrada do usuário. O FID deve ser de 100 milissegundos ou menos.
• Deslocamento cumulativo de layout (CLS) : mede a estabilidade visual de uma página da web. Uma pontuação CLS de 0,1 ou menos é preferível.

Além disso, o Google avalia o seguinte:

• First Contentful Paint (FCP) : o tempo que leva para a página da web começar a renderizar na tela. Uma boa pontuação FCP é de 1,8 segundos ou menos.
• Interação para a próxima pintura (INP) : mede a capacidade de resposta da página às interações do usuário. Um site realmente responsivo tem um INP de 200 milissegundos ou menos.
• Time to First Byte (TTFB) : o tempo necessário para que o primeiro byte de dados seja enviado após uma solicitação do servidor. Um TTFB de 0,8 segundos ou menos é o ideal.

Abaixo disso, na seção Diagnosticar problemas de desempenho, o Google PageSpeed ​​Insights fornece quatro pontuações – Desempenho, Acessibilidade, Práticas recomendadas e SEO. 90 ou mais é uma boa pontuação, 50 a 89 indica que melhorias podem ser feitas e qualquer coisa abaixo de 50 é ruim.

Abaixo disso estão as oportunidades e diagnósticos do Google. Estas são maneiras pelas quais você pode melhorar indiretamente sua pontuação de desempenho. A métrica de desempenho tem mais influência na velocidade do seu site.

Antes de entrarmos em como melhorar o desempenho do seu site, vamos dar uma olhada em por que a velocidade do site é importante.

Por que a velocidade do site é importante?

A velocidade do site tem um grande impacto no comportamento do usuário e do consumidor.

O tempo médio necessário para carregar totalmente uma página de destino móvel é de 22 segundos [1] .

A probabilidade de rejeição aumenta 32% à medida que o tempo de carregamento da página passa de 1 segundo para 3 segundos [2] .

53% das visitas são abandonadas se um site mobile demorar mais de 3 segundos para carregar [3] .

Obviamente, se você administra um site de comércio eletrônico, um site lento resulta em conversões reduzidas, e isso é algo que você deve abordar. A taxa de conversão cai com o tempo de carregamento de um site [4] :

• As páginas carregadas em 2,4 segundos tiveram uma taxa de conversão de 1,9%
• Em 3,3 segundos, a taxa de conversão foi de 1,5%
• Em 4,2 segundos, a taxa de conversão foi inferior a 1%
• Com mais de 5,7 segundos, a taxa de conversão foi de 0,6%

Alta pontuação do PageSpeed ​​Insights em comparação com a velocidade real da página

O Google calcula a pontuação do PageSpeed ​​Insights a partir de dados de laboratório (coletados sob condições controladas) e dados de campo (coletados de usuários reais em estado selvagem).

Para testar a velocidade real da página, você pode usar ferramentas online como o teste de velocidade GTmetrix ou Pingdom.

Usando essas ferramentas, você pode testar seu site em diferentes locais.

Você pode ver no GTmetrix que o tempo de carregamento da página para um servidor de teste em San Antonio, Texas é de 666 ms – uma pontuação muito boa.

Em Hong Kong, o tempo de carregamento da página é um pouco maior – 1,4s.

O Pingdom também mostra um tempo de carregamento rápido de 850ms para um teste em Washington DC, mas um tempo de carregamento mais lento de 1,06s em Tóquio, Japão.

A ferramenta Uptrends permite testar em dispositivos móveis e computadores. Aqui está o resultado para o site WP Shout de Paris, França no iPad Air – um tempo de carregamento de 1,9s:

Portanto, parece haver uma correlação entre a pontuação do Google PageSpeed ​​Insights e a velocidade real da página.

Como obter a pontuação ideal do Google PageSpeed ​​Insights 100 no WordPress

Agora que você sabe por que uma pontuação alta do Google PageSpeed ​​Insights é importante, é hora de procurar maneiras de melhorá-la.

As maneiras de melhorar a pontuação do Google PageSpeed ​​Insights

1. Otimize as imagens

Otimizar suas imagens para a Web é uma maneira fácil de melhorar sua pontuação de desempenho.

Você precisará de um plug-in de compactação de imagem, como o Optimole.

Este plug-in pode compactar suas imagens para um tamanho de arquivo menor, para que sejam carregadas mais rapidamente. Você pode usá-los para todos os novos uploads de imagens, bem como para os existentes. O que é ótimo no Optimole é que ele também entregará suas imagens por meio de um CDN, tornando a entrega ainda mais rápida.

Ele também pode converter suas imagens para o formato WebP, que tem um tamanho menor que arquivos JPG ou PNG. Isso ajudará você a passar a recomendação de imagens de veiculação em formatos de última geração . Além disso, você pode redimensionar quaisquer imagens maiores definindo uma largura máxima para elas.

Certifique-se de que suas imagens tenham os atributos de largura e altura especificados para satisfazer a oportunidade Os elementos de imagem não têm largura e altura explícitas .

O plug-in Optimole também inclui carregamento lento, que carrega apenas imagens ou vídeos quando um usuário rola para baixo até eles. Isso ajuda com a oportunidade Adiar imagens fora da tela , mostrada abaixo.

Outro método para reduzir o tamanho do arquivo de imagem é usar imagens SVG. Os SVGs são arquivos vetoriais para que possam ser facilmente redimensionados sem afetar o tamanho do arquivo. Eles não são suportados nativamente no WordPress, mas você pode adicioná-los à sua biblioteca de mídia com um plug-in como SVG Support ou Safe SVG.

2. Evite um tamanho excessivo de DOM

O que é o DOM? DOM significa Document Object Model e é uma estrutura semelhante a uma árvore com todos os elementos HTML, atributos e texto da página incluídos.

Algumas estratégias para diminuir o tamanho do DOM são dividir longas páginas da Web em seções menores e evitar ocultar os nós DOM com a declaração {display:none;} em CSS.

Um fator que pode aumentar o tamanho do DOM é usar um construtor de páginas. Os construtores de páginas tendem a aumentar o número de elementos <div> em uma página.

Se você usa Elementor, desde a versão 3.0 alguns wrappers HTML foram removidos, o que diminuiu o tamanho do DOM.

Ou você pode passar a usar o Gutenberg em vez de um construtor de páginas, como Chris Lema fez.

Você pode encontrar mais dicas sobre como evitar um tamanho excessivo de DOM neste post.

3. Otimize JavaScript e CSS

Arquivos CSS e JS podem ser minificados e compactados para melhorar o desempenho. A minificação remove todos os espaços de um arquivo CSS ou JS, enquanto a compactação GZIP remove caracteres repetidos como {.

Os plug-ins do WordPress que permitem reduzir CSS ou JS incluem Autoptimize (gratuito) e WP Rocket (pago).

A minificação pode quebrar seu site, portanto, os plug-ins que minificam têm uma opção de exclusão de arquivos da minificação se você tiver um problema.

O WP Rocket também tem a opção de combinar seus arquivos CSS e JS em um único arquivo, reduzindo as requisições. No entanto, você não desejará fazer isso se o seu servidor da Web usar HTTP/2. Você pode testar se o seu servidor executa HTTP/2 para verificar primeiro.

Você pode ativar a compactação GZIP com a maioria dos plugins de cache. Se seu servidor web for Apache ou LiteSpeed, o plug-in pode gravar em seu arquivo .htaccess diretamente ou fornecer linhas para copiar e colar nele. Se você usa NGINX ou IIS, o Hummingbird também fornece a configuração para habilitar a compactação nesses servidores.

Se houver algum CSS ou JS em seu site que não seja usado, é hora de removê-lo. Você pode usar o Chrome DevTools para encontrar CSS e JS não utilizados, que provavelmente vêm de um plug-in.

Você também pode usar o CSS Saver do Rapidload para ver qual CSS você pode perder do seu site:

4. Elimine recursos de bloqueio de renderização

CSS e JS de bloqueio de renderização são arquivos sinalizados como bloqueando a primeira pintura da sua página da web.

O plug-in Autoptimize pode solucionar esse problema e, como resultado, melhorar suas pontuações de primeira pintura de conteúdo e maior pontuação de pintura de conteúdo.

5. Reduza o tempo de resposta inicial do servidor

O tempo de resposta do servidor depende de alguns fatores: o tema e os plug-ins que você usa e o tipo de hospedagem na web que você possui.

Considere remover todos os plug-ins em excesso que você não usa ou mudar para um tema leve, como o Astra.

Para hospedagem, recomendamos a hospedagem gerenciada do WordPress em vez da hospedagem compartilhada. Os hosts gerenciados do WordPress incluem a otimização do servidor como parte do serviço.

6. Certifique-se de que o texto permaneça visível durante o carregamento da fonte da webCertifique-se de que o texto permaneça visível durante o carregamento da fonte da web

Se você usar fontes da web, a recomendação do Google impedirá que o texto de suas páginas fique invisível durante o carregamento.

A recomendação sugere adicionar exibição de fonte: swap; à sua declaração @font-face em sua folha de estilo.

A captura de tela abaixo mostra como adicionar essa propriedade usando o plug-in Asset CleanUp.

7. Mantenha as contagens de solicitações baixas e os tamanhos de transferência pequenos

O Google PageSpeed ​​Insights registra o número de arquivos solicitados pelo servidor da Web e o tamanho desses arquivos.

Se você tiver grandes números aqui, poderá reduzi-los:

• Otimizando suas imagens e arquivos de mídia. É recomendável usar arquivos de vídeo no lugar de GIFs animados.
• Otimizando seu CSS e JS
• Otimizando suas fontes e scripts de terceiros
• Reduzindo o tamanho do arquivo HTML

8. Evite encadear solicitações críticas

Solicitações críticas são solicitações essenciais para carregar a página. Por exemplo, um logotipo pode ser uma solicitação crítica.

Cadeias longas e cadeias contendo grandes downloads são consideradas ruins para a velocidade do seu site. Eles afetam a primeira exibição de conteúdo e a maior exibição de conteúdo.

De acordo com o Google, para evitar o encadeamento de solicitações críticas, você deve:

• Minimize o número de recursos críticos: elimine-os, adie seu download, marque-os como assíncronos e assim por diante.
• Otimize o número de bytes críticos para reduzir o tempo de download (número de viagens de ida e volta).
• Otimize a ordem em que os recursos críticos restantes são carregados: baixe todos os ativos críticos o mais cedo possível para reduzir o comprimento do caminho crítico.

Você pode fazer isso por:

• Pré-carregar solicitações de chave, imagens e fontes usando “link rel=”pré-carregar” no HTML que as referencia.
• Minimizando seu CSS e JavaScript.
• Elimine os recursos de bloqueio de renderização.

Você pode usar um plugin como o WP Rocket para executar essas tarefas para você.

9. Evite tarefas longas do thread principal e minimize o trabalho do thread principal

Tarefas de encadeamento principal longas são tarefas JavaScript (mais de 50ms) que atrasam o Tempo até a Interatividade do usuário.

Minimizar o trabalho do thread principal significa diminuir o tempo de análise, compilação e execução do JS.

Você pode reduzir a duração e o tempo das tarefas JavaScript ao:

• minimizando o uso de plugins inchados
• hospedando suas fontes e scripts analíticos localmente
• minificar ou adiar JS e CSS
• imagens de fundo de carregamento lento

Consulte o artigo a seguir para obter mais dicas sobre como minimizar o trabalho do thread principal no WordPress.

10. Evite grandes mudanças de layoutEvite grandes mudanças de layout

Mudanças de layout contribuem para a métrica Mudança cumulativa de layout e dão a impressão aos usuários de salto de página.

Você pode curar este problema por:

• Adicionando dimensões à sua mídia
• Pré-carregando suas fontes
• Otimizando seu conteúdo dinâmico, por exemplo, formulários de inscrição em newsletters

Para obter mais informações, leia este guia sobre como corrigir a mudança cumulativa de layout no WordPress.

11. Reduza o impacto do código de terceiros

Os scripts de terceiros são aqueles hospedados em outro lugar, como rastreamento do Google Analytics ou incorporações do YouTube.

Sempre que possível, tente hospedar scripts localmente. Você não pode fazer isso com o YouTube, mas pode hospedar seu código analítico e fontes localmente.

Você pode usar o plug-in Local Google Fonts para hospedar Google Fonts em seu próprio servidor.

O plug-in Local Google Analytics for WordPress – caches de solicitações externas hospedará seu Google Analytics localmente.

12. Use um CDN

Uma rede de distribuição de conteúdo é uma rede remota de servidores que armazenam e fornecem conteúdo da Web aos usuários.

Um CDN pode melhorar a velocidade do seu site armazenando em cache arquivos estáticos (por exemplo, HTML, CSS e JavaScript) e exibindo-os de um local próximo a um usuário. Isso ajuda a reduzir suas pontuações de primeira pintura de conteúdo e maior pontuação de pintura de conteúdo.

Usamos o Cloudflare CDN no WP Shout. Você pode começar a usá-lo gratuitamente.

Saiba mais sobre por que você deve usar um CDN e as melhores opções.

Conclusão sobre como chegar à pontuação 100 do Google PageSpeed ​​Insights

Vimos que existem alguns fatores em jogo que determinam a velocidade do site. Essas dicas irão ajudá-lo a alcançar uma pontuação perfeita.

Você não deve ficar muito preocupado em marcar 100, no entanto - uma pontuação de 90+ ainda é muito boa. Leia a postagem de David sobre como otimizar o desempenho do site para ver o que fizemos para melhorar nossas pontuações.