Cale o Google PageSpeed! Corrigir as mensagens de erro mais importantes

Tobias Schüring Última actualização em 21.10.2020
11 min.
Mensagens de PageSpeed Insights erro do Google
Última actualização em 21.10.2020

Google PageSpeed Insights é uma excelente ferramenta para ter uma visão rápida do potencial de otimização do seu site. Hoje vou mostrar-lhe como usar este potencial e aumentar a sua pontuação PageSpeed. Mas você não deve seguir de forma escrava os resultados do Google. Porque as mensagens de erro PageSpeed são nem sempre útil.

Há algum tempo atrás, o nosso colega Caspar Hübinger um de seus posts no blogdigamos, palavras muito claras para a sua Google PageSpeed Insights-resultado encontrado. E ele critica não só a ferramenta, mas também o uso da ferramenta pelos usuários. Porque se você não sabe como interpretar e corrigir as sugestões individuais de otimização, você pode rapidamente perder-se na caça sem sentido por uma classificação de 100. Mas isso seria insensato. Porque a elevada classificação utópica da Google PageSpeed é normalmente uma perda de tempo. Mais importante é a otimização do tempo de carregamento.

Hoje vou mostrar-lhe como interpretar as mensagens de erro mais importantes do Google PageSpeed Insights e como optimizar o seu site em conformidade.

Mas antes de vos mostrar como interpretar as mensagens de erro individuais e como corrigir os erros, gostaria de explicar como utilizar PageSpeed Insights correctamente o Google. Porque temos visto frequentemente que os utilizadores estão muito fixos na sua pontuação PageSpeed sem estarem atentos ao tempo de carregamento da sua página.

Se esta secção não lhe interessa, simplesmente ignorá-lo e aprender diretamente como corrigir a mensagem de erro "Compress CSS".

As mensagens de erro da Google PageSpeed nem sempre são correctas e importantes

Você nunca deve confiar apenas nos resultados ou nas mensagens de erro do GooglePageSpeed Insights . A ferramenta Google não mede o parâmetro mais importante da sua página: o tempo de carregamento da página. Para medir isto correctamente, recomendo webpagetest.org.

Somente se você ficar de olho no tempo de carregamento da página desde o início da otimização do seu site, você pode fazer afirmações significativas sobre o sucesso da otimização. Porque o objetivo de toda otimização deve ser sempre uma experiência melhorada para o usuário. No caso da otimização de desempenho, este é, naturalmente, o tempo de carregamento de página e o tempo de carregamento de página percebido.

AVISO!

Meça sempre primeiro o tempo de carregamento da página antes de optimizar o desempenho da sua página. Esta é a única forma de estimar o sucesso da otimização.

Do ponto de vista do usuário, um tempo de carregamento de página mais rápido e um tamanho de página menor são sempre uma vantagem. A paciência e a capacidade de atenção do utilizador médio está constantemente a diminuir (como este estudo da Microsoft mostra) - isto é particularmente crucial para o comércio electrónico - e cada vez mais visitantes chegam através de dispositivos móveis. Já em 2016 56% dos alemães usam a Internet regularmente através de smartphones ou tablets chamado. As velocidades de conexão e os volumes de dados nem sempre são ilimitados. Páginas finas e rápidas são, portanto, apropriadas.

O Google PageSpeed, no entanto, apenas dá dicas sobre o potencial de otimização do seu site e permite apenas algumas conclusões sobre a experiência do usuário. O baixo significado das mensagens de erro da Google PageSpeed é reforçado pelo facto de a ferramenta não poder ser imobilizada em determinadas áreas ou apenas a um custo adicional considerável.

Por exemplo, a referência ao cache do navegador sempre aparecerá quando os recursos externos - incluindo os próprios serviços do Google - forem integrados. Mas estes recursos não podem ser cobertos pelo cache do navegador do seu site. A mensagem de erro não tem relevância para a experiência do utilizador do seu site, mas é produzida pela lógica da própria ferramenta. No pior dos casos, a mensagem será interpretada como se não estivesse activo o cache do browser.

