O melhor guia para otimização de velocidade de página para WordPress

Seguindo este guia, você aprenderá todas as técnicas para acelerar drasticamente um site WordPress. Aqui estão as razões mais importantes pelas quais ter um ótimo tempo de carregamento de página no WordPress beneficia seu negócio: os usuários não abandonarão seu site, eles gastarão mais tempo e dinheiro lá, e os mecanismos de pesquisa classificarão seu site melhor nos resultados de pesquisa. Preparar?

Introdução

Os internautas não têm muita paciência, quando se trata de tempos de carregamento das páginas. Clicamos em um link ou inserimos a URL e esperamos um segundo, dois, três e pronto. As estatísticas do Google afirmam que 50% dos usuários esperam que um site para celular carregue em 2 segundos e 53% dos usuários provavelmente abandonarão a página, se estiver carregando mais de 3 segundos. É um período muito curto, se você considerar que o tempo médio de carregamento de uma página inicial, em um dispositivo móvel, é de 19 segundos (em uma rede 3G). Os tempos de carregamento em computadores são mais rápidos e um tempo médio de carregamento é de 5 segundos, mas ainda é muito longo.

Tomar benchmarks de sites de desktop como referência não é mais uma desculpa. Para a maioria dos sites de hoje, a maior parte do tráfego vem de dispositivos móveis. Neste artigo, vamos dar uma olhada completa nas técnicas mais atualizadas para otimização de velocidade de página para sites WordPress. Seguindo este guia, você poderá acelerar o site WordPress, reduzindo drasticamente os tempos de carregamento do celular e do desktop e, portanto, tornando-o muito mais fácil de usar.

Se você não tem um site WordPress, não feche o guia ainda. A maioria das técnicas de otimização de velocidade explicadas neste guia passo a passo podem ser aplicadas a qualquer tipo de site.

Se o seu site foi criado com a monetização em mente, seja uma loja de comércio eletrônico online ou se você está vendendo serviços online/offline, perder clientes em potencial nunca é uma coisa boa. Você está basicamente deixando dinheiro na mesa. Melhorar a velocidade da sua página deve ter um impacto positivo nos seus ganhos. Curiosidade: a campanha de arrecadação de fundos de Obama aumentou a conversão de doações em 14% com a otimização do site e diminuindo o tempo de carregamento da página de 5 segundos para 2 segundos.

Como proprietários ou desenvolvedores de sites, queremos que nossos visitantes tenham a melhor experiência. Criamos sites com ótima aparência e funcionalidades incríveis, mas geralmente esquecemos a importância de um site rápido. Um site rápido cria confiança com nossos visitantes, aumenta a chance de um visitante permanecer em nossa página por mais tempo e, portanto, pode gastar mais. Por outro lado, se nosso site for lento, os visitantes podem desistir e nem ver nosso site incrível, com nossa oferta igualmente incrível.

Se as razões acima não foram suficientemente persuasivas, tenho mais uma. O Google e outros mecanismos de pesquisa (SE) revelaram que ter um site lento reduzirá a classificação do seu mecanismo de pesquisa, deixando-o com ainda menos visitantes. Então, ter um site rápido significa que o Google vai gostar mais de você e isso pode mudar drasticamente seus rankings SE a seu favor.

É claro que os tempos de carregamento variam por alguns motivos, por exemplo, a velocidade da Internet do visitante, a localização do visitante e quão “pesado” ou inchado é nosso site. Não há nada que possamos fazer sobre a velocidade de internet do visitante, mas podemos cuidar de outros aspectos e melhorar a experiência de todos. Neste guia, veremos como otimizar nosso site WordPress para velocidade, para torná-lo rápido e enxuto, então vamos lá!

Índice

• Fundações
  • Hospedagem WordPress
    • Hospedagem Compartilhada
    • Hospedagem gerenciada
    • Servidores VPS ou Dedicados
  • Tema WordPress
  • Plug-ins do WordPress
• Etapas de otimização da velocidade da página do WordPress
  • Ferramentas de velocidade de página
    • Informações do Google PageSpeed
    • GTMetrix
    • Teste de velocidade do site Pingdom
    • Teste de página da Web
  • Otimização de imagem
    • Miniguia para otimização de imagem
    • Imagens otimizadas do Google PageSpeed
    • Outras melhorias de imagem
    • Melhorias no estudo de caso
  • Cache do navegador
  • Compressão de recursos (Gzip ou Deflate)
  • Remova arquivos JS ou CSS desnecessários
  • JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra
  • Cache do lado do servidor
    • WP Rocket (plugin de cache do lado do servidor)
  • Rede de entrega de conteúdo
    • Cloudflare
• Resultados finais
• Conclusão

Fundações

Para tornar seu site o mais rápido possível, temos que construí-lo em boas bases. Assim como construir uma casa, você não quer construir em areia movediça e ter problemas logo no início. Você quer construí-lo em bases sólidas, para que dure muito tempo sem problemas. As três principais coisas a serem verificadas são:

• hospedagem
• o tema do WordPress
• os plugins do WordPress

Hospedagem WordPress

A hospedagem é a própria base do seu site WordPress e, portanto, é um componente crucial, que não deve ser esquecido, mesmo que você já tenha uma hospedagem. Mudar para um provedor de hospedagem melhor acelerará o tempo de carregamento do WordPress por até vários segundos.

Selecionar o host certo é importante e você não deve basear sua decisão no preço da hospedagem. Normalmente, com preços baixos, você obtém baixo desempenho e é isso que queremos evitar. Vamos ver as opções de hospedagem disponíveis e explicar quais são as diferenças.

Hospedagem Compartilhada

Esta é a solução de hospedagem mais difundida porque é barata. Mas como dissemos, com preços baixos, você obtém baixo desempenho. Em uma hospedagem compartilhada, existem milhares de contas em um servidor físico, o que significa que os recursos do servidor são compartilhados entre todos os sites criados por essas contas de hospedagem.

