A otimização do Google PageSpeed é uma parte essencial da classificação de qualquer blog ou site nos resultados de pesquisa do Google. Aqui está o meu guia passo a passo para otimizar a velocidade da página do seu blog WordPress e alcançar um desempenho perfeito de 100 no Google PageSpeed Insights.
A velocidade de carregamento do seu site é uma parte importante experiência de um usuário em seu blog. É por isso que ter um site rápido é essencial para o sucesso se você quiser criar um blog.
O Google também classifica os sites com base em sua velocidade usando sua pontuação PageSpeed. Obter uma pontuação perfeita de 100 no teste PageSpeed do Google não é fácil. Mas estou aqui para te ajudar! Não importa se você tem um blog ou um site de comércio eletrônico, explicaremos passo a passo como aumentar sua pontuação no Google PageSpeed para 100.
Otimização do Google PageSpeed: como marcar 100 no PageSpeed Insights
Vamos primeiro revisar os fundamentos do Google PageSpeed e, em seguida, nos aprofundaremos na otimização da velocidade do seu blog.
O que é o Google PageSpeed?
A velocidade da página é o tempo que o conteúdo do seu site leva para chegar ao navegador do usuário.
Isso é muito importante porque os usuários que visitam seu site não querem ter que esperar pelo seu conteúdo. Você conhece o sentimento ou encontra uma resposta para sua pergunta no Google, clica em um link e acaba desistindo porque a página não carrega rapidamente.
O Google também sabe disso; é por isso que a velocidade do seu site é um importante fator de classificação. A ferramenta mais popular para testar a velocidade do seu site é o Google PageSpeed Insights . Esta é a melhor maneira de descobrir exatamente o que o Google pensa do seu site em termos de velocidade da página.
Métricas notáveis do Google PageSpeed:
- Maior pintura de conteúdo (LCP): medição da velocidade de carregamento da página percebida pelos usuários. Principalmente quando o conteúdo acima da dobra terminar de carregar.
- Primeiro Atraso de Entrada (FID) : medida em segundos do atraso até que um usuário possa interagir com o site.
- Mudança de layout cumulativa (CLS) : medidas em segundos até que o layout da página pare de "mudar". Por exemplo, carregar uma imagem pode causar alterações no layout do seu site. Isso é importante porque um usuário pode querer clicar em algo em seu site antes de terminar de carregar, o que pode levá-lo a clicar em outra coisa.
- Primeira exibição de conteúdo (FCP): Uma medida do tempo em que algo é renderizado na tela.
- Interação para a próxima pintura (INP): A interação com a próxima pintura observa a latência das interações do usuário com uma página. Por exemplo, se um usuário clicar em um acordeão e houver um atraso inesperado ao abri-lo.
- Tempo até o primeiro byte (TTFB): mede o tempo até que o navegador receba uma resposta do servidor.
Você verá esses termos usados com frequência no Google Search Console (relatório Core Web Vitals), PageSpeed Insights e Chrome User Experience Report.
Por que a velocidade da página é importante?
A velocidade da página é importante porque afetará diretamente a quantidade de tráfego et quanto dinheiro seu blog pode render .
Estudos (em inglês) mostraram que a velocidade do site afeta diretamente o taxa de conversão. Dados da Portent mostram que ter uma velocidade de carregamento de página de 1 segundo versus 5 segundos levará a uma queda de quase 50% nas conversões. O tempo de carregamento do seu site não apenas afetará sua classificação no Google, mas também afetará sua taxa de conversão.
Da sua posição nos resultados de pesquisa do Google à paciência do cliente, o tempo de carregamento da página do seu site afeta todos os aspectos da experiência do usuário. Como os usuários usam principalmente dispositivos móveis, cada kilobyte carregado pelo seu site deve ser intencional.
Quanto mais tempo um usuário tiver que sentar e esperar o carregamento de uma página, maior será sua taxa de rejeição. A velocidade do seu site não afeta apenas os SERPs do Google, mas a maioria dos mecanismos de pesquisa leva em consideração a velocidade da página. É por isso que ter um site de carregamento rápido é essencial na web de hoje.
Felizmente, construir um site rápido não é muito difícil se você usar ferramentas modernas e souber o que fazer.
Como testar a velocidade do seu site
Se você não estiver familiarizado com o Google PageSpeed, trata-se de uma série de testes que o Google executa em seu site para determinar a velocidade de carregamento do site. Quando um usuário no Google clica em um resultado de pesquisa, ele espera que ele carregue rapidamente. É por isso que o Google criou o teste Google PageSpeed Insights .
Abra o Google PageSpeed Insights
Isso fornece aos proprietários de sites as ferramentas para saber exatamente o que está deixando o site lento e como corrigi-lo. Além disso, fornece ao Google os dados necessários para classificar corretamente um site em seu algoritmo de mecanismo de pesquisa.
Usar a ferramenta é tão simples quanto inserir o URL do seu site e clicar Analisar. O teste será executado rapidamente e você receberá muitas medições importantes. Além disso, se você deseja executar um teste local, pode usar lCarro-chefe de código aberto do Google para produzir resultados semelhantes diretamente em seu navegador.
Outro lugar para ver o desempenho do site é usar o relatório de sincronização de página do Google Analytics.
Você provavelmente não precisará abordar tudo neste artigo, mas abordarei os problemas mais comuns do PageSpeed e como corrigi-los.
Práticas recomendadas de velocidade de página: problemas comuns de velocidade de página do Google e como corrigi-los
A maioria dos conselhos nesta seção assume que você tem um blog WordPress. Também incluí instruções mais detalhadas para os desenvolvedores solucionarem problemas manualmente.
De longe, a melhor maneira que encontrei para melhorar a velocidade de carregamento do seu site WordPress é usar Foguete WP . O WP-Rocket é um plug-in pago, mas vale a pena, pois aplica muitas das melhores práticas de desempenho imediatamente. Para corrigir a maioria dos problemas de velocidade da página, destacarei se o WP-Rocket pode ajudar e fornecer uma alternativa gratuita, se disponível.
Seu tema WordPress também desempenhará um papel importante nos elementos vitais da web.
Acelere o tempo de resposta do servidor
O tempo de resposta rápido do servidor é essencial para uma ótima pontuação do Google PageSpeed. Basicamente, o tempo de resposta do seu servidor é o tempo que leva para o servidor do seu site gerar a página da web. Esta é uma das coisas mais fáceis de corrigir se você vir este aviso em seu relatório PageSpeed.
A maneira mais comum de eliminar esse problema é usar o cache de página. Isso significa que seu site servirá a página da Web a partir do cache, portanto, o próprio servidor terá pouco ou nenhum trabalho.
- Habilitar cache de página: quando um usuário solicita uma página de seu site, ela deve ser renderizada e exibida. Esse processo pode ser ignorado completamente com o cache de página. Basicamente, quando um usuário visita uma página do seu site, ela é salva para o próximo usuário no cache para que possa ser retornada instantaneamente. Muitas empresas de hospedagem WordPress têm cache de página embutido, mas se você estiver vendo um tempo de resposta alto do servidor, provavelmente não está habilitado. Algumas das melhores soluções de cache de página do WordPress incluem: Foguete WP , W3 Total Cache et Enabler de cache.
- Use uma pilha moderna: as versões de PHP e MySQL usadas pelo seu host desempenham um papel importante na velocidade da página. As empresas de hospedagem na Web devem cobri-lo neste lado. Se você é um desenvolvedor, isso significa manter-se atualizado com a versão mais recente do PHP e soluções de banco de dados.
Permitir compressão
Seu site pode compactar seu conteúdo e tamanho de página antes de enviá-lo para o navegador do usuário com Brotli (mais recente, suportado pelo Chrome) ou compactação GZIP. Esses métodos de compactação não afetam a exibição do seu site, pois os navegadores dos usuários lidam automaticamente com o conteúdo compactado.
As empresas de hospedagem WordPress mais populares aplicarão automaticamente a compactação para você. Se você quiser confirmar que um método de compactação está habilitado em seu site, você pode usar um Teste de compressão GZIP online .
plug-ins do WordPress software de desempenho popular compactará automaticamente o GZIP para você, incluindo Foguete WP , WP Super Cache (deve ser ativado nas configurações) e W3 Total Cache (deve ser ativado nas configurações). O WP-Rocket aplicará automaticamente a compactação GZIP ao seu site se você estiver usando o Apache sem nenhuma configuração.
Para desenvolvedores: Para ativar a compactação Brotli ou GZIP em seu servidor, você precisa saber se está usando Apache ou Nginx. Em vez de gerenciar a configuração do servidor, recomendo que você opte por usar o CloudFlare. CloudFlare aplicará compactação GZIP e Brotli dependendo do que o navegador do usuário suporta e qual conteúdo é servido automaticamente.
Minimize CSS, HTML e JavaScript
HTML, CSS e JavaScript afetam a velocidade de carregamento da página. Ao escrever o código, a maioria dos desenvolvedores incluirá guias, espaços e outros códigos não essenciais para torná-lo legível por humanos. Todos esses caracteres não utilizados se somam e podem tornar seu site um pouco mais lento.
Felizmente, todos esses ativos podem ser facilmente minimizados sem afetar a experiência do usuário. Foguete WP oferece uma página de otimização de arquivo com opções de minificação para CSS e JavaScript. Além disso, se o cache de página estiver ativado no WP-Rocket, a minificação de HTML será aplicada às páginas. Uma opção gratuita é usar o plugin Autoptimize para minimizar CSS/JS/HTML.
Lembre-se de que, ao minificar o JavaScript, isso pode levar a problemas de funcionalidade, portanto, certifique-se de testar ao ativar.
Para desenvolvedores: muitas ferramentas de desenvolvimento permitem que os desenvolvedores comprimam seus arquivos durante o fluxo de trabalho. Pacotes Node.js como CSS limpo pode ser adicionado a um fluxo de trabalho para compactar arquivos minificados enquanto trabalha neles. Além disso, para projetos menores, existem muitas ferramentas online que comprimem o APF , JS e até o HTML . Se você estiver usando o WordPress, basta optar por usar um plug-in, pois eles fornecerão os mesmos resultados com muito menos esforço.
Reduzir CSS não utilizado
Remover CSS não utilizado pode ser complicado. As regras de CSS em sua página que não são usadas para estilo de página são consideradas CSS não utilizadas. A maioria das estruturas, temas e plug-ins deixará seu site com CSS não utilizado.
Por exemplo, seu tema WordPress pode conter estilo para uma página de contato, mas não é usado em todas as outras páginas do seu site, mas ainda existe na folha de estilo.
Felizmente, se você estiver usando o WordPress, existem alguns plugins que irão cortar automaticamente o CSS não utilizado. WP-Rocket e Perfmatters fará um ótimo trabalho removendo CSS não utilizado do seu blog. Esses plug-ins carregarão suas páginas e garantirão que elas tenham apenas o CSS necessário para exibir sua página corretamente, deixando você com um arquivo CSS menor.
Para desenvolvedores: para fazer esse processo manualmente, os desenvolvedores podem trabalhar remoção de folhas estilo de um site WordPress. Isso permitirá que você selecione manualmente o CSS que deseja adicionar à folha de estilo do seu tema. Existem também ferramentas online para encontrar css não utilizado em seu site, mas provavelmente não são bons para sites grandes.
Aproveite o cache do navegador
Quando os usuários visitam várias páginas em seu site, provavelmente estão usando os mesmos recursos. Muitas vezes, imagens, CSS e JavaScript são compartilhados em todo o site. É aqui que entra o cache do navegador, você pode dizer ao navegador de um usuário para salvar recursos para uso posterior. O máximo de WordPress plugins o desempenho habilitará as regras de cache do navegador.
Para desenvolvedores: Dependendo se você está usando Apache ou Ngnix, você pode adicionar uma configuração de servidor para instruir os navegadores do usuário a armazenar conteúdo específico em cache. Normalmente, esses métodos de cache do navegador são aplicados a CSS, JS e imagens.
Elimine recursos de bloqueio de renderização
Quando um navegador da Web lê o código do seu site, ele determina o que baixar e exibir. Os arquivos JavaScript e CSS da sua tag <head> são considerados recursos de bloqueio de renderização. Quando o navegador tenta retornar a página para um usuário, ele deve parar, baixar o arquivo e, em geral, atrasar a exibição da página.
Se o seu site tiver recursos de bloqueio de renderização, o Google PageSpeed Insights mostrará os maiores arquivos e as possíveis economias.
Felizmente, a maioria dos plug-ins de desempenho do WordPress ajudará você a adiar ou integrar JavaScript e CSS. o WordPress plugins também ajudará você a mover folhas de estilo não essenciais e JS para carregar na parte inferior da página. WP-Foguete, Autoptimize (grátis) e Perfmatters todos fazem um trabalho de eliminação de ativos de bloqueio de renderização.
Para desenvolvedores: os desenvolvedores podem aproveitar vários recursos do navegador para melhorar o carregamento de recursos. Isso inclui o uso do adiar atributo em scripts, movendo CSS/JS para o rodapé e incluindo apenas CSS crítico no cabeçalho.
Codifique imagens com eficiência
Os algoritmos de compactação de imagens têm resultados incríveis para compactar imagens sem perder a qualidade percebida.
Geralmente, as imagens JPG e PNG podem usar compactação adicional quando exportadas. Imagify, ShortPixel et Smush são todos excelentes WordPress plugins para compactar imagens automaticamente. Basicamente, esses plug-ins compactarão suas imagens à medida que você as carrega, o que acelerará a velocidade de carregamento da página. Você também pode selecionar o nível de compactação aplicado às imagens.
Como custa poder de processamento para compactar imagens, muitos desses plug-ins cobram por uma grande quantidade de imagens. O ShortPixel também oferece uma plug-in para compactar imagens na nuvem usando sua rede de entrega de conteúdo e API. Se o seu site já estiver usando CloudFlare, você pode se inscrever para o seu plano profissional para otimizar imagens em tempo real.
Para desenvolvedores: existem muitas ferramentas de otimização de imagem disponíveis, incluindo ferramentas online como image Compressor e aplicativos de desktop como Pichi. Você precisará compactar imagens em escala, então prefiro usar um CDN que comprima imagens automaticamente. meu favorito é o Plano CloudFlare Pro (US$ 20/mês), que compactará automaticamente e até mesmo imagens do servidor webp. Você também pode mudar para usar SVG para gráficos como o logotipo do seu site. Uma boa regra a observar é também usar arquivos JPEG para fotos reais e arquivos SVG/PNG para gráficos. Usar um arquivo PNG para uma foto resultará em um arquivo desnecessariamente grande.
Imagens com tamanho adequado
Um exemplo de imagens de tamanho incorreto é uma imagem grande de 2000 px por 2000 px em um div de 800 px de largura. Como apenas 800 pixels estão visíveis, o navegador deve ter carregado a imagem maior sem motivo. Isso leva a uma velocidade de carregamento de página mais lenta e uma experiência pior para os usuários. O máximo de Temas do WordPress os bem projetados não terão esse problema.
Para desenvolvedores: Se você estiver desenvolvendo um tema do WordPress, poderá definir tamanhos de imagem padrão do WordPress para corresponder adequadamente à largura do seu tema. Você precisará regenerar as miniaturas do WordPress depois de alterar os tamanhos das imagens. Lembre-se de que, se quiser transmitir imagens para uma tela Retina, você deve usar oatributo srcset. O WordPress também possui funções integradas para exibir imagens em uma tela de alta densidade de pixels.
Adiar imagens fora da tela
Quando um site é carregado, se ele contiver imagens, todas elas serão carregadas. É um desperdício de recursos e uso de rede, pois as imagens são visíveis. Felizmente, postar imagens fora da tela é mais fácil do que nunca, agora que todos os principais navegadores suportam o carregamento lento .
Por padrão, o WordPress aplicará o atributo loading="lazy" para imagens para adiar automaticamente o carregamento de imagens fora da tela para que você provavelmente não veja esse erro. O WP-Rocket também aplicará carregamento lento a imagens, iFrames e incorporações do YouTube. Você também pode usar o plug-in gratuito de carga lenta a3 para aplicar carregamento lento a elementos fora da tela. Se o seu site tiver muitos arquivos de imagem e gifs, esse é um aspecto importante para melhorar o carregamento da página.
Para desenvolvedores: a maneira mais fácil de adicionar carregamento lento a uma imagem é incluir o atributo loading="lazy" no farol <img>. Há também muitos bibliotecas JavaScript para carregar conteúdo preguiçoso.
Todo o texto permanece visível durante o carregamento de webfont
Quando as fontes da web foram introduzidas, era comum ocultar o texto antes que a fonte fosse carregada. Este é um grande não-não, pois os usuários desejam começar a ler seu site instantaneamente. O WP-Rocket otimizará automaticamente a exibição de fontes da web quando as otimizações de CSS estiverem habilitadas. a WordPress Plugin livre Trocar a exibição do Google Fonts também adicionará a configuração correta ao Google Fonts para o seu site WordPress.
Para desenvolvedores: provavelmente você está usando o Google Fonts, que é bastante simples para resolver esse problema. Tudo o que você precisa fazer é adicionar a string de consulta "&display=swap" ao seu URL de fonte do Google; mais detalhes do Google .
Evite redirecionamentos de várias páginas
Se o seu site tiver muitos redirecionamentos, eles aumentarão lentamente a velocidade de carregamento da página. Por exemplo, se sua página inicial redirecionar para /home.html, isso causará um atraso na resposta de seus usuários. Você pode ver esse erro se tiver arquivos CSS ou JS que também levam a um redirecionamento.
Outro exemplo é se um URL no menu de navegação do cabeçalho for para um URL que redireciona. É provável que seu site não seja sinalizado por isso se você estiver usando o WordPress.
Perguntas frequentes sobre otimização e estatísticas do Google PageSpeed
Aqui estão as perguntas mais frequentes sobre o Google PageSpeed. Se faltar alguma coisa, pergunte nos comentários no final deste artigo.
O que é o teste Google PageSpeed?
O teste de visualização do Google PageSpeed é usado para determinar o desempenho de um site. Os resultados de um teste fornecem uma pontuação de PageSpeed de 100.
O que é uma pontuação do Google PageSpeed?
Uma pontuação do Google PageSpeed é um teste executado pelo Google projetado para analisar o desempenho de um site. 100 é uma pontuação perfeita, enquanto 90 é considerado bom. Enquanto uma pontuação entre 50 e 90 precisa melhorar e uma pontuação abaixo de 50 é ruim.
A velocidade da página afeta o SEO?
Sim. A pontuação do Google PageSpeed Insights desempenha um fator importante no SEO. O Google usa a velocidade da página como um fator chave na classificação de um site.
Como posso melhorar minha pontuação no Google PageSpeed?
Espero que este artigo tenha ajudado a melhorar sua pontuação no Google PageSpeed. O básico inclui a remoção de recursos de bloqueio de renderização, remoção de CSS não utilizado, otimização de imagens e diminuição do tempo para o primeiro byte.
Considerações finais sobre a otimização do Google PageSpeed para o seu blog
Espero que essas dicas para acertar na otimização do Google PageSpeed ajudem a melhorar o desempenho do seu blog e levem ao aumento do tráfego orgânico ao longo do tempo. À medida que a web evolui e as ferramentas se tornam mais fáceis de usar, ficará cada vez mais fácil acelerar os sites do WordPress.
Existem inúmeras coisas que você pode fazer para melhorar a pontuação do Google PageSpeed, mas eu recomendo fazer um teste de aprovação.
A aprovação no teste (pontuação acima de 90) desempenhará um papel importante na classificação do seu conteúdo nas primeiras posições dos resultados de pesquisa orgânica do Google. Lembre-se, porém, de que obter uma pontuação perfeita de 100 pode se tornar uma tarefa interminável à medida que os padrões da Web mudam; portanto, esforce-se para permanecer dentro dessa faixa de 90+ e você ficará bem.