Portanto, não julgue principalmente pela classificação do Google, mas pelo tempo de carregamento. Isto é a única variável realmente importante.

Mas e o meu ranking do Google?

O exemplo do cache em falta do navegador deixa bem claro por que você não deve ficar inseguro com um resultado supostamente ruim na PageSpeed.

Por exemplo, se você tiver integrado o Google Maps ou o Google Analytics no seu site, eles causarão a seguinte mensagem de erro:

Mensagens de PageSpeed Insightserro típicas do Google: O cache de navegadores não é alegadamente utilizado correctamente

O mesmo se aplica a outros serviços de terceiros. Por exemplo, o nosso chat de suporte.

Então, sempre que PageSpeed Insights testamos o nosso site, este ponto é aclamado. Isso significa que sabemos que este factor distorce sempre os nossos resultados de forma negativa e, por isso, simplesmente ignoramo-lo.

Para o SEO do seu site isto significa: Também para o ranking no Google o tempo de carregamento e a experiência do utilizador são muito mais importantes do que a classificação concreta PageSpeed.

Porque se você otimizar o tempo de carregamento da sua página, você irá editar automaticamente muitas das áreas que são importantes para o Google. Portanto, uma melhoria no tempo de carregamento e na pontuação do Google PageSpeed estão relacionados de uma certa forma.

Mas na minha opinião não se deve perder na caça por uma nota de 100.

Mas agora os passos para a optimização!

Mensagem de erro 1: Comprimir CSS

Na nossa experiência, esta é uma das mensagens de erro mais assustadoras do Google PageSpeed Insights.

Cale o Google PageSpeed! Corrigir as mensagens de erro mais importantes

Significado: Esta mensagem de erro indica que os arquivos CSS do seu site ainda podem ser compactados (ou no caso acima, que isso já foi feito com sucesso). Tal compressão irá reduzir o número de caracteres nos documentos. Isto reduz o tamanho do ficheiro. Por exemplo, os comentários, espaços e formatação são eliminados.

Implementação: Mesmo que esta referência tenha um efeito dissuasor, a implementação é muito simples. Em princípio, há duas soluções possíveis para este caso: Se você mesmo está em CSS, você pode reduzir o número de arquivos CSS manualmente e criar um Forma abreviada usar. Você também pode usar os arquivos CSS através de ferramentas on-line, tais como compressor CSS ou Minificador CSS...reduzi-la à mão.

Cale o Google PageSpeed! Corrigir as mensagens de erro mais importantes

Claro que também existe a solução confortável utilizando a miniaturizaçãoPlugins CSS em WordPress . Alguns Plugins deles fazem uma embalagem completa e podem comprimir e otimizar não apenas CSS, mas também JavaScript e HTML.

Mais informações

Para uma explicação detalhada sobre as formas de reduzir em WordPress HTML, CSS e JavaScript, consulte neste artigo.

Com o HTTP/2 não faz necessariamente sentido combinar o CSS

As MinifesPlugins ... acabam de ser mencionadas são amplamente utilizadas. Porque são confortáveis e assumem a compressão e sumarização do CSS (e muito mais) totalmente automática. Até recentemente, a fusão dos ficheiros CSS também fazia muito sentido. Agora é diferente: desde que o padrão HTTP/2 Os navegadores são capazes de carregar vários arquivos simultaneamente a partir do servidor web.

Isso significa que os dados não precisam mais ser combinados, uma vez que o HTTP/2 permite que vários pacotes de dados sejam trocados simultaneamente. O HTTP/2 deve ter sido configurado pelo hoster, por exemplo, e só pode ser iniciado com Certificado SSL pode ser usado.

Portanto, antes de decidir por uma Plugin com várias dezenas de funções e opções de configuração, pense cuidadosamente se você precisa ou não dela. Especialmente se você mesmo acha que pode otimizar o CSS.

