Aqui na Kinsta trabalhamos com muitas agências e freelancers que lidam com clientes diariamente. Não é incomum para os clientes ou até mesmo um CEO de uma empresa pedir a sua agência ou desenvolvedor do WordPress para aumentar sua pontuação do Google PageSpeed Insights. O Google faz um bom trabalho ao divulgar essa ferramenta para os consumidores e muitas vezes, eles nem sempre entendem que uma pontuação perfeita não é o fim do mundo. Isto pode definitivamente ser frustrante às vezes. Porém, hoje queremos compartilhar com vocês algumas dicas e estratégias que podem ajudá-lo a pontuar 100/100 no Google PageSpeed Insights com seu site WordPress.

Qual a importância do Google PageSpeed Insights?

Google PageSpeed Insights é uma ferramenta de desempenho da internet, criado pelo Google para ajudar você a identificar facilmente maneiras de deixar seu site mais rápido e mais otimizado para dispositivos móveis, seguindo recomendações nas melhores práticas da internet. Uma coisa muito importante é lembrar que você não deve ficar constantemente obcecado pela pontuação 100/100. Talvez nem seja possível em todos os cenários, dependendo de como seu site WordPress esteja configurado. Com uma variedade de temas e sites com dezenas de scripts externos, você simplesmente vai ter uma quantidade impossível de tempo tentando alcançar uma pontuação perfeita. E isto é perfeitamente normal.

Recomendamos verificar a velocidade do seu site mais do que as pontuações. As ferramentas de pontuações como Pingdom, GTMetrix e Google PageSpeed Insights podem algumas vezes levá-lo à loucura. Especialmente quando alguns deles nem sequer suportam HTTP/2. O que realmente importa é garantir que seu site carregue rápido e que o desempenho percebido também esteja no mesmo nível.

O Google usa o PageSpeed Insights quando se trata de SEO e a velocidade da página é um fator de classificação ou apenas a velocidade de resposta é que conta? Isso foi uma questão interessante trazida de um SEO durante o FDP Group Leeds e discutido no Search Engine Roundtable. Gary Illyes, Webmaster e Analista de Tendências da Google, respondeu dizendo “Eu vou com ambos.”

Isto é parcialmente devido ao fato que na maioria dos casos quando você tem um site lento é mais provável que você vai ter muitos avisos no Google PageSpeed Insights. Muitas recomendações andam lado a lado com o que diz respeito ao seu tempo de resposta. Eles nem sempre se correlacionam 100%, mas o que Gary está provavelmente dizendo é que se você tem um site lento, sim, isto provavelmente afetará sua classificação.

Pontuar 100/100 em Hospedagem Compartilhada com Kinsta

Achamos que seria divertido explorar o novo Tema Twenty Seventeen no WordPress 4.7. Este é o primeiro tema padrão do WordPress que é focado nos negócios em vez de um blog típico, o que é empolgante! Então, hoje vamos mostrar a vocês como pontuar esse perfeito 100/100 tanto no Desktop quanto no Celular. Instalamos ferramentas comuns e serviços que muitos sites WordPress usam, como o Google Analytiscs, Akismet, Yoast SEO, etc. Fizemos testes em baixo orçamento com hospedagem compartilhada com Kinsta, para mostrar a você quanta diferença pode haver quando se compara o Google Cloud hosting com um hospedagem compartilhada.

Apesar de este ser um site pequeno, é uma boa fundação para pelo menos entender um pouco sobre como o Google PageSpeed Insights funciona. Se você está interessado em ver algumas otimizações em um maior tema polivalente, verifique nosso post sobre como otimizar o tema Total WordPress.

100 pontuação no Google PageSpeed Insights

100 pontuação no Google PageSpeed Insights

100/100 no Google PageSpeed Insights com Hospedagem Compartilhada

Em nosso primeiro site de teste, temos o WordPress 4.7 com o Tema Twenty Seventeen rodando em uma  hospedagem compartilhada de baixo orçamento (Apache). O SSL foi configurado e os plugins a seguir foram instalados:

  • Yoast SEO
  • Akismet

Também temos o Google Analytics rodando dentro da tag <body> do nosso arquivo header.php. A única modificação que fizemos foi acrescentar uma imagem em destaque para o post fictício “Olá mundo!” do blog. Executamos o teste do site através do Google PageSpeed Insights e logo de início, tivemos uma pontução 69/100 no Desktop e um 58/100 de pontuação no celular. Então definitivamente temos algumas melhorias que precisam ser feitas aqui. Vamos falar detalhadamente sobre cada uma delas e como podemos corrigi-las.