Imagine uma pizza grande (hmmm ?…), cada site em uma hospedagem compartilhada fica com um pedacinho bem pequenininho. Mas como seu site tem muitos visitantes, ele precisa de mais pizza! Ainda está com fome, mas não tem mais pizza :(, porque outros sites também estão com fome…

Se obter apenas uma pequena fatia de pizza não for ruim o suficiente, os possíveis riscos de segurança provavelmente tornarão o caso de hospedagem compartilhada ainda pior. Um site infectado em uma hospedagem compartilhada pode causar problemas de velocidade e desempenho para todo o servidor e colocar em risco seu site WordPress também.

A configuração do servidor em hospedagens compartilhadas é muito limitada e você não tem muito espaço para configurá-lo ao seu gosto. O servidor é pré-configurado para configurações específicas, geralmente muito genéricas, e deve executar o WordPress sem problemas. Os problemas surgem mais tarde, na forma de ficar sem memória ou na forma de uma configuração restrita do PHP, que um plugin precisaria para funcionar corretamente.

Eu realmente não posso recomendar hospedagem compartilhada para nenhum site de negócios, mas se eu precisasse, eu diria que é mais adequado para sites de tráfego muito baixo.

Hospedagem gerenciada

Esta é uma grande atualização da hospedagem compartilhada, porque seu site recebe um pedaço maior de pizza (uma fatia de pizza inteira, sim!), mas custa mais.

Os servidores na hospedagem gerenciada são menos preenchidos e isso se traduz em mais recursos de servidor para seu site. Esses servidores geralmente são otimizados para executar o WordPress da maneira mais suave possível, têm mais memória, poder de processamento e um sistema de cache.

A instalação e configuração de hardware e software desses servidores de hospedagem gerenciada são feitas pela empresa de hospedagem (daí a palavra “gerenciado”). Outros serviços, como backups, balanceadores de carga, recuperação de desastres e verificações/prevenções de segurança, também podem fazer parte da hospedagem gerenciada, dependendo da oferta da empresa de hospedagem.

A hospedagem gerenciada do WordPress é recomendada para sites de tráfego baixo a médio.

Servidores VPS ou Dedicados

Se nos atermos à analogia da pizza, com o VPS (Virtual Private Server) você obtém algumas fatias de pizza, mas não a pizza inteira e com servidores dedicados, obtém a pizza inteira.

Isso significa que, com servidores dedicados, você tem o controle de todo o servidor com todos os seus recursos e com o VPS, você obtém uma parte do servidor porque ainda está compartilhando a máquina do servidor físico com outras pessoas. Quando se trata de otimização de velocidade de página para WordPress, não há limitações do lado do servidor quando você está configurando seu WordPress em VPS ou servidor dedicado. Você sabe exatamente quantos recursos estão disponíveis para o seu site e pode configurá-lo ao seu gosto. Você pode implementar recursos de ponta antes que os provedores de hospedagem padrão os suportem (o que pode ficar anos atrás da tecnologia de software de servidor).

Ambas as opções oferecem maior controle e recursos, mas também têm preços mais altos e exigem mais habilidades para configurá-las e mantê-las a longo prazo. Servidores VPS/Dedicados também podem ser gerenciados, então você não precisa ser um guru do servidor para usar um. Eles são apropriados para sites com alto volume de tráfego.

Se você não tiver certeza de qual hospedagem escolher, sugiro a opção de hospedagem gerenciada do WordPress, que também deve ser dimensionada (alocar mais recursos do servidor), se necessário.

Uma otimização de site gratuita, que toda hospedagem decente oferece até agora, é atualizar a versão do PHP para 7.x. Se o seu site WordPress estiver sendo executado em PHP inferior a 7, como 5.6 ou até mais antigo, entre em contato com o suporte de hospedagem e peça para atualizá-lo para a versão estável mais recente. Se você está procurando uma nova hospedagem, você pode perguntar ao suporte deles, se eles tiverem PHP versão 7.x. Todos eles devem responder com um sólido “sim”, mas se eles não tiverem a opção de usar o PHP 7.x, então eu recomendaria ficar longe deles. O PHP 7 é, em comparação com as versões mais antigas, uma grande melhoria quando se trata de velocidade e desempenho e é muito fácil mudar para ele, então aproveite.

Uma boa escolha de hospedagem vai te poupar muita dor no caminho e se você encontrar um problema, um bom suporte ao cliente deve ser capaz de ajudá-lo, então eu também teria em mente escolher um host que ofereça um bom suporte . Um truque rápido que você pode utilizar: faça uma pergunta pré-compra e monitore seu tempo de resposta, atitude e nível de profissionalismo.

Tema WordPress

Quando estamos escolhendo um tema WordPress para nosso site, sempre começamos com o design do tema e tudo bem. Devemos primeiro escolher alguns temas que gostamos, porque queremos que nosso site seja incrível e um ótimo design seja a primeira coisa que um visitante veja. A segunda coisa é provavelmente a funcionalidade do tema. O tema ou os plugins recomendados pelo tema oferecem a funcionalidade que queremos? Se isso acontecer, ótimo! Estamos no negócio! O que quase sempre esquecemos é verificar a rapidez com que o tema carrega.

Podemos testar o tempo de carregamento da página de demonstração do tema e veremos rapidamente se o tema está otimizado para velocidade. Vamos verificar quais ferramentas de velocidade de página usar e como usá-las em uma seção abaixo, mas por enquanto, eu só quero que você saiba sobre essa etapa extra de verificação de tema, antes da compra. Obviamente, o tempo de carregamento da página de demonstração provavelmente pode ser melhorado, portanto, se você não obtiver uma pontuação perfeita, não se preocupe, nenhum tema do WordPress obterá uma pontuação perfeita de 100%, exceto se tiver muito pouco conteúdo em sua página de demonstração. Como regra geral, você deve procurar temas que não estejam nas figuras vermelhas (pontuação 50 ou inferior nas ferramentas de velocidade de página).

Tudo se resume a um bom equilíbrio entre o design do tema e a funcionalidade versus a velocidade do tema. Por exemplo, um tema WordPress vazio com um pouco de texto carregará muito rápido, mas um tema inchado com muitas funcionalidades (a maioria das quais você pode não precisar), com muito conteúdo multimídia, carregará muito mais devagar. Atingir esse ponto ideal é o objetivo, ao selecionar um tema WordPress bom e com bom desempenho.

Plug-ins do WordPress

Uma pergunta que vejo aparecendo muito é: “Quantos plugins são demais?”. Não é um problema no número de plugins do WordPress, mas na qualidade do código e no impacto que o plugin tem no sistema. Você pode ter mais de 50 plugins ativos, com cada um dos plugins cuidando de uma pequena funcionalidade específica (com bom código) e o site funcionará bem. Por outro lado, você pode ter 5 plugins ativos e um deles pode estar entupindo seu sistema, tornando seu WordPress lento.

Revisar o código de cada plugin é uma boa ideia, mas “ninguém tem tempo para isso” , além disso, você precisaria de um bom conhecimento de programação para fazê-lo. Se você seguir esse caminho, as coisas a serem observadas são os plugins que enfileiram muitos recursos externos, fazem muitas solicitações HTTP, fazem consultas desnecessárias (não otimizadas) ao banco de dados e assim por diante (basicamente qualquer coisa que reduza a velocidade do site WordPress, sem uma razão adequada por trás disso).

O que eu recomendaria é não instalar e ativar cada plugin que você acha que precisa.

Primeiro pense nisso, seu site realmente precisa dessa funcionalidade adicional? Por exemplo, se você precisar de um shortcode de botão, verifique a documentação do seu tema, talvez o tema tenha um shortcode para ele e você não precise instalar e ativar um plug-in de pacote de shortcode inteiro apenas para usar um shortcode de botão único. Este é um exemplo trivial, mas quero que você pense antes de instalar e ativar novos plugins. Cada plug-in não verificado pode tornar seu site mais pesado e, portanto, mais lento, além de levar a uma violação de segurança, se o plug-in for mal codificado ou não for mantido.

Por fim, uma grande coisa que você pode aproveitar, ao selecionar o plug-in, é um grande compartilhamento global do WordPress e, consequentemente, uma enorme comunidade. Com a falta de conhecimento de codificação, uma boa regra geral é ficar com os plugins populares com muitas instalações ativas, boa pontuação média de classificação e críticas positivas. Os colegas WordPressers tornarão sua seleção muito mais fácil!

Etapas de otimização da velocidade da página do WordPress

Antes de começarmos com a otimização, gostaria de mencionar algumas coisas.

Em primeiro lugar, você deve criar um backup do seu site WordPress, aqui está um guia sobre como fazer isso com um plugin WordPress. Melhor prevenir do que remediar!

Em segundo lugar, gostaria de avisá-lo para não esperar a pontuação 100/100 nas ferramentas de velocidade de página que usaremos em nosso guia. Ir atrás da pontuação 100/100 não é uma boa ideia ou mesmo possível em alguns sites. Tudo depende do tipo de conteúdo que seu site está exibindo. Se um site tiver apenas um pouco de texto e uma imagem, com certeza, uma pontuação perfeita é totalmente possível. Mas se você tiver uma página longa, com muito conteúdo multimídia e outras integrações de aplicativos de terceiros, como o Google Maps e assim por diante, a pontuação de 100 não está na sua mira e você também não deve persegui-la.

Por que não é uma boa ideia ir para 100/100? Se você seguir as instruções das ferramentas de velocidade da página e otimizar tudo como eles dizem, seu site pode não funcionar corretamente. Se você mover todos os arquivos JS ou CSS de bloqueio para o rodapé, o CSS piscará (o conteúdo sem estilo apareceria primeiro e quando o CSS fosse carregado, o site “flash” no lugar), o mesmo aconteceria com o código JS , que modificaria quaisquer elementos DOM após o carregamento do código JS.

Você pode quebrar seu site, se seguir cegamente as instruções e continuar otimizando seu site WordPress para um melhor tempo de carregamento, apenas para obter a pontuação perfeita. A pontuação de velocidade de página perfeita é apenas um número, que na verdade não importa, se seus visitantes acabarem com um site quebrado. Temos que buscar o equilíbrio entre velocidade da página e experiência do usuário.

Para a demonstração da otimização da velocidade da página do WordPress, usaremos minha conta de hospedagem compartilhada e nosso tema médico do WordPress (com os plugins recomendados para o tema). Sim, sim, eu sei que basicamente disse para não usar uma hospedagem compartilhada, mas veremos o que é capaz e quais são as limitações, além disso, este é apenas um teste de otimização de velocidade da página, não um site WordPress de negócios real

Instalei a versão mais recente do WordPress, o tema MedicPress, todos os plugins recomendados para o tema e importei o conteúdo de demonstração. Este é o nosso ponto de partida para o local de teste.

Ferramentas de velocidade de página

A otimização da velocidade da página pode ser difícil, mas, felizmente, existem ferramentas online que facilitam nossa vida e nos aconselham o que fazer para melhorar a velocidade do nosso site.

A primeira regra para otimizar seu WordPress para velocidade é esta: sempre meça!

Execute as ferramentas (ou pelo menos uma delas), que veremos na seção abaixo, após cada etapa de otimização e acompanhe as melhorias. Dessa forma, você saberá quais tarefas trazem as maiores melhorias. Você também deve executar testes várias vezes, para ver o tempo médio real de carregamento.

As páginas são carregadas de forma diferente, dependendo de onde o servidor de hospedagem está localizado. Por exemplo, se o seu servidor estiver localizado na América do Norte e o visitante for da Europa, a página carregará mais lentamente para ele do que para um visitante canadense. Esse problema pode ser corrigido com uma CDN (Content Delivery Network), mas veremos isso um pouco mais adiante no artigo. Por enquanto, eu só queria ressaltar que esse problema está presente para visitantes em todo o mundo e também para ferramentas de otimização de velocidade de página. Algumas ferramentas também permitem que você execute o teste de diferentes locais, para que você possa ver como isso afeta o tempo de carregamento.

As ferramentas de velocidade de página que veremos são:

• Informações do Google PageSpeed
• GTmetrix
• Teste de velocidade do site Pingdom
• Teste de página da Web

Existem outras ferramentas, mas estas são as mais populares e vamos ficar com elas.

Informações do Google PageSpeed

Como você pode ver pelo título desta ferramenta, este é um produto do Google. Ao lado da pontuação (dividida em desktop e mobile) e as instruções úteis sobre o que fazer para melhorar o tempo de carregamento da sua página, também podemos tirar uma conclusão sobre o que o Google gosta de ver em um site. Quais coisas ele quer que seja otimizado em um site para ter uma boa classificação nos resultados do mecanismo de pesquisa.

Se você tiver imagens ou arquivos de recursos não otimizados (JS ou CSS), ele gerará um arquivo zip com suas contrapartes otimizadas, que você poderá substituir em seu servidor. Bem legal, certo? Veremos a otimização de imagem e código mais tarde, mas saiba que o Google PageSpeed ​​pode ajudá-lo com isso.

O Google PageSpeed ​​Insights não possui muitas informações detalhadas, como outras ferramentas, mas é um bom ponto de partida, que abrange todos os aspectos importantes da otimização da velocidade da página. Ele lista as etapas que mais melhorarão seu site.

Executei essa ferramenta com o URL do nosso site de teste e obtive uma pontuação de 71 para desktop e 67 para celular, portanto, há espaço para melhorias. A lista de possíveis sugestões de otimização inclui:

• Habilite a compactação (compactando recursos com gzip ou deflate),
• otimizar imagens,
• reduzir o tempo de resposta do servidor,
• eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra,
• minifique o JavaScript.

GTmetrix

Essa ferramenta fornece informações mais detalhadas sobre quais coisas são otimizadas e quais não são. Cada detalhe de otimização é listado e classificado em uma escala de 0 a 100. A lista é ordenada por importância, portanto, se você seguir as tarefas de cima para baixo e otimizar as que não tiverem uma pontuação de 100%, estará no bom caminho para acelerar o site WordPress o mais rápido possível.

Usando as ferramentas de teste PageSpeed ​​e YSlow, o GTmetrix gera pontuações para sua página e exibe as tarefas que precisam ser aprimoradas. Um bom recurso dessa ferramenta também é o relatório Waterfall, que representa graficamente como seu site está carregando e você pode identificar os gargalos mais rapidamente. Na imagem abaixo, você pode ver que minha lenta hospedagem compartilhada levou 1,13s para responder com as primeiras informações. Isso é muito longo, mas seremos capazes de melhorar isso.

Você também pode testar sua página em 7 locais diferentes em todo o mundo, o que é legal e também uma coisa importante para testar, que veremos mais adiante no artigo.

Executei a ferramenta GTmetrix (local: Vancouver, Canadá) em nosso site de teste e obtive uma pontuação PageSpeed ​​de 77 e uma pontuação YSlow de 71. Com essa ferramenta, também obtemos essas informações úteis:

• Tempo totalmente carregado: 3,1s,
• Tamanho total da página: 803 KB
• Solicitações: 54

Eu gosto mais da ferramenta GTmetrix, pois você obtém muitas informações relevantes em um só lugar. Usaremos principalmente a ferramenta GTmetrix para medir nosso progresso de otimização neste guia.

Teste de velocidade do site Pingdom

Pingdom é outra ferramenta, que exibe as informações de otimização de forma um pouco diferente. Você obtém os mesmos dados de resumo básicos da ferramenta GTmetrix (sem a pontuação YSlow). Com o Pingdom, você tem a opção de testar a velocidade da página em 4 locais diferentes. Os resultados são todos diferentes para cada local, o que mostra que a localização do servidor é importante, mas poderemos melhorar isso também (com CDN mais adiante no artigo). Usaremos a ferramenta Pingdom para testar os tempos de carregamento da página nos 4 locais disponíveis, pois os testes do Pingdom são concluídos mais rapidamente.

O Pingdom também exibe algumas tabelas interessantes, como tamanho do conteúdo ou número de solicitações, filtradas por tipo de conteúdo ou por domínio e também possui um relatório em cascata.

Teste de página da Web

A ferramenta WebPageTest tem ainda mais opções de configuração do que as ferramentas anteriores. Tem mais locais para escolher, uma velocidade de internet pode ser selecionada, você pode ativar/desativar algumas opções do navegador e você pode testar dispositivos específicos.

É uma boa ferramenta, que exibe um relatório detalhado em cascata para cada execução (por padrão, faz 3 execuções, mas você pode alterar isso nas configurações) e exibe uma nota de A a F para cada um desses fatores de otimização de velocidade:

• Tempo do primeiro byte (tempo de resposta),
• Keep-alive ativado,
• comprimir a transferência (gzip),
• comprimir imagens,
• conteúdo estático em cache,
• uso eficaz de CDN.

Você pode entrar em detalhes, verificando todas as guias de resultados, onde encontrará muitas informações úteis. Eu usaria essa ferramenta, se precisasse de um relatório detalhado ou se precisasse testar um local disponível no site deles, caso contrário acho que o GTmetrix tem informações mais concisas.

Eu executei esta ferramenta para o nosso site de teste. Você pode ver os resultados na captura de tela abaixo:

Analisamos as ferramentas de velocidade de página mais populares e fizemos os testes iniciais de velocidade da página, então agora estamos finalmente prontos para começar a otimizar nosso site WordPress. Para referência, estes são os resultados do ponto de partida das ferramentas de velocidade de página que usaremos para medir nosso progresso de otimização de velocidade:

• Informações do Google PageSpeed
  • Celular: 67
  • Área de trabalho: 71
• GTmetrix
  • Velocidade da página: 77
  • YLento: 71

Otimização de imagem

Este é provavelmente o aspecto mais ignorado do desempenho do site e, ao mesmo tempo, pode trazer a maior melhoria na velocidade do seu site. Se você nunca pensa em otimizar a imagem antes de enviá-la para o seu site WordPress, então este é um ótimo primeiro passo para a otimização do tempo de carregamento do WordPress.

Carregar imagens grandes e não otimizadas, usadas em um lugar pequeno em seu site, é um grande “não, não”. Exemplo: você tem um slot de imagem que não será maior que 600 x 400 px em seu site e carrega uma imagem de 1920 x 1080 px (ou até maior!). Agora, você repete esse erro algumas vezes e seu site ficará muito lento.

A primeira coisa a fazer é redimensionar a imagem para o tamanho adequado. Em nosso exemplo, o slot da imagem nunca será maior que 600 x 400 px, então devemos redimensionar a imagem para esse tamanho.

"É isso, trabalho feito, certo?" Não. Podemos melhorar ainda mais a imagem. Existem muitas ferramentas que otimizam (comprimem) a imagem sem perder sua qualidade (nossos olhos não conseguem detectar a perda de qualidade com essas ferramentas). Isso também reduzirá drasticamente o tamanho do arquivo de imagem, tornando o carregamento mais rápido.

A compactação de imagens pode ser feita manualmente ou com plugins do WordPress. Meu colega de trabalho Marko escreveu um guia fenomenal para otimização de imagens, então usaremos o conhecimento obtido em seu artigo e veremos rapidamente as técnicas que você pode usar para otimizar suas imagens.

Miniguia para otimização de imagem

Escolha o formato de imagem correto – os formatos de imagem mais populares para uso online são JPEG e PNG. Você pode economizar muito no tamanho do arquivo de imagem, selecionando o formato de imagem correto (Marko economizou 45% em seu artigo). Você deveria usar:

• O formato .jpg para fotos, imagens com gradientes e imagens com milhões de cores.
• O formato .png para imagens com cores limitadas (logotipos) e imagens com transparência.

Redimensione suas imagens – Como mencionei acima, você deve sempre redimensionar as imagens antes de carregá-las no seu site WordPress. Em primeiro lugar, verifique o tamanho do espaço onde você usará a imagem e redimensione-a de acordo. Você pode redimensionar as imagens com um programa de manipulação de imagens, como GIMP ou Photoshop.

Compacte suas imagens – Isso pode ser feito com uma ferramenta de compactação de imagens online ou com um plugin do WordPress:

Ferramenta de compressão online : Marko recomenda a ferramenta online Optimizilla. Basta enviar suas imagens para o aplicativo Optimizilla e, quando o processo estiver concluído, baixe as imagens otimizadas, que você deve enviar para o seu site WordPress. Isso parece um pouco tedioso, então é claro que existe um plugin WordPress, que pode simplificar esse processo.

Plugin de compressão de imagem WP : Mais uma vez, Marko testou os plugins de compressão de imagem mais populares e declarou um vencedor: ShortPixel Image Optimizer. Depois de instalar o plugin, você terá que solicitar uma chave de API para usar o plugin (um processo muito simples). As configurações padrão do plugin são ótimas, então você não precisa configurar nada, basta ir em Media -> Bulk ShortPixel e clicar no botão “Start Optimizing”. Qualquer imagem recém-carregada também será otimizada. Nota: a versão gratuita deste plugin permite apenas 100 otimizações de imagem/mês, se você precisar de mais, terá que mudar para o plano pago. Queremos que nossos clientes tenham acesso às melhores ferramentas disponíveis, por isso fizemos uma parceria com o ShortPixel e agora nossos membros do ProteusClub também recebem 1.000 créditos gratuitos para usar com o plugin ShortPixel WordPress.

Por fim, não posso recomendar o suficiente que você leia todo o artigo sobre otimização de imagens no WordPress.

Imagens otimizadas do Google PageSpeed

Esta é uma maneira alternativa de otimizar suas imagens existentes em seu site WordPress. Se você seguiu os passos acima, na seção Mini Guide for Image Optimization, provavelmente já otimizou imagens e, portanto, o Google PageSpeed ​​não terá nenhuma imagem para você. Bom trabalho! Você ainda pode ler esta seção para fins informativos

Mencionei na introdução da ferramenta Google PageSpeed, que o Google gera um arquivo zip com arquivos otimizados que você pode usar em seu site. Você pode baixar o arquivo zip, clicando neste link:

Neste arquivo zip, você tem uma pasta chamada image , que contém as imagens otimizadas. Você pode enviá-los via FTP ou seu uploader de arquivos de hospedagem. Substitua/sobrescreva as imagens nas pastas de uploads corretas (…/wp-content/uploads/…). Depois disso, você também deve gerar as versões menores (miniaturas) dessas imagens em seu site WordPress. Você pode fazer isso com o plugin Regenerate Thumbnails.

Outras melhorias de imagem

Nesta seção, veremos algumas melhorias adicionais em relação às imagens, das quais podemos tirar vantagem, para obter um desempenho extra.

Carregamento lento de imagens

Lazy Loading é uma técnica para carregar imagens, onde as imagens são carregadas de forma assíncrona. As imagens que não estão acima da dobra não são carregadas no carregamento da página (elas são carregadas após ou mesmo somente quando são necessárias). Isso significa que as imagens que podem ser vistas na parte superior da página são carregadas, enquanto outras imagens (não vistas) são carregadas após o carregamento da página ou à medida que os usuários rolam a página (sob demanda). Se você tiver uma página longa com muitas imagens, poderá economizar muito tempo de carregamento inicial da página com essa técnica.

O carregamento lento pode ser implementado com algum código personalizado ou com um plugin WP. Usaremos o plug-in de cache WP Rocket mais tarde e ele também possui um recurso de carregamento lento.

Hotlink de imagem

O que é hotlink? Está exibindo uma imagem que está hospedada em outro servidor. Por exemplo, se você tem um post muito popular e nesse post, você tem uma boa imagem. Um visitante (ladrão) pode copiar o URL de origem da imagem e usá-lo em seu próprio site. Isso significa que a imagem será solicitada e veiculada em seu servidor. Multiplique o ladrão por 100 e você terá milhares de solicitações externas às quais seu servidor precisa responder, o que pode tornar seu servidor mais lento.

Esta não é uma otimização direta da velocidade da página, mas sim uma otimização do servidor. Você pode resolver o problema de hotlinking com algum código no arquivo .htaccess. Você pode dar um passo adiante (ser um pouco malvado) e substituir a imagem roubada por outra, talvez não tão legal :). Isso também pode ser feito no arquivo .htaccess. Abra seu arquivo .htaccess em seu servidor e adicione este código a ele. Substitua seu-website.com pelo seu domínio, o google.com por qualquer outro domínio que você queira permitir o acesso às suas imagens e substitua http://replaceing-stolen-image-url-goes-here.jpg com o URL da imagem que você deseja exibir para qualquer imagem roubada.

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ http://replacing-stolen-image-url-goes-here.jpg [NC,R,L]

