Com mais de 59% dos sites usando o WordPress como CMS, otimizá-los para carregar rapidamente é uma boa ideia. Vamos lhe mostrar os principais passos e como otimizar um site WordPress usando Google PageSpeed.

Neste artigo, estarei utilizando um projeto americano, então as telas estarão em inglês, mas de fácil identificação.

Ouvimos muito sobre o PageSpeed ​​do Google, e não há dúvidas de que é uma métrica importante do ponto de vista da usabilidade e do SEO. Agora com mais de 59,3% da Web usando WordPress e o Google dedicando uma equipe de engenharia para trabalhar com o WordPress , ele merece atenção especial.

Antes de mergulharmos, é importante esclarecer que em nosso artigo de hoje, vamos nos concentrar no PageSpeed , e não na velocidade da página.

Para quem não conhece a diferença, o PageSpeed ​​é uma métrica do Google. Ele se baseia em uma família de ferramentas e, quando nos referimos a um número de Velocidade de Página entre 0 e 100, estamos nos referindo a ferramenta PageSpeed ​​Insights .

PageSpeed Insights Tool

A velocidade da página, por outro lado, geralmente se refere à velocidade real de uma página da web. E sim, é possível aumentar um sem o outro, e até vi casos em que melhorar um é à custa do outro.

Em suma, vamos nos concentrar na métrica do Google neste artigo no que se refere aos sites em WordPress.

Métricas

Embora eu esteja aproveitando minhas experiências com PageSpeed ​​ou na velocidade da página, minhas experiências são tiradas de um cenário que eu nunca vi ou estava envolvido antes. Eu vou executar este pequeno experimento enquanto escrevo este artigo para que eu possa fornecer capturas de tela e números.

Vale a pena notar que, enquanto escrevo isso, não sei onde terminaremos em relação aos números finais. Estamos torcendo por 80+ para atingir o nível “Bom”, mas isso nem sempre é possível. Eu considero qualquer coisa acima de 70 como sendo razoável, pois dá um pouco de espaço de manobra para cair com o tempo e ficar acima do limite de 60, onde nós caímos na nota “Baixa”.

Eu não posso dar o URL específico neste exercício, e você não verá os números iniciais no momento em que você ler isso, mas eu quero enfatizar novamente que eu nunca vi esse cenário específico ou algo assim tão baixo antes.

Aqui está como começaremos:

Inicio PageSpeed

As pontuações para começar então são:

  • Mobile (Celulares): 57/100
  • Desktop (Computadores): 0/100

E sim, verifiquei várias vezes ao longo de vários dias; o relatório continua a mostrar uma pontuação de 0 para a computadores! Não é bom. Seu objetivo é obter uma pontuação tão alta quanto possível, com uma pontuação de 80 como o ponto de partida para uma página ser classificada como “Boa”.

Também veremos o tempo que a página demorou para carregar ou a velocidade da página, por assim dizer. Incluirei esses números abaixo das métricas de melhoria também.

É importante notar que cada ferramenta mede de forma diferente. Vou basear meus números no dotcom-tools.com, mas o gtmetrix.com funciona da mesma forma.

A razão pela qual eu uso o Dotcom é que ele testa de vários locais ao redor do mundo, e o número que estou dando é a média.

Etapa #1 : HTTPS

O primeiro passo mata dois pássaros com uma pedra só. O site possui um certificado seguro fornecido e instalado pelo registrador. Eles fizeram um bom trabalho, exceto que o HTTP não redireciona para HTTPS automaticamente, e o Google tem a versão HTTP armazenada em cache.

O primeiro passo é fazer com que o site seja totalmente alternado para HTTPS . Em nosso caso, a configuração do site simplesmente não foi alterada para HTTPS nas Configurações gerais.

Mudar o endereço para HTTPS criou o redirecionamento 301 e as configurações saltaram imediatamente para:

  • Mobile: 61/100
  • Desktop: 0/100

Antes de começarmos, tínhamos uma velocidade de página de 10,1 segundos. Para dar uma ideia do que eu estava me referindo acima sobre vários locais em todo o mundo, na localidade de Denver, carregou em 3,5 segundos, sendo a mais rápida. Depois de mudar para HTTPS, a velocidade da página subiu para 9,4 segundos.

Se o site não redirecionar automaticamente, há o plug-in chamado HTTPS Force para realizar o trabalho. Ou você pode, se estiver confortável com isso, adicionar o seguinte trecho ao seu arquivo .htaccess:

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteCond %{HTTP_HOST} ^(www\.)?seusite\.com
RewriteRule ^(.*)$ https://www.seusite.com/$1 [R,L]

Você obviamente deseja mudar o nome do domínio, de seusite.com para seu URL.

Etapa #2 : Imagens

Qualquer um que já tenha testado o PageSpeed ​​irá dizer que as imagens são as culpadas mais comum por deixar as páginas lentas. No nosso caso, vemos…

Você leu corretamente – mais de 15 Mb desnecessários.