Porque um adicional Plugin pode atrasar o seu site em certas circunstâncias. Especialmente se as outras funções de todosPlugins os envolvidos não puderem desenvolver todo o seu potencial.

Mensagem de erro 2: Remover recursos que bloqueiam a renderização

Esta mensagem também faz suar muitos usuários, porque não é tão fácil de implementar e é também uma das eternas críticas do Google PageSpeed.

Cale o Google PageSpeed! Corrigir as mensagens de erro mais importantes

Significado: Uma página web é construída em uma determinada ordem. Esta ordem de carga pode ser otimizada. PageSpeed quase sempre reclama que os arquivos CSS bloqueiam esta ordem de carregamento ideal. Isto é verdade mesmo para páginas que já estão muito bem optimizadas (como mostra o caso Caspar Hübinger). No entanto, a nota pode ser muito valiosa para a otimização do tempo de carga. Basicamente, esta dica diz-lhe que o código JavaScript ou CSS que é importante para um elemento carregar - por exemplo, uma cor de fundo - ainda não está disponível no momento em que o elemento é carregado. Portanto, ele não será exibido até que o comando CSS correspondente seja carregado. Isso aumenta o tempo de carregamento da sua página, mas afeta principalmente a experiência do usuário, pois a página parece carregar por mais tempo.

Implementação: Uma solução comum é implementar uma regra de ouro: CSS no cabeçalho. Isto significa que você move o código CSS do corpo do documento HTML, o , para o início do documento, o , e o lá como .

Este exemplo deixa claro o que quero dizer. O trecho de código abaixo define nossa cor de fundo específica para o blog. O



Você pode implementar essa medida de otimização de duas maneiras: Você mesmo pode tocar no código e mover o código CSS para o cabeçalho, ou você pode deixar um Plugin fazer o trabalho. Mais uma vez, você pode usar Plugins o Melhor WordPress Minificar Continua.

Mensagens de erro PageSpeed Insights do Google - excerto do Plugin Melhor WordPress  Minimizar

O Minify-Plugin mostra nas opções, por exemplo, quais arquivos CSS já foram movidos para o cabeçalho. Você também poderia adicionar manualmente mais recursos CSS aqui.

Mensagens de PageSpeed Insights erro do Google - trecho do plugin de otimização Autoptimize

O Plugin Autoptimize, por outro lado, dá uma volta para melhor: Aqui você seleciona as opções para todos os arquivos CSS não excluídos do processo.

Os extractos das opções do Plugins espectáculo: A variante plugin não pode ser implementada sem uma compreensão básica do processo. Por isso também tens Plugins de aprender a usá-los.

Mensagem de erro 3: Codificação eficiente de imagens

Também neste ponto, há muitas reclamaçõesPageSpeed Insights . No entanto, este caso é quase sempre rápido e fácil de implementar e normalmente traz vantagens tangíveis em termos de tempo de carregamento.

Cale o Google PageSpeed! Corrigir as mensagens de erro mais importantes

Significado intencional: Muitos usuários subestimam o papel do tamanho da imagem para o tempo de carregamento da sua página. As fotos são muitas vezes um dos maiores freios no tempo de carregamento. Mesmo que apenas pequenas quantidades de dados sejam guardadas para imagens individuais, o volume total guardado pode somar uma quantidade considerável de dados.

Porque uma imagem raramente é apenas uma imagem. gera automaticamente WordPress várias miniaturas da imagem ao fazer o upload. Portanto, se você não usar os originais em sua página inicial, mas versões menores deles, ou seja, miniaturas ou Imagens em Destaqueentão estes também devem, claro, ser optimizados. A partir de uma imagem tão rapidamente vários arquivos, que também trazem uma carga múltipla de dados consigo mesmo.

Implementação: Basicamente, você tem duas possibilidades para otimizar suas imagens. Ou você otimiza as imagens antes do upload ou depois ou durante o upload. O primeiro pode ser feito através de ferramentas online ou offline, o segundo pode ser feito através de ferramentas correspondentes WordPress Plugins de otimização de imagem.