Se você não quiser substituir a imagem roubada pela sua imagem personalizada, use este código. Isso desativará a imagem em seu site:

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

Melhorias no estudo de caso

Vejamos o progresso que fizemos com nosso site de teste até agora, depois de otimizar as imagens. Como você sabe, importei dados de demonstração para nosso tema médico, que estamos usando como nosso site de teste. Essas imagens de demonstração estavam usando os formatos de arquivo corretos e já estavam dimensionadas corretamente, então eu poderia pular essas duas etapas. Se eu fosse fazer upload de uma nova imagem, eu não pularia!

Então, instalei o plug-in ShortPixel e executei o otimizador em massa. O plugin relatou uma otimização de imagem média de 38%. Isso é ótimo!

Executei a ferramenta PageSpeed ​​Insights e o Google apontou que algumas das imagens podem ser compactadas ainda mais, então segui meu próprio conselho, usei as imagens que o Google preparou para mim e as enviei para o meu servidor via FTP.

Depois que as imagens foram classificadas, os resultados das ferramentas de velocidade de página foram:

• Informações do Google PageSpeed
  • Celular: 72
  • Área de trabalho: 77
• GTmetrix
  • Velocidade da página: 81
  • YLento: 71

Não é uma grande melhoria, pois as imagens usadas nos dados de demonstração já estavam bastante otimizadas, mas ainda assim, estamos um passo mais perto do nosso objetivo. Se você tiver imagens não otimizadas em seu site, essa etapa de otimização de imagens trará um grande aumento nas pontuações e diminuirá o tempo de carregamento da página.