As imagens se enquadram em duas categorias de erro:

  • Compressão e redimensionamento. Isso significa que as imagens são fisicamente maiores do que precisam ser. Isso acontece muito no WordPress quando uma imagem é adicionada à Biblioteca de Mídia e colocada na página em um tamanho muito maior do que o necessário para as dimensões que ela ocupa.
  • Compressão  As imagens têm uma tonelada de lixo nelas e, para a web, elas podem ser de qualidade muito superior à necessária. A compactação de imagem lida com isso. Como uma palavra de advertência, se você usar um sistema automatizado de compactação de imagem, tente sempre verificar e certificar-se de que a imagem sai da maneira que você deseja. É raro, mas eu encontrei casos em que houve uma degradação perceptível da qualidade.

Eu geralmente uso minhas ferramentas de edição de imagens ( Photoshop ) ou sites como compressor.io/compress ou as faço manualmente. Eu usarei o tinypng.com para as métricas deste artigo.

Depois de otimizar uma imagem grande de 9,2 Mb para 175 Kb sem impacto visual na página, apenas otimizando as imagens, conseguimos aumentar a pontuação para:

  • Mobile: 61/100
  • Desktop: 67/100

Para a velocidade da página, estamos chegando a 5,5 segundos, ou cerca de duas vezes mais rápido.

As imagens não foram o maior problema em dispositivos móveis para o PageSpeed, mas foram o maior problema no ambiente de trabalho (computadores).  Agora ambas as pontuações estão na média de OK.

Receba Novidades

Enviamos novos conteúdos novos e belos para a sua caixa de entrada regularmente. Aproveite cada boletim de notícias premium em seu e-mail.
Seu melhor e-mail
Seu email nunca será compartilhado

Etapa #3 : Cache do Navegador

Para aqueles que estão passando por esse processo pela primeira vez, se você ver o cache do navegador como um problema, o Google está sugerindo que você informe aos visitantes por quanto tempo os navegadores devem manter recursos específicos.

Por exemplo, você pode enviar uma mensagem ao navegador informando que as imagens podem ser armazenadas em cache por duas semanas. Dessa forma, quando um visitante retorna ao seu site dentro de duas semanas, o site carrega mais rapidamente, pois muitos recursos estão sendo simplesmente extraídos de sua própria máquina.

Você pode definir limites de tempo para o armazenamento em cache na maioria dos recursos, variando de scripts e css à maioria dos tipos de imagens.

Existem dois métodos que costumo usar quando configuro o cache do navegador: configurando diretamente no arquivo .htacess ou através do plug-in W3 Total Cache.

Diretamente no arquivo .htaccess

Você pode adicionar algum código ao seu arquivo .htaccess ao configurar o cache do navegador, mas uma advertência: Se você não tiver certeza do que é um arquivo .htaccess, provavelmente é melhor a utilização do plugin na qual falamos.

Se você decidir ir à velha escola e codificar o .htaccess, você precisará acessar o site via FTP ou, se você não tiver acesso ao FTP, você pode instalar o plug-in WP File Manager, que concede acesso a os arquivos.

Você adicionará o seguinte trecho ao seu arquivo .htaccess:

## Start browser caching ##
ExpiresActive On
ExpiresByType image/jpg “access 1 month”
ExpiresByType image/jpeg “access 1 month”
ExpiresByType image/gif “access 1 month”
ExpiresByType image/png “access 1 month”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
## End browser caching ##

Você pode ajustar os intervalos de tempo de acesso conforme necessário. Você necessitaria fazer isso se precisasse de recursos atualizados em um período de tempo mais curto. Um exemplo disso pode ser se as imagens mudam periodicamente, mas mantêm o mesmo nome de arquivo.

Novos resultados:

  • Mobile: 62/100
  • Desktop: 72/100

O cache do navegador através do plug-in nos deu uma velocidade real de 5,1 segundos.

Através do plugin W3 Cache Total

Existem alguns plug-ins de armazenamento em cache, sendo os mais populares o W3 Total Cache e o WP Super Cache.

Eu encontrei o W3 Total Cache para fornecer melhores resultados em uma ampla variedade de tarefas na maioria dos cenários, mas não em todos. Nunca é demais tentar os dois ou outros para maximizar seus resultados.

Depois de instalar o plug-in, habilitar o cache do navegador é muito mais fácil do que ir às configurações gerais, marcar uma caixa e clicar em “Salvar todas as configurações”.

Cache no Navegador com Plugin Wordpress

A ativação do cache do navegador por meio do plug-in produziu as mesmas pontuações do PageSpeed ​​e a velocidade real da página também ficou inalterada.

Etapa #4 : Reduzir o tempo de resposta do servidor

Muitas vezes, podemos atingir situações em que estamos sendo instruídos a reduzir o tempo que o servidor leva para responder. Você pode pensar até em trocar de hospedagem, mas muita das vezes isso não é necessário.

Um dos principais problemas que desacelera a conexão com um servidor é todo o o processo entre os arquivos PHP e o banco de dados. Felizmente, o W3 Total Cache oferece uma solução na forma de cache de páginas. Na verdade, isso pode acelerar as coisas mesmo se você não estiver recebendo o aviso de resposta do servidor.