Pontuação de hospedagem compartilhada no Google PageSpeed Insights

Pontuação de hospedagem compartilhada no Google PageSpeed Insights

Ativar Compressão

Vamos começar primeiro com o Desktop, pois muitas das correções também serão válidas para o celular. A primeira recomendação do Google PageSpeed Insights que precisamos para corrigir é a adivertência de Ativar Compressão.

Ativar aviso de compressão

Ativar aviso de compressão

De acordo com o Google, para corrigir isto, precisamos ativar a compressão do Gzip. Infelizmente, o compartilhamento da hospedagem não tem isto ativado automaticamente em seus servidores, então temos que fazer isso manualmente.

Todos os navegadores modernos suportam e “negociam” automaticamente a compressão Gzip para todas as solicitações HTTP. Ativar a compressão do Gzip  pode reduzir o tamanho da resposta da transferência em até 90%, o que pode reduzir significamente a quantidade de tempo para baixar os recursos do site, reduzir o uso de dados para os clientes, e melhorar o tempo para carregar primeiro a sua página.

Existem muitas maneiras para você fazer isto. O primeiro e uma das mais fáceis é usar um plugin de cache que tenha suporte a Gzip. O WP Rocket por exemplo acrescenta as regras da compressão Gzip em seu arquivo .htacces automaticamente usando o módulo mod_deflate. O W3 Total Cache também tem uma maneira para permitir a você fazer isto abaixo da sua seção de desempenho.

A segunda maneira de ativar a compressão Gzip é editando seu arquivo .htaccess. Muitas hospedagem compartilhadas usam Apache, em que você pode simplesmente acrescentar o código abaixo para o seu arquivo .htaccess. Você pode encontrar seu arquivo .htacces no diretório raiz do seu site WordPress via FTP.

  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent

Certifique-se que você o adicione abaixo do conteúdo atual do seu arquivo htaccess. Veja o exemplo abaixo:

Adicionar código de compactação GZIP

Adicionar código de compactação GZIP

Se você estiver executando no NGINX, simplesmente acrescente isto para seu arquivo nginx.conf

36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

Uma ferramenta como Check Gzip Compression pode na verdade mostrar a você como os meus bytes economizados permitindo a compressão do Gzip. Aqui está um exemplo abaixo do que salvamos em nosso site de teste.

Economia de compactação GZIP

Economia de compactação GZIP

Se executamos nosso site através do Google PageSpeed Insights novamente podemos ver que a advertência da compressão do Gzip se foi e nossa pontuação no Desktop aumentou de 69/100 para 80/100 e nossa pontuação do celular de 58/100 para 67/100.

PageSpeed Insights depois da compressão do GZIP

PageSpeed Insights depois da compressão do GZIP

Otimizar Imagens

A próxima recomendação do Google PageSpeed Insights que precisamos corrigir é a advertência das imagens Otimizadas. Nosso post padrão “Olá mundo!” tem uma imagem em destaque que está causando este erro.

Otimizar imagens de advertência

Otimizar imagens de advertência

Esta é uma advertência muito importante e útil. De acordo com a HTTP Archive, em Novembro de 2016 as imagens representavam em média 65% do peso total de uma página. Otimizar suas imagens podem ser uma das maneiras mais fáceis de ver as melhorias de desempenho com seu site WordPress.

Existem muitas maneiras de consertar isso. O primeiro é usando um plugin de otimização de imagens. Um plugin pode na verdade passar a otimizar a maior parte da sua biblioteca de mídia do Wordpres e também otimizar automaticamente quando carregar uma imagem. Na verdade temos um guia complete sobre como otimizar suas imagens do WordPress. Segue abaixo uma lista de alguns plugins populares de otimização de imagens:

Estes plugins corrigirão os problemas. Você também pode comprimi-las antes de carregá-las em uma ferramenta como o Adobe Photoshop, Gimp, ou Affinity Photo. Abaixo está a imagem em destaque que está gerando o aviso. Podemos comprimi-la antecipadamente, tanto reduzindo suas dimensões quanto diminuindo a qualidade. É melhor manter suas imagens tão pequenas quanto possível. Esta imagem era originalmente 2.32 MB, após o redimensionamento e compressão, tem 99.38kB. Lembre-se é melhor carregar as imagens em uma escala e não confiar no CSS para redimensioná-las. Isso deixa seu site mais lento.