Cache do navegador

Quando um usuário visita seu site via navegador, ele precisa baixar todos os recursos (HTML, imagens, JS, CSS, …) do seu servidor para exibir o site para o visitante. Quando o mesmo usuário visita outra página em seu site, os arquivos CSS e JS geralmente permanecem os mesmos, mas o navegador ainda pode baixá-los novamente do seu servidor, se você não tiver uma configuração de servidor adequada.

Cabeçalhos de cache e datas de expiração adequados devem ser definidos em seu servidor, para permitir que recursos estáticos (JS, CSS e outros arquivos) sejam armazenados no cache do navegador. This greatly improves the performance for returning visitors or for visitors who look at more than one page on your site.

Usually, the hosting servers have that already configured. If the page speed optimization tools report that you are missing the “Leverage browser caching” optimization or something like that, then it's best to contact your hosting company and let them know that you want to set-up browser caching for your site. They will be able to sort that out for you or at least point you to the right direction on how to do that yourself.

If you want to do things yourself, then you have to know that these browser caching settings vary, depending on the server type your hosting company is using. A good starting point for Apache servers is the .htaccess file of the HTML5 Boilerplate project (check out the “Expires headers” section). An nginx configuration is available as well.

My shared hosting account has browser caching already configured, so there is nothing for us to do on our test site.