Com o cache de páginas, estamos essencialmente criando uma cópia estática de uma página, em vez de exigir que o servidor gere a página em cada visita. Isso tira uma carga significativa do servidor. No caso que estamos abordando aqui, tivemos o problema de resposta do servidor, com o Google informando um tempo de 0,6 segundo para responder e o Dotcom Tools relatando o tempo de 573 milissegundos.

Eu liguei o cache de páginas:

Cache de Páginas Plugin Wordpress

E de repente nós estávamos em:

  • Mobile: 70/100
  • Desktop: 74/100

O tempo de resposta caiu para 75 ms. Vale a pena notar que existem opções de personalização para esse recurso nas configurações de Cache de Página. Você pode selecionar as páginas que estão e não estão armazenadas em cache – entre outras coisas.

IMPORTANTE: Lembrese de que você está criando páginas armazenadas em cache, o que significa que elas não mudam. Quando você atualiza uma página, o W3 Total Cache é configurado para limpar o cache dessa página e reconstruí-la. No entanto, mais alterações globais, como menus, widgets e assim por diante, podem ser atualizadas sem a limpeza do cache. Se você fizer uma alteração e não visualizar a atualização ao vivo, basta clicar em qualquer um dos botões “limpar cache” ou “cache vazio” na área do plug-in.

Etapa #5 : Minificação

Se você já espiou os arquivos que compõem sua página da web, verá que a maioria tem várias linhas e espaços vazios. Cada um deles adiciona bytes aos arquivos. Remover esses bytes é chamado de minificação, realizando uma junção das linhas, sem espaços ou pular linhas.

Os três principais tipos de minificação que se aplicam aos sites do WordPress são:

  1. HTML Código das próprias páginas.
  2. CSS. Código dentro de suas folhas de estilos.
  3. JavaScript. O código dentro de seus vários scripts.

IMPORTANTE:  Sempre que você diminuir os arquivos, especialmente os scripts (javascript), é extremamente importante visitar as páginas do seu site que dependem delas para garantir que continuem funcionando corretamente.

O primeiro método que você pode usar é baixar os arquivos minificados do Google:

Ele inclui as imagens, mas, curiosamente, não acho que seja algo tão bom quanto os métodos mencionados acima. Você pode baixar a versão reduzida do JavaScript e CSS, mas um problema pode aparecer se você atualizar os plug-ins que criaram os scripts. Você terá que fazer tudo de novo.

Na mesma linha de raciocínio, você pode usar ferramentas como CSSMinifier.com ou JavaScript-minifer.com.

Lembre-se de que, se as atualizações do plug-in e essa atualização tiverem algo a ver com o script ou os css, você terá que excluir as referências que chamam os arquivos originais no código. Isso pode ser chato.

A alternativa é retornar novamente ao W3 Total Cache, que inclui a função nas configurações gerais (embora também seja necessário entrar nas configurações avançadas aqui). Você os encontrará em:

Eu recomendo fortemente que você os diminua um de cada vez e teste o site a cada alteração. Se você achar que as coisas estão ficando fora de lugar ou não carregam, você pode ver nas configurações de minificação que se pode fazer a exclusão de Javascript ou CSS separadamente e testar:

Você também pode simplesmente excluir páginas se achar que isso causa problemas em uma página específica, como a página de contato ou uma galerai específica.

Na maioria das vezes não acontece nenhum tipo de erro, (como não aconteceu no cenário no qual estamos trabalhando atualmente). Se essas alterações não fizerem efeito algum, eu recomendo o plugin Autoptimize para realizar a mesma tarefa.

Com essas alterações, os resultados agora são:

  • Mobile: 70/100
  • Desktop: 75/100

Este é um dos cenários em que observamos uma melhoria no PageSpeed ​​sem melhora na velocidade real do site em segundos.

E é isso

Você pode acabar descobrindo que, existem problemas que você não pode consertar. O Google não está nos dando 100% (100/100) e eis o motivo:

  • Otimizar imagens.  Elas são tão pequenas ou menores do que as fornecidas pelo Google, embora eu tenha usado as ferramentas acima. Qualquer compressão maior resulta na degradação e perca de qualidade das imagens.
  • Eliminação de Renderização Javascript.  A única questão restante aqui era um arquivo CSS que resultou em uma renderização ruim da página por cerca de um segundo antes que os CSS fossem aplicados.
  • Aproveite o cache do navegador.  Aproveitamos o cache do navegador, mas, infelizmente, isso se aplica apenas a scripts que estão em nossos próprios sites. Não podemos aproveitar o cache do navegador para scripts externos, como os do Facebook ou Google, como foram os casos aqui.

Nossa velocidade no final é de 3,0 segundos e é uma das melhores na maior parte do Brasil, com a menor chegando a 2,2. Para acelerar ainda mais, precisamos analisar a limpeza do código do WordPress , escolhendo um host mais rápido e / ou implantando um CDN ( Cloudflare por exemplo).

Mas isso é outra história para outro artigo.