Se você puder integrar sensatamente a compressão ao seu fluxo de trabalho, faz sentido otimizar as imagens antes de carregá-las. Para este efeito, existem ferramentas online, como Octopus.io. Ou pode reduzir a qualidade e assim o tamanho do ficheiro das suas imagens offline, por exemplo directamente no Photoshop. Assim você poupa o trabalho extra Plugin e mantém o seu site esbelto.

A solução mais confortável é, obviamente, um Plugin. Complementos como Optimus ou Smush optimizar não só a imagem principal, mas também todas as variações da mesma. Smush também é capaz de otimizar todas as suas imagens existentes posteriormente.

Entre outras coisas, eles Plugins trabalham com o chamado "compressão sem perdas". Isto significa que embora o tamanho do ficheiro das imagens seja reduzido, a sua qualidade visível não diminui.

Mensagem de erro 4: Activar a compressão de texto

Esta mensagem de erro do Google PageSpeed pode ser corrigida muito rapidamente e pode reduzir significativamente o tempo de carregamento da sua página.

Cale o Google PageSpeed! Corrigir as mensagens de erro mais importantes

Significado intencional: Você já reduziu o tamanho das imagens e CSS do seu site na medida do possível. Isso é bom! Mas isto não é o fim da história. Porque agora você pode usar outro mecanismo de compressão. Provavelmente você conhece este processo através do download de grandes pacotes de dados: Estas estão normalmente em forma comprimida e zipada. Isto torna os dados menores durante o download e, portanto, o download mais rápido. No entanto, os pacotes de dados ainda têm de ser desempacotados após o download. Exactamente o mesmo acontece durante a construção da página: O servidor web entrega os pacotes de dados de forma comprimida, o servidor web desempacota-os. Isto torna a transferência de dados mais rápida e reduz o tempo de carregamento da página.

Implementação: Ou a compressão de dados já está definida no lado do servidor, ou você mesmo tem que ativá-la. Se você é um RAIDBOXES cliente, não tem que se preocupar com nada. Porque nós temos o particularmente forte Compactação Brotli ativo.

Com a seguinte entrada no seu .htaccess você também pode ativar a chamada compressão GZIP manualmente. Desde que você tenha um servidor web Apache.


 mod_gzip_on Sim
 mod_gzip_dechunk Sim
 mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_include mime ^text/.*
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_exclude mime ^image/.*
 mod_gzip_item_exclude rspheader ^Codificação do conteúdo:.*gzip.*
 
 
 
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType Aplicação DEFLATE/xml
 AddOutputFilterByType Aplicação DEFLATE/xhtml+xml
 AddOutputFilterByType Aplicação DEFLATE/rss+xml
 AddOutputFilterByType Aplicação DEFLATE/javascript
 AddOutputFilterByType Aplicação DEFLATE/x-javascript
 

Mensagem de erro 5: Fornecer conteúdo estático com uma política de cache eficiente 

Na minha opinião, a referência ao cache do navegador é de longe a mais irritante no Google PageSpeed Insights. Porque você só pode configurar o cache do navegador para seus próprios recursos. O cache do navegador não é possível para recursos externos.

Cale o Google PageSpeed! Corrigir as mensagens de erro mais importantes

Significado: O cache do navegador significa que o navegador armazena uma versão estática da sua página e não precisa solicitar ao servidor web uma visita repetida, mas a página já está carregada.

Implementação: Ou seu hoster já habilitou o cache do navegador no lado do servidor, ou você pode configurá-lo manipulando o arquivo .htaccess (lembre-se: esta configuração só funciona em servidores web Apache). O código de exemplo abaixo, por exemplo, define o cache do navegador para um mês, ou seja, a versão estática da sua página é armazenada no navegador do visitante durante um mês.