Comprimir imagens com Affinity Photo

Comprimir imagens com Affinity Photo

Se executamos nosso site através do Google PageSpeed Insights novamente podemos ver que o aviso de Otimização de Imagens agora se foi e a pontuação do Desktop aumentou de 80/100 para 88/100 e nossa pontuação no celular de 67/100 para 73/100. Estamos fazendo progresso!

PageSpeed Insights após a compactação de imagem

PageSpeed Insights após a compactação de imagem

Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda

O próximo Google PageSpeed Insights recomenda que precisamos corrigir é  Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda. Na verdade temos um post completo com detalhes sobre o problema do bloqueio de renderização do JavaScript e CSS.

Elimine a advertência do bloqueio de renderização do Javascript e CSS

Elimine a advertência do bloqueio de renderização do Javascript e CSS

Quando um browser carrega uma página, recursos do JavaScript e CSS normalmente evitam que a página seja exibida até que elas sejam baixadas e processadas no navegador. Alguns recursos precisam ser baixados e processados antes de mostrar alguma coisa. Porém, muitos recursos do CSS e JavaScript são condicionais, isto é, apenas aplicados em casos específicos – ou simplesmente não são necessários ao conteúdo da primeira página. Para produzir a experiência mais rápida possível para seus usuários, você deve tentar eliminar qualquer recurso do bloqueio de renderização que não são necessários para visualizar o conteúdo acima da dobra.

Com relação ao Bloqueio de renderização do Javascript, o Google tem três recomendações:

  1. Se você não tem muito JavaScript, você consegue finalizá-la e assim se livrar desta advertência. Você consegue eliminar o JavaScript com um plugin como o Autoptimize. Porém, isto é válido apenas para sites pequenos. A maioria dos sites WordPress tem bastante JavaScript e isto pode na verdade reduzir a velocidade do seu site.
  2. O segundo é carregar seu JavaScript assincronamente. O AsyncJavascript essencialmente baixa o arquivo durante o processamento do HTML e pausará o processador do HTML para executá-lo quando ele terminar de baixar.
  3. O terceiro é adiar seu JavaScript. O atributo de atraso também baixa os arquivos durante o a análise HTML, mas ele apenas o executa depois que o a análise tiver sido concluída. Além disso, os roteiros com estes atributos são executados por ordem de exibição da página. Leia mais sobre as diferenças entre async e defer.

Em nosso exemplo, vamos fazer nosso JavaScript carregar de maneira assíncrona. Para fazer isso vamos usar um plugin gratuito chamado Async JavaScript. Você pode baixá-lo no site do WordPress ou pesquisar dentro do seu painel do WordPress sob “Plugins > Adicionar Novo”. Na data da publicação deste artigo, ele tem atualmente mais de 9 mil instalações ativas com uma classificação média de 4,2 estrelas numa escala até 5. Basicamente o plugin acrescenta os atributos “async” ou “defer” para todos os JavaScript baixado das funções do WordPress wp_enqueue_script. O desenvolvedor também tem uma versão premium disponível que permite que você escolha os scripts que você quer para o async ou defer.

Exemplo de Async

<script src="file1.js" async></script>

Exemplo de Defer

<script src="file1.js" defer></script>

Após a instalação simplesmente vá em configurações e ativar o Async JavaScript.

async javascript

Async JavaScript

E para sites maiores a exclusão do script pode ser útil. Ou então obtenha versão premium do plugin. Não precisamos disto neste exemplo, mas se você tem um site com muito JavaScript, provavelmente você terá problemas se você simplesmente reparar tudo no Async ou Defer. Nesse caso, você precisará diagnosticar quais você pode.

async exclusions

Async exclusions

Se você não quer usar um plugin para isto, existem algumas outras alternativas, como adicionar o seguinte código ao seu arquivo functions.php.