Resource Compression (Gzip or Deflate)

Files sent from your server (HTML, JS, CSS, …) to your visitors can be compressed, so that they can be transferred faster, which improves your page speed. This can be done by enabling Gzip or Deflate compression on your server.

You can contact your hosting support and ask them, if they can enable resource compression for your site or you can configure it yourself, but be sure you know which server type your hosting is using. We can again look at the HTML5 Boilerplate project for some tips, they have default server configs for each of the major server types. For example, my hosting is using Apache server, so I found this compression config. I've copied the content of this config, I've located the .htaccess file for my WordPress site via the FTP (it's in the root of your WP installation) and I copied it at the end of the file.

I've re-run the page speed tools, after I've enabled the resource compression for my WordPress site and here are the results:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 96
  • YSlow: 82

As you can see, we've improved our scores by a fair amount and all we did, was enable the resource compression, which did not take a lot of time. By compressing resources, we change the total page size from 803KB to 476KB, which is awesome! We made another step towards an optimized site, so let's continue.

Remove unneeded JS or CSS files

If you are using plugins, which include JS or CSS files on all your pages and you actually are not using the plugin features on those pages, then it's best to remove them. This can be done with custom code in your child theme, but I would recommend that you use a plugin for that. It's much easier!

The plugin that will help us do that is WP Asset CleanUp. After you install and activate this plugin, go and edit your home page. Home pages are usually the “heavier” pages, so we will look at it for our example, but you can do that for other pages as well.

Under the page content editor, you will see a section called WP Asset CleanUp . This section will list all CSS and JS files that are included on your front page. Now, your job is to find out, which of these files are not needed on your WordPress front page.

For example, in our test site, we are using the Contact Form 7 plugin, but we are only using the contact form on our “Contact Us” page, so we can safely remove (unload) its CSS and JS files from our home page. I can do the same with WooCommerce assets, since we are not using them on our home page as well. You should look at each asset in the list and check, if you can unload it. Watch out for the files with the red exclamation icon, you should probably never unload these, since they are core WordPress files and they are needed for the site to work properly. This is how my home page Assets CleanUp settings looks like:

I was able to safely remove 11 assets, which will save 11 resource requests when a page loads and that will improve the page speed.

Re-run of page speed test tools showed, that Google PageSpeed Insights score did not change (because it also did not list this as a recommended optimization), but the GTmetrix score did improve:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 97
  • YSlow: 86

Our site also loads faster, it now needs 2.7 seconds to load the whole site (in the beginning it took 3.1 seconds). We are improving the WordPress site speed slowly but surely. Bear in mind, I'm using one of our WordPress themes for the test, which are built from the ground up to be performing out of the box. If you're using some other WordPress theme, where the author didn't put any efforts to optimize it for speed, your improved loading speed results will most probably be much greater at this point.

With removing unneeded JS and CSS files from our home page, we improved our scores, load time, number of request and the total page size as well. Bom trabalho!

Render-blocking JavaScript and CSS in above-the-fold content

One of the optimizations that Google PageSpeed Insights suggests is also: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. This is a tricky one. Remember when I said, that it's not good to chase a perfect score in the page speed tools? This is one of the reasons for that.

If we look at our example, the Google tool suggests that the Page Builder front-flex.css should be deferred or loaded asynchronously. We are using the Page Builder by SiteOrigin plugin for building content in our pages. So, if this file is responsible for making our layout of the page look good, then I might not respect Google suggestion and simply ignore it.

“But why would you disrespect Google? Como você ousa!" Well, this is only a tool and it gives you suggestions on what to do, but it does not know, if implementing some of these changes will break your site or ruin good user experience (UX) for your visitors. For example, if the tools had suggested that we load the style.css file with all the theme styles asynchronously, then it would have created the FOUC: Flash of unstyled content:

This is a bad UX, so I would ignore the suggestion from the tool and keep a good UX instead of improving our score. After all, Google is also using other factors it can gather from your website to rank it in the search results and user experience is one of them. When optimizing the website for speed, don't follow the recommendations blindly and forget about all the other aspects and goals your WordPress website has.

If the files that the tool suggests to be loaded asynchronously are valid candidates and they don't break anything, then of course we can implement that change. The best way is to just try to asynchronously load each suggested file and see, if the page still loads ok. Don't forget to reload the page without browser cache, so that a fresh copy of the page loads. You can do that by hard refreshing your site.

We will look at how to load files asynchronously in the WP Rocket plugin section below. There are other standalone plugins that offer this functionality, but since the WP Rocket has it build in, we don't need to pollute our WP installation with more plugins.

Server Side Caching

We've already talked about browser cache, but now we also have to take care of the server side cache. To understand server side caching we have to know the basics of how WordPress works, so let's look at that first.

When a visitor opens a WordPress page, the following things happen (basic explanation):

1. Server receives a page request.
2. WordPress PHP code begins to execute.
3. WordPress access the database to get the information it needs to build the requested page.
4. WordPress produces the HTML.
5. Server responds with the HTML for the browser to display it to the visitor.

These 5 steps have to be repeated for each page view, for each visitor. That's a lot of repetitive work for content that stays the same for each visitor (if your site is displaying mostly static content, which majority of websites is).

Server side caching eliminates pretty much all the server's hard work. It removes the need for repeating steps 2,3 and 4. So, when we enable server side caching, the process of a page request looks like this:

1. Server receives a page request.
2. Server retrieves the page HTML from the cache (if a cached version is available).
3. Server responds with the HTML for the browser to display it to the visitor.

As you can see, the hard work of running the WordPress code and accessing the database is bypassed, which means that the page loading time should be much faster.

If we look at the Google PageSpeed Insights tool suggestions, we will spot the “Reduce server response time” task. The tool says that our server responded in 0.98 seconds, which is not good. The slow shared hosting I'm using is definitely to blame for some chunk of that 1 second response time, but we'll be able to shorten it with server side caching.

Each page cache is usually saved with an expiration time of 24 hours, but that setting can be changed. This means that instead of thousands of page requests running the whole WordPress HTML building process, it will only be run once a day, to generate that cached page and the server will serve that cached page to other visitors. So, not only the page will be quicker, but the server will also have to do less work.

If you are updating a page in WordPress and an old cached version of the page is still available on your server, then you would have to clear that cache manually (usually with the click of a button) or some tools would do that for you automatically.

Some hosting companies already have a server side caching in place for their users, but this feature is usually available for managed WordPress hosting packages. So, before you follow instructions below, on how to setup server side caching, you should make sure that your server is not doing that for you already.

We will look at how to setup the WP Rocket plugin to enable server side caching and other features that it has (like lazy loading images, loading assets asynchronously, minification of JS and CSS files and much more). WP Rocket is a premium (paid) plugin, but I believe it's worth the investment. If you don't agree with me, that's fine WP Super Cache is a good free alternative, but it does not have the same extra features as WP Rocket and it's a little bit more cumbersome to setup.

WP Rocket (server side caching plugin)

As soon as we install and activate the WP Rocket plugin it will have some basic features enabled out of the box:

• Caching of all the pages for quick viewing.
• Decrease bandwidth usage with our GZIP compression.
• Management of the headers (expires, etags…).

The WP Rocket plugin default settings are a good starting point.

I've run the page speed tools a couple of times, so that they picked up the cached version of the site and these are the new results:

• Google page speed insights
  • Mobile: 91
  • Desktop: 97
• GTmetrix
  • PageSpeed: 97
  • YSlow: 87

The Google PageSpeed Insights tool no longer displays the “Reduce server response time” optimization suggestion, because we reduced it from 1 second to 121ms, that's a 88% improvement in server response time, just by activating the WP Rocket plugin! With this improvement, our fully loaded time is now 1.9 seconds, but we are not stopping here

Vejamos as configurações que o plugin WP Rocket tem a oferecer. O WP Rocket tem um bom menu de atalho na barra de menu de administração do WP. A partir daí, você pode acessar a página de configurações, limpar o cache e acessar outras informações úteis sobre este plugin.

Antes de continuarmos e experimentarmos diferentes configurações do WP Rocket, gostaria de mencionar que, após cada alteração que você fizer, você deve verificar seu site em uma guia anônima/privada do navegador . Se você estiver conectado ao seu site WordPress, não verá a versão em cache do site. Na guia anônima do navegador você não estará logado e terá uma versão em cache do site, para poder verificar se está funcionando bem.

Saiba também que habilitar cada configuração do WP Rocket pode ter resultados diferentes ou até mesmo efeitos negativos na velocidade do seu WordPress, dependendo de qual tema ou plugins você está usando, então apenas habilitar todas as configurações do WP Rocket não é o caminho a percorrer. Você deve tentar cada configuração e medi-la com ferramentas de velocidade de página, para ver a diferença. Como você verá, algumas técnicas não melhorarão a velocidade de nossa página, portanto, não as usaremos.

Limpar cache

O cache do lado do servidor começará a funcionar assim que você ativar o plugin WP Rocket, então vamos ver como podemos limpá-lo. Você pode limpar o cache manualmente, se clicar no item de menu “Limpar cache” no menu de atalho do WP Rocket. O plug-in também cuidará da limpeza do cache automaticamente, quando você atualizar as configurações do personalizador, alterar/atualizar widgets, categorias, … e limpará parcialmente o cache quando você atualizar uma página. Para obter mais informações sobre quando a limpeza automática do cache ocorrerá, consulte esta pergunta do WP Rocket.

O cache tem uma vida útil que pode ser definida na guia “Basic” das configurações do WP Rocket. Sugiro definir isso para 1 dia.

Pré-carregar cache

Um recurso interessante do WP Rocket é o “Pré-carregar cache”, que pré-carrega o cache da sua página inicial e as páginas que ele vincula, para que seus usuários sempre obtenham uma versão em cache da página. Eu poderia usar esse recurso antes de executar as ferramentas de velocidade de página e não precisaria executar as ferramentas várias vezes para obter os resultados da versão em cache.

As configurações de cache de pré-carregamento podem ser acessadas na página de configurações na guia "Pré-carregar". Procure a opção “Preload bot”, lá você encontrará uma opção manual e uma automática. Se você habilitar a opção de bot automático, o cache de pré-carregamento será executado sempre que você atualizar ou criar uma página ou se o cache expirar. Essa opção pode influenciar o desempenho do seu servidor, portanto, fique de olho nos logs de desempenho se você ativá-la. Se você está atualizando e criando muitos posts/páginas e tem uma hospedagem compartilhada, aconselho a não habilitar essa opção. Você deve habilitar apenas a opção de bot manual, que criará outro item de menu de atalho do WP Rocket, intitulado “Preload Cache” e pré-carregará o cache somente quando você clicar nele (depois de terminar de editar postagens e páginas).

Na guia de configurações “Pré-carregar”, você também encontrará configurações para pré-carregar o cache de um mapa do site, para que você possa definir um mapa do site e ele usará os URLs no mapa do site para pré-carregar o cache dessas páginas.

Carga preguiçosa

Já expliquei o carregamento lento de imagens na seção de otimização de imagem deste artigo, mas agora que temos o WP Rocket instalado, podemos realmente habilitar esse recurso. Vá para a guia “Basic” das configurações do WP Rocket e habilite o LazyLoad para imagens e, se você estiver usando algum vídeo ou iframes, também poderá habilitá-lo.

Depois de habilitar esse recurso, você deve sempre verificar seu site e ver como as imagens são carregadas. LazyLoad pode quebrar o layout do seu site ou você pode não gostar de como as imagens são carregadas (salto de conteúdo), então sempre verifique suas páginas. Esse recurso é realmente útil quando você tem muitas imagens abaixo da dobra e ajudará a reduzir o número de solicitações de imagens no carregamento da página original. Em nosso site de teste, temos apenas 5 imagens abaixo da dobra, então salvamos 5 solicitações de imagens e nosso tempo de carregamento da página agora caiu para 1,7 segundos, enquanto as pontuações das ferramentas de velocidade da página permaneceram as mesmas. Este é um bom indicador de que você pode melhorar a velocidade da sua página com determinadas tarefas que as ferramentas não sugerem.

Minimizar arquivos

Algumas das sugestões do GTMetrix que ainda podemos melhorar são a redução de arquivos HTML, CSS e JS. Como nosso tema WordPress e a maioria dos plugins recomendados já estão usando versões minificadas para os arquivos JS/CSS e temos o Gzip ativado em nosso servidor, essa otimização WP Rocket não trará melhorias significativas para nosso site de teste, mas seu caso pode ser diferente. Vá para a guia “Static Files” nas configurações do WP Rocket e marque todas as 3 opções na opção Minify files . Salve as configurações e verifique seu site em uma guia anônima/privada, para que você possa procurar quaisquer problemas que essas opções possam trazer ao seu site. No meu site WordPress de teste, a minificação de CSS quebrou o enfileiramento de arquivos css do construtor de páginas, então tive que desabilitar a opção de arquivo CSS minify. As opções HTML e JS funcionaram bem.

Perguntei ao suporte do WP Rocket qual poderia ser o problema e eles foram gentis o suficiente para depurar esse problema no meu site. O problema foi causado pelo cache Varnish usado na minha hospedagem compartilhada. Eles sugeriram alterar a configuração do Varnish no meu servidor de hospedagem. Entrei em contato com meu suporte de hospedagem e, como suspeitava, não consigo alterar a configuração do Varnish na minha hospedagem compartilhada, mas poderia, se atualizasse para o pacote de hospedagem VPS. Como você pode ver, usar uma hospedagem compartilhada não é uma boa ideia

Se você tiver alguns problemas com a minificação de CSS ou JS, poderá adicionar a URL do arquivo que estava causando os problemas à caixa de arquivos JS ou CSS excluídos. Encontrar o arquivo responsável pelos problemas pode ser complicado, mas geralmente você sabe qual funcionalidade está quebrada e qual plug-in é responsável por essa funcionalidade, então você verifica o código-fonte da página e inspeciona os arquivos incluídos por esse plug-in. Se o plug-in tiver vários arquivos JS ou CSS, você pode tentar adicioná-los à lista de exclusão e ver se o problema desaparece.

Combine arquivos JS e CSS

A guia YSlow na ferramenta GTmetrix está nos dizendo para “Fazer menos solicitações HTTP”. Ele diz que nosso WordPress está usando 9 scripts JS externos e que devemos tentar combiná-los em 1 e que a página está usando 4 arquivos CSS externos e devemos tentar combiná-los em 1 arquivo também. Se você se lembra, já removemos os arquivos JS e CSS desnecessários na seção Remover arquivos JS ou CSS desnecessários deste artigo.

Combinar todos os arquivos JS e CSS em um arquivo não é uma boa ideia, porque os navegadores podem baixar 6 arquivos menores em paralelo, mais rápido que 1-2 arquivos grandes. A outra razão é que alguns dos arquivos estão incluídos no cabeçalho dos documentos HTML e outros no final do documento, então você deve dividi-los em pelo menos 2 arquivos.

Para combinar arquivos com o WP Rocket, vá para a aba “Static files” nas configurações do plugin e ative as opções em Combine files . Como sempre, verifique seu site em uma guia anônima/privada do navegador para verificar se há problemas.

Em nosso exemplo, o WP Rocket teve problemas novamente, devido ao problema de configuração do Varnish de hospedagem compartilhada mencionado acima, então tive que desabilitar a opção JS combine files.

Novamente, se você teve alguns problemas com a concatenação CSS ou JS, você pode adicionar o URL do arquivo que estava causando os problemas na caixa de arquivos JS ou CSS excluídos, assim como na etapa de minificação acima.

Remova as strings de consulta de recursos estáticos

A GTMetrix nos recomenda remover as strings de consulta de recursos estáticos, porque alguns servidores proxy não armazenam recursos em cache com strings de consulta.

Strings de consulta em um recurso estático (geralmente arquivo JS ou CSS) é um atributo de URL, que marca a versão do referido arquivo. Parece com isto: ?ver=2.5.8 e é anexado no final do URL: http://domain.com/css/front-flex.css?ver=2.5.8

Podemos remover facilmente essas strings de consulta com o WP Rocket. Vá para a guia "Arquivos estáticos" das configurações do plug-in e ative a opção Remover strings de consulta .

Após habilitar esta opção, nossa pontuação GTmetrix PageSpeed ​​mudou para 98, mas o tempo de carregamento da página não mudou.

CSS/JS de bloqueio de renderização

A única sugestão de ferramenta do Google PageSpeed ​​Insights que resta é “Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra”. Isso significa que existem alguns arquivos JS ou CSS bloqueando o carregamento da página no conteúdo acima da dobra. O que a ferramenta quer que façamos é adiar ou carregar de forma assíncrona esses recursos de bloqueio.

Mais uma vez, o plugin WP Rocket vem em socorro. Vá para a guia "Arquivos estáticos" e procure as opções CSS/JS de bloqueio de renderização . Lá você pode habilitar as opções JS e CSS que podem resolver esse problema. Depois de habilitar a opção JS, uma opção de modo de segurança (recomendado) aparecerá. Esse modo de segurança carregará a biblioteca jQuery (biblioteca enfileirada padrão do WP) no cabeçalho da página, deixando-a como um arquivo de bloqueio, mas não quebrará nenhuma página que tenha código jQuery embutido na página. Como o jQuery ainda está carregado na cabeça, a ferramenta PageSpeed ​​ainda está reclamando que temos um arquivo JS de bloqueio de renderização.

Então, se eu desabilitar o modo de segurança para nosso site de teste, a ferramenta Google PageSpeed ​​nos dá uma pontuação perfeita, 100 no celular e 100 no desktop. Ótimo, certo? Na verdade, não! Nosso site ainda funciona corretamente, mas vamos ver como o site carrega:

Flash de conteúdo sem estilo (FOUC) pode ser corrigido utilizando a opção CSS de caminho crítico nas configurações do WP Rocket (logo abaixo da opção CSS/JS de bloqueio de renderização). A teoria é que você poderia adicionar o código CSS necessário para a parte acima da dobra da página, para que esse efeito flash de texto sem estilo não aparecesse no carregamento da página. Isso é mais difícil do que parece. Existem ferramentas que deveriam gerar esse CSS crítico para você, mas não tive muito sucesso com elas.

Para gerar o código CSS do caminho crítico:

1. Desative o plugin WP Rocket em seu site.
2. Vá para a ferramenta Critical Path CSS Generator.
3. Insira o URL do seu site e execute-o.
4. Copie o código CSS do caminho crítico.
5. Ative o plugin WP Rocket.
6. Cole o código CSS na caixa “Critical path CSS” nas configurações do WP Rocket.
7. Verifique se existem caminhos de URL relativos no código CSS crítico e altere-os para caminhos absolutos.

É assim que o carregamento do nosso site de teste do WordPress se parece agora:

É melhor, mas ainda não gosto. Sim, a pontuação do Google PageSpeed ​​de 100/100 é ótima, mas o tempo total de carregamento é mais lento e também temos mais 2 solicitações porque ativamos essa opção de bloqueio de renderização CSS/JS. O principal problema para mim ainda é a experiência do usuário no carregamento da página, então desativei essa opção do WP Rocket.

O WP Rocket é definitivamente um plugin que todo dono de site WordPress deve usar, pois possui todos os recursos para acelerar seu site. Basta ativar o plug-in para dar um grande impulso. Outros recursos devem ser testados para cada site, pois cada tema e plug-in pode trazer seus próprios problemas para a mistura.

Estamos quase no final de nossas etapas de otimização. A única coisa que resta é usar um CDN para os ativos do nosso site.

Rede de entrega de conteúdo (CDN)

Já mencionei algumas vezes neste artigo, que os tempos de carregamento da página diferem, dependendo da localização do servidor e da localização do visitante. Por exemplo, meu servidor de hospedagem compartilhada que estamos usando para teste está localizado em Austin, Texas (EUA) e no início da seção de ferramentas de velocidade da página Pingdom deste artigo testamos 4 locais. Aqui estão os resultados:

• Dallas, Texas (EUA) = 1,65s
• San Jose, Califórnia (EUA) = 2,53s
• Estocolmo, Suécia (UE) = 3,06s
• Melbourne (AUS) = 5,38s

Agora que otimizamos o site, com todas as etapas mencionadas neste artigo, nossos tempos de carregamento são:

• Dallas, Texas (EUA) = 0,63s
• San Jose, Califórnia (EUA) = 0,76s
• Estocolmo, Suécia (UE) = 1,21s
• Melbourne (AUS) = 2,24s

Usaremos esses tempos para comparar nosso tempo de carregamento do WordPress, quando configuramos nosso site para usar um CDN.

Podemos ver que esses tempos são muito diferentes; isso ocorre porque os dados precisam percorrer um caminho mais longo da localização do nosso servidor até o visitante australiano do que para um visitante em Dallas. É aqui que um CDN nos ajudará a reduzir esses tempos de carregamento.

Uma CDN é uma rede distribuída geograficamente de proxies de servidor e seus data centers. Seu objetivo principal é distribuir o conteúdo do seu site para seus visitantes a partir de um servidor mais próximo do visitante. Isso significa que o conteúdo estático do seu site (imagens, JS, CSS, …) será servido por seus servidores, que estão espalhados pelo mundo, tornando seu site mais rápido para carregar para todos.

Utilizar um CDN do WordPress tem uma infinidade de benefícios, incluindo:

• Diminuição da latência, que é o tempo e/ou atraso que a distância tem que percorrer.
• Reduz o tempo até o primeiro byte (TTFB), que é uma medida de quanto tempo o navegador precisa esperar antes de receber seu primeiro byte de dados do servidor.
• Serve o conteúdo do cache para tempos de carregamento de página mais rápidos e menos esforço em seu servidor de hospedagem (origem).
• Utiliza HTTP/2 em conexões seguras para aproveitar multiplexação, paralelismo, envio de servidor e compactação HPACK.
• Compacta dados com GZIP ou Brotli para garantir arquivos HTML, folhas de estilo e JavaScript menores.

Atualmente, as CDNs oferecem vários outros recursos, especialmente no departamento de segurança. Eles geralmente oferecem proteção contra DDoS, detecção/prevenção de bots e assim por diante.

Veremos uma das CDNs mais populares, chamada Cloudflare. Eles oferecem um pacote gratuito, que inclui o uso de sua CDN global e é disso que precisamos.

Cloudflare

Primeiro, acesse cloudflare.com e inscreva-se para uma nova conta gratuita. Depois de criar uma conta, você terá que configurar seu site na Cloudflare, para que ele sirva seu conteúdo estático (ativos).

Ao fazer login em sua nova conta Cloudflare, você será solicitado a adicionar seu site (domínio) para recuperar automaticamente os registros DNS.

Insira seu domínio e clique em “Begin Scan”. Apesar de estar usando um subdomínio ( speed.gregorcapuder.com ), tive que inserir apenas o domínio raiz: gregorcapuder.com . A parte de digitalização levou cerca de um minuto para ser concluída e, enquanto isso, você pode assistir a um pequeno vídeo, que explicará o que está acontecendo. Depois que a digitalização estiver concluída, você pode clicar no botão "Continuar".

Na próxima etapa, você verá todos os registros DNS que a Cloudflare conseguiu encontrar para o nosso domínio. Aqui você tem que adicionar quaisquer registros que possam estar faltando, então percorra a lista e verifique se algo está faltando. Em nosso exemplo, o subdomínio de velocidade estava ausente, então o adicionei à lista. Na entrada nome digitei “velocidade” (nome do meu subdomínio), no endereço IPv4 digitei o mesmo endereço IP do meu domínio principal (gregorcapuder.com) e depois cliquei em “Adicionar registro”. Como você pode ver na captura de tela abaixo, habilitei o Cloudflare para meu domínio principal e também para o subdomínio de velocidade (marcado por uma nuvem laranja com uma seta atrás da nuvem). Isso significa que nesses dois sites, o tráfego será tratado e protegido pela Cloudflare.

Quando você terminar com os registros DNS, você pode continuar para a próxima etapa, onde você seleciona o plano “Site gratuito” e continua.

A última etapa para habilitar o Cloudflare para o seu site é fazer login no painel do registrador de domínio (de onde você comprou seu domínio) e alterar os servidores de nome do seu domínio. Afirma-se que pode levar até 48 horas para que os novos servidores de nomes entrem em vigor, mas no meu caso, foi atualizado em 1 hora. Enquanto isso, não haverá inatividade do site, então não se preocupe.

Assim que os nameservers forem atualizados para o seu site, você verá o status do seu site Cloudflare mudar para “ativo”.

Deixei todas as configurações do Cloudflare no painel como padrão, a única coisa que mudei foi o nível de segurança. Vá para a guia Firewall e ajuste o “Nível de segurança” para Baixo . Isso porque não quero que meus visitantes recebam uma “página de desafio” em uma detecção de invasor falso.

Agora que configuramos o lado da Cloudflare, também devemos habilitar as configurações da Cloudflare em nosso plugin WP Rocket.

Faça login no seu painel de administração do WordPress e vá para as configurações do plugin WP Rocket. Navegue até a guia “CDN”, ative a guia Mostrar configurações da Cloudflare e salve as configurações. Isso mostrará uma nova guia “Cloudflare” nas configurações do WP Rocket e você deve abri-la. Lá você deve inserir o e-mail da conta Cloudflare, o domínio e também copiar e colar a chave global da API Cloudflare. Para recuperar a chave de API global, acesse o painel da Cloudflare (guia de visão geral) e clique no link “Obter sua chave de API”. Você verá uma seção “Chave de API” nesta nova página e deve clicar no botão “Visualizar chave de API” para a linha “Chave de API global”. Depois de colar a chave global da API nas configurações do WP Rocket, também sugiro ativar a opção “Configurações ideais” no WP Rocket. Salve as configurações e clique no botão “Clear Cloudflare cache”, apenas para verificar se tudo está funcionando bem.

Agora que o CDN está configurado, podemos testar novamente os tempos de carregamento de diferentes locais e ver as melhorias (testes Pingdom).

• Dallas, Texas (EUA) = 0,54s
• San Jose, Califórnia (EUA) = 0,70s
• Estocolmo, Suécia (UE) = 0,91s
• Melbourne (AUS) = 1,16s

Como esperado, os tempos de carregamento europeus e australianos foram os que mais melhoraram. E todos os nossos tempos de carregamento são de cerca de 1 segundo ou menos. Esse é um ótimo tempo de carregamento!

Quando estiver testando seu site, não o teste com apenas uma execução da ferramenta de velocidade de página para um local. Você precisa testá-lo algumas vezes. Quando você executa a ferramenta pela primeira vez para um determinado local, os arquivos em cache precisam ser armazenados primeiro no servidor Cloudflare mais próximo, cada teste subsequente deve mostrar o tempo real de carregamento da versão em cache. Eu sugiro que você teste de 3 a 5 vezes, para obter uma boa média de quão rápido sua página será carregada de um determinado local.

Resultados finais

Nossas pontuações finais da ferramenta de velocidade de página são:

• Informações do Google PageSpeed
  • Celular: 91
  • Área de trabalho: 97

• GTmetrix
  • Velocidade da página: 98
  • YLento: 91

Aqui estão as capturas de tela:

Vamos comparar os dados do GTmetrix antes e depois da nossa otimização:

Melhoramos o desempenho do nosso webiste em todos os sentidos. O site carrega mais rápido, leva menos solicitações para exibir o site para o usuário, consome menos largura de banda e carrega rapidamente para visitantes em todo o mundo. Ao mesmo tempo, mantivemos toda a funcionalidade e estilo do nosso site como era no início. Impressionante!

Para o final, preparamos uma boa representação visual dos resultados para cada etapa de otimização individual que concluímos:

Conclusão

Neste guia definitivo de otimização de velocidade de página do WordPress, analisamos as etapas mais importantes que você pode realizar para melhorar drasticamente o desempenho do seu site. Seguir os conselhos deste artigo tornará seu site enxuto e rápido, o que melhorará o tempo de carregamento da página e, portanto, a experiência do usuário. Essas melhorias também podem trazer mais dinheiro e ajudá-lo a economizar alguns custos do servidor, por isso é uma vitória para todos!

Gostaria de concluir este artigo dizendo que velocidade não é tudo, é mais uma peça do quebra-cabeça de um site. Construímos sites para humanos, clientes em potencial, então sempre tenha isso em mente. Encontre um bom equilíbrio entre conteúdo, multimídia, design, experiência do usuário e velocidade da página. Não fique obcecado com a velocidade da página e as pontuações da ferramenta de velocidade da página. Contanto que você melhore a experiência de seus visitantes, seu objetivo será alcançado.

Perdi alguma etapa de otimização do site, que você acha que pode trazer uma melhoria crucial no tempo de carregamento da página? Deixe-me saber nos comentários abaixo!

Se você achou nosso artigo útil e seguiu as etapas, por favor, deixe-me saber nos comentários abaixo, que tipo de melhorias você conseguiu.