ExpiraActive On
ExpiraDefault "acesso 60 segundos
ExpiraPorType imagem/jpg "acesso mais 1 mês
ExpiraPorType imagem/jpeg "acesso mais 1 mês
ExpiraPorType imagem/gif "acesso mais 1 mês
ExpiraPorType imagem/png "acesso mais 1 mês
ExpiraPorType imagem/ico "acesso mais 1 mês
ExpiraPorType texto/css "acesso 1 mês
ExpiraPorTipo texto/javascript "acesso 1 mês
ExpiraPorType aplicação/javascript "acesso 1 mês
ExpiresByType aplicação/x-shockwave-flash "acesso 1 mês

Também aqui se aplica: Se você é um RAIDBOXES cliente, então o cache do navegador já está ativo por padrão.

Meus 2 Centavos: Sem cache tudo não é nada

Bem, agora você otimizou as imagens do seu site, reduziu o CSS, compactou e colocou-as na ordem certa e fez com que os navegadores dos seus visitantes guardassem a página em cache. Todas estas medidas encurtam o tempo de carregamento da página do seu site.

Significado intencional: Sem um cache adequado, porém, você está perdoando muito desse potencial. O cache é e continua a ser de longe o factor de desempenho mais importante. Uma cache armazena temporariamente o conteúdo da sua WordPress página e assegura que a página inteira não tem de ser recarregada sempre. Em vez disso, uma versão estática, já renderizada, da sua página é entregue a partir de uma cache. Isto ultrapassa especialmente o PHP lento e a base de dados.

Implementação: Mais uma vez, aplica-se o seguinte: Ou o seu anfitrião já tem cache do servidor ou pode usar um cachingPlugin. Aqui estão alguns muito poderosos Pluginsque armazenam grandes partes da sua página e levam a uma redução significativa no tempo de carregamento para os visitantes que regressam.

A alta potência do cachingPlugins é também a sua maior fraqueza. É bem possível que o cachePlugin abrande o seu site para visitantes de primeira viagem. Quanto mais complicado for o seu blogue ou site, mais complicado e extenso deve ser o motor de cache que esconde o seu blogue. Isto é especialmente relevante para as lojas.

Se você administra um site relativamente simples, soluções minimalistas podem muito bem ser melhores do que o cache de todos os servidores. Uma destas soluções finas Plugins é, por exemplo facilitador de cache.

Você deve observar que o cache também éPlugins normalmente usado para reduzir e fundir CSS ou JavaScript. Portanto, você deve verificar se o seu cachePlugin ainda não torna a otimização do Plugins CSS supérflua.

Se você usa o cache do lado do servidor, é recomendável desativar as funções de cache de Plugins, como Autoptimize, ou testar uma vez, se estas trouxerem alguma vantagem adicional de desempenho.

Conclusão: Mova-se Plugins muito com apenas alguns

Você já notou enquanto lia: Para a otimização do CSS, imagens e otimização da ordem de carregamento Pluginshá algumas que lhe poupam muito trabalho. Mas não todo o trabalho. O cachePlugins também produz rapidamente um efeito perceptível, mas às vezes é muito extenso e oferece muitas opções de configuração e funções parcialmente redundantes.

Não deixe de olhar com atenção para os que Pluginsusa. Somente se você souber o que acontece quando você usa certas funções, você pode otimizar de forma sensata. Sobrecarregar a página com otimizaçãoPlugins tende a trazer pouco.

E você deve se certificar de que mede seus sucessos corretamente quando você otimizar. Não importa se você otimiza à mão ou pela Plugin internet. Use PageSpeed Insights como primeiro ponto de orientação para identificar os pontos fracos do seu site. Depois, meça o tempo de carregamento do seu site antes da otimização. Só após a situação inicial ter sido registada é que faz realmente sentido optimizar o seu site passo a passo. Porque só então, se você souber o tempo de carregamento antes e depois de cada etapa de otimização, você pode determinar o que as medidas de otimização individuais alcançaram.

Como administrador do sistema, Tobias zela pela nossa infraestrutura e faz os ajustes necessários para otimizar o desempenho dos nossos servidores. Devido ao seu esforço incansável, ele pode ser frequentemente encontrado na Slack, a nossa "sala de chat da empresa".

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com * .