/*function to add async to all scripts*/
function js_async_attr($tag){
 # Add async to all remaining scripts
 return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Aqui estão duas postagens adicionais que explicam como adicionar ao async ou defer sem um plugin:

Executamos nosso site através do Google PageSpeed Insights novamente e como podem ver o Bloqueio de Renderização do JavaScript agora foi corrigido e ficamos com o aviso de entrega do Optimize CSS delivery.

Aviso do Optimize CSS delivery

Aviso do Optimize CSS delivery

Você pode ver que o primeiro CSS que precisamos para otimizar é o nosso Google Fonts (fonts.googleapis.com). O CSS é por padrão o bloqueio de renderização , o que inclui o CSS vindo de web fonts. Para corrigir isto, vamos instalar o plugin gratuito Disable Google Fonts. O autor do plugin, Milan Dinić, acabou de atualizá-lo para incluir o a nova fonte Libre Franklin, do tema Twenty Seventeen. Após instalar o plugin, seu Google Fonts obviamente irá quebrar. Então você vai querer ir para o Google Fonts e pegar o código embutido manualmente. Selecionamos os mesmos pesos de fontes que são por padrão incluídos no tema Twenty Seventeen.

Libre+Franklin:300,300i,400,400i,600,600i,800,800i" rel="stylesheet">
Google Fonts incorporado

Google Fonts incorporado

Então você precisará acrescentar ao seu arquivo footer.php, bem antes da tag </body>. Observação: ao fazer isso desta maneira resultará em FOUT, que é o que eles se referem como flash de texto sem estilo. Mas ele também vai acabar com o problema do bloqueio de renderização. Você deve decidir em seu próprio site se FOUT é uma experiência de usuário aceitável para os seus visitantes. Você também pode usar o Google’s Web Fonte Loader.

Google Fonte no rodapé do WordPress

Google Fonte no rodapé do WordPress

Executamos nosso teste do site através do Google PageSpeed Insights novamente e agora sobre a advertência do Optimize CSS Delivery, estamos apenas deixando com uma coisa, que é o arquivo style.css.

Advertência de strings de pesquisa do Optimize CSS Delivery

Advertência de strings de pesquisa do Optimize CSS Delivery

Uma das maneiras mais fáceis de corrigir isto é usar um plugin WordPress chamado Autoptimize, desenvolvido por Frank Goossens.

autoptimize plugin

Autoptimize WordPress plugin

Este plugin é bastante leve, pesa apenas 176 KB para ser exato. Na data da publicação deste artigo, ele tem mais de 400 mil instalações ativas com uma avaliação media de 4,5 estrelas numa escala até 5. O plugin ajuda você com o encadeamento de seus scripts, minificação, cabeçalhos expirados e habilidade de mudar os estilos do seu cabeçario e scripts para seu rodapé. Este plugin é totalmente compatível com o plugin do AsyncJavaScript que foi usado mais cedo.

Depois de instalar o plugin, clique nas configuração e selecione “Optimize CSS Code.” Então, clique na próxima aba e também ative “Aggregate inline CSS” e “Inline All CSS.” Observação: dependendo do qual tema você está fazendo isso, talvez não seja recomendado usar este método. Para sites grandes, o inline pode ser ruim. Neste caso, seria melhor na verdade simplesmente ignorar a advertência particular do Google PageSpeed Insights. E se lembre que com o HTTPS/2, o encadeamento pode algumas vezes atrasar seu site.

optimize css code

Optimize CSS code

Também recomendamos que permita otimizar a opção do código HTML

Código de Otimização HTML

Código de Otimização HTML

Se executarmos nosso site através do Google PageSpeed Insights novamente, podemos ver que o aviso Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo de advertência da primeira página agora se foi! Ele também corrigiu a advertência do Minify CSS que foi ainda inferior e ainda não tinha conseguido. Aumentamos a pontuação do Desktop de 88/100 para 92/100 e nossa pontuação para celular de 73/100 para 89/100. Estamos quase lá.

PageSpeed Insights depois da otimização com JS e CSS

PageSpeed Insights depois da otimização com JS e CSS

Aproveitar cache do navegador

A próxima recomendação do Google PageSpeed Insights que precisamos corrigir é a advertência aproveitar cache do navegador. Na verdade temos um post inteiro aprofundado do problema Aproveitar cache do navegador, pois ele pertence ao WordPress.

Advertência aproveitar cache do navegador

Advertência aproveitar cache do navegador

O motivo mais comum de Aproveitar cache do navegador foi desencadeado e o seu servidor da web não tem os cabeçalhos adequados no lugar. Na imagem acima você pode ver que todos os scripts internos têm uma expiração e não uma advertência específica. Quando se trata de memorização são dois métodos primários que são usados, Cabeçalhos de controle de cache e cabeçalhos de expiração. Enquanto o cabeçalho do Controle de Cache gira em torno da memorização do cliente e define a duração máxima de um recurso, o cabeçalho de expiração é usado para especificar um ponto específico no tempo do recurso deixando de ser válido.

Você não precisa necessariamente adicionar os dois cabeçalhos, pois isso é um pouco redundante. Cache-Control é mais recente e geralmente o método recomendado, no entanto, algumas ferramentas de desempenho da Web, como GTmetrix  que verifica os cabeçalhos expirados. Estes são todos exemplos, você pode alterar os tipos de arquivo, expirar vezes, etc, com base em suas necessidades. Aqui estão algumas opções abaixo. Vamos simplesmente adicionar cabeçalhos de expiração no Apache em nosso host compartilhado para este tutorial.

Obtenha o próximo artigo em sua caixa de entrada

Você pode acrescentar cabeçalhos do Controle de Cache em Nginx para acrescentar a sequência dos seus servidores de localização ou bloqueio.

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control "public, no-transform";
}

Acrescentando Cabeçalhos Expirados no Nginx

Você pode acrescentar cabeçalhos expirados em Nginx, acrescentando a sequência do seu servidor de bloqueio. Neste exemplo, você pode ver como especificar diferentes tempos expirados baseados nos tipos de arquivos.

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

location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}

Acrescentando Cabeçalhos de Controle de Cache em Apache

Você pode adicionar cabeçalhos Cache-Control no Apache adicionando o seguinte ao seu arquivo .htaccess.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"

Acrescentando Cabeçalhos Expirados em Apache

Você pode acrescentar cabeçalhos expirados em Apache, acrescentando a sequência do seu arquivo .htaccess

## EXPIRES HEADER CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

## EXPIRES HEADER CACHING ##

Lembra que habilitamos a compressão Gzip mais cedo? Abaixo, está nosso arquivo .htaccess que mostra como se parce depois de acrescentarmos também os cabeçalhos de expiração. Simplesmente colocamos abaixo o bloco de compressão.

Código dos cabeçalhos de expiração

Código dos cabeçalhos de expiração

Executamos nosso site de teste através do Google PageSpeed Insights novamente e agora abaixo da advertência do Aproveitar cache do navegador, só sobrou uma coisa, que é o nosso script do Google Analytics. Isto é meio irônico, pois é o script do próprio Google. O problema é que eles estabeleceram uma baixa de 2 horas de tempo de cache sobre seus ativos, como visto na imagem abaixo. Eles provavelmente farão se por algum motivo eles tiverem que modificar algo no final. Eles querem todos os usuários façam as alterações o mais rápido possível. Porém, existe uma maneira de conseguir isto, que é hospedando os scripts do Google Analytics localmente. Por favor, esteja ciente de que isto não é suportado pelo Google.

Aproveite o cache do navegador com o Google Analytics

Aproveite o cache do navegador com o Google Analytics

Existe um ótimo plugin pequeno chamado de Complete Analytics Optimization Suite, criado e desenvolvido por Daan van den Bergh, que permite você hospedar localmente o Google Analytics em seu site WordPress.

complete analytics optimization suite

CAOS WordPress plugin

Você pode baixar o Complete Analytics Optimization Suite no site do WordPress ou procurando por ele no comando “Adicionar Novo” na guia plugins em seu painel WordPress. Na data da escrita deste artigo, este plugin tem mais de 10 mil instalações ativas com uma classificação 5 de 5 estrelas. O plugin permite que você hospede seu arquivo do Google Analytics JavaScript (anallytics.js) localmente e o mantenha atualizado usando o wp_cron(). Outros recursos incluem a possibilidade de anonimizar facilmente o endereço IP dos seus visitantes, estabeleça um ajustamento de taxa de rejeição e colocação do script (cabeçalho ou rodapé).

Apenas instale o plugin, entre com seu Google Analytics Tracking ID e o plugin acrescentando o código de rastreamento necessários para o Google Analytics para seu site WordPress, baixados e salvos do arquivo analytics.js para seu servidos e mantendo atualizado usando um script agendado em wp_cron(). Recomendamos também configurá-lo para carregar no rodapé. Nota: Este plugin não funcionará com outros plugins de Google Analytics no WordPress.

local google analytics

Local Google Analytics

Se executarmos nosso site através do Google PageSpeed Insights novamente, podemos ver que a advertência do Aproveitar cache do navegador agora se foi! E aumentamos nossa pontuação do desktop de 92/100 para 97/100 e nossa pontuação no celular de 89/100 para 96/100. Tão perto que quase consigo saborear.

PageSpeed Insights após corrigir o cache do navegador

PageSpeed Insights após corrigir o cache do navegador

Reduzir o tempo de resposta do servidor

A próxima recomendação do Google PageSpeed Insights que precisamos resolver é a advertência em Reduzir o tempo de resposta do servidor. Muitas vezes, isso acontece quando alguém está num orçamento baixo num plano de hospedagem compartilhada. O servidor não é rápido e o Google sabe disso. Então, para reparar isso, precisamos implementar alguns tipos de memorização para acelerar as coisas. Existem muitas memorizações dos plugins aqui. Em nosso exemplo, vamos usar a versão grátis dos plugins Cache Enabler da equipe do KeyCDN.

Cache Enabler WordPress plugin

Cache Enabler WordPress plugin

Na data da publicação deste artigo, o Cache Enabler tem mais de 30 mil instalações ativas com uma classificação media de 4,6 estrelas numa escala que vai até 5 estrelas. É um plugin de memorização leve que torna seu site mais rápido ao gerar interferência de arquivos plus de HTML e suporte WebP. Não existem configurações para habilitar, simplesmente instale e pronto. Este plugin é totalmente compatível com o Async JavScript e Autoptimize plugins que usamos mais cedo. Se você quer ainda mais velocidade, recomendamos também acrescentar o advanced snippet para passar o PHP.

Se executarmos nosso site através do Google PageSpeed Insights novamente, podemos ver que a mensagem de Redução do tempo do servidor também se foi! E aumentamos nossa pontuação no Desktop de 97/100 para 99/100 e nossa pontuação no celular de 96/100 para 99/100. Estamos prestes a cruzar a linha de chegada.

PageSpeed Insights após corrigir o tempo de resposta

PageSpeed Insights após corrigir o tempo de resposta

Normalmente você não verá a mensagem de “reduza o tempo de resposta do servidor” na Kinsta. Mas é importante salientar que existem dezenas de fatores potenciais que podem diminuir a resposta do seu servidor. Isso inclui respostas lentas na base de dados dos plugins, estruturas, bibliotecas, fonte de inanição da CPU ou memória de inanição. Utilizamos o New Relic para ajudar os clientes a melhor determinar de onde isto pode estar se originando.

Compactar JavaScript

A última recomendação do Google PageSpeed que precisamos para corrigir a advertência é o Compactar JavaScript.

Advertência do Compactar JavaScript

Advertência do Compactar JavaScript

Para corrigir isso, na verdade vamos voltar para as ferramentas do plugin Autoptimize e simplesmente ativar a opção Optimize JavaScript Code. Já que agora você tem um plugin de cache sendo executado, você pode precisar também limpar seu cache, depois fazer isso para ver os resultados.

Optimize JavaScript codigo

Optimize JavaScript codigo

E isso é tudo! Agora temos com êxito o tema do WordPress Twenty Seventeen no celular e desktop em uma hospedagem compartilhada de baixo orçamento.

100/100 pontuação no Google PageSpeed Insights

100/100 pontuação no Google PageSpeed Insights

Aqui estão as pontuações do celular. Não tivemos que acrescentar nada no celular. Ao fazer a versão Desktop chegar a 100/100, automaticamente aumentamos a versão para celular a pontuação de experiência do usuário para 100/100.

Pontuação no celular de 100/100 Google PageSpeed Insights

Pontuação no celular de 100/100 Google PageSpeed Insights

Também temos um antes e depois com os testes de velocidade do Pingdom.

Teste de Velocidade Antes das otimizações do PageSpeed Insights

Aqui está um teste de velocidade do Pingdom antes de qualquer otimizações feitas em um host compartilhado.

Teste de velocidade antes das otimizações no PageSpeed

Teste de velocidade antes das otimizações no PageSpeed

Teste de Velocidade depois das otimizações do PageSpeed Insights

Aqui está um teste de velocidade do Pingdom depois das otimizações feitas em um host compartilhado.

Teste de velocidade após as otimizaçãoes do PageSpeed

Teste de velocidade após as otimizaçãoes do PageSpeed

100/100 no Google PageSpeed Insights com Kinsta

Nosso segundo site de teste foi configurado exatamente da mesma maneira como o primeiro. É simplesmente um domínio diferente.  Temos o WordPress 4.7 com  o Tema Twenty Seventeen executando em nossos servidores Kinsta (NGINX). O SSL está configurado e os plugins seguintes foram instalados:

  • Yoast SEO
  • Akismet

Temos o Google Analytics dentro do <body> do nosso arquivo header.php. A única modificação que temos feito é que adicionamos uma imagem em destaque de padrão no lugar do tradicional post “Olá mundo!”. Executamos nosso teste no site através do Google PageSpeed Insights e logo de início, tivemos uma pontuação 73/100 no desktop e uma pontuação 63/100 no celular. É importante notar que comparado com o compartilhamento de hospedagem de teste do site acima, já existem muitas advertências que são fixadas de início, como:

  • Ativar a compactação (Kinsta já tem o Gzip ativado em todos os servidores, não precisa ativar)
  • Reduzir o tempo de resposta do servidor (Kinsta já está intensamente rápido, já vem dentro dos parâmetros aceitos pelo Google sem nenhuma otimização)
  • Cabeçalhos expirados (Não precisa ativar porque Kinsta tem cabeçalhos de caches ativados a nível dos servidores)
PageSpeed Insights com gereciamento de hospedagem do WordPress

PageSpeed Insights com gereciamento de hospedagem do WordPress

Em Kinsta você vai querer seguir apenas algumas das mesmas recomendações de antes:

Precisamos de menos que metade do tempo para levarmos nossos sites da Kinsta até a pontuação de 100/100, porque simplesmente existiam menos etapas para começar.

100/100 PageSpeed Insights com Kinsta

100/100 PageSpeed Insights com Kinsta

Aqui está a pontuação no celular.

100/100 PageSpeed Insights no celular com Kinsta

100/100 PageSpeed Insights no celular com Kinsta

Também temos um antes e depois com testes de velocidade do Pingdom.

Teste de Velocidade Depois das Otimizações do PageSpeed Insights

Aqui está um teste de velocidade do Pingdom antes de qualquer otimização ter sido feita no Kinsta. Observe que o site não otimizado no Kinsta estava mais de 200 ms mais rápido do que o compartilhamento de hospedagem otimizado!

Teste de velocidade antes das otimizações do PageSpeed

Teste de velocidade antes das otimizações do PageSpeed

Teste de Velocidade Depois das Otimizações do PageSpeed Insights

Aqui está um teste de velocidade de Pingdom depois das otimizações foram feitas na Kinsta.

Teste de velocoidade depois das otimizações do PageSpeed

Teste de velocoidade depois das otimizações do PageSpeed

Melhorias Complementares no PageSpeed

Estamos simplesmente otimizando para o Google PageSpeed Insights neste tutorial. Na verdade, poderíamos ter reduzido ainda mais o nosso tempo de carregamento se nos também tivéssemos feito o seguinte:

E, claro, temos muitas ótimas dicas adicionais em nosso guia para principiantes sobre otimização de velocidade de sites.

Resumo

O ponto deste tutorial foi explicar melhor e compreender o que as advertências do Google PageSpeed Insights significam e o que você pode fazer para corrigi-las. Assim que você entendê-las melhor, você pode ir aplicando algumas destas estratégias para seus sites maiores. Claro que, com sites maiores você provalmente nunca vai pontuar chegar ao perfeito 100/100, o que é perfeitamente normal! Ou se você fizer, vai ter algum trabalho. Simplesmente recomendamos a implementação do que você pode e você verá muito provavelmente melhorias rápidas. Lembre-se que a velocidade do nosso site, assim como a percepção da melhoria é o que realmente importa. Não fique muito obcecado com as pontuações.

É também importante notar as diferenças acima quando se fala em hospedagem compartilhada e o ambiente WordPress aperfeiçoado da Kinsta. Somos mais rápidos desde o início do que muitas hospedagens compartilhadas depois da otimização. Você deve perguntar a si mesmo: quanto vale o seu tempo? Se você quer simplesmente ser rápido desde o início, o ambiente de gerenciamento de hospedagem da Kinsta pode fazer isso por você.

Na próxima vez que um cliente pedir a você para melhorar suas pontuações, você agora tem algumas dicas atualizadas em como fazer isso. E se esquecemos de algo importante, fale pra gente nos comentários abaixo. Fiquem ligados em mais estudos de caso com o Google PageSpeed Insights que nós faremos no futuro.

1.9K
Shares