Se você é um usuário do WordPress, vai começar a ouvir muito o termo Google Core Web Vitals nos próximos meses e anos.

Core Web Vitals são a última tentativa do Google de liderar as mudanças na Internet. Eles são um conjunto de métricas de desempenho e experiência do usuário que se tornarão um fator de classificação de SEO no próximo ano, então você não deve simplesmente ignorá-los.

Nesta postagem, apresentaremos a você os Google Core Web Vitals e porque eles são importantes para os usuários do WordPress. Em seguida, mostraremos como analisar o desempenho dos Core Web Vitals do seu site do WordPress e melhorar as suas pontuações.

O que é core web vitals?

O Google Core Web Vitals são três métricas específicas relacionadas ao desempenho do seu site e à experiência do usuário.

Os Core Web Vitals estão mais preocupados com a forma como o seu site carrega, não com o tempo geral de carregamento da página. Por exemplo:

• Com que rapidez os visitantes podem ver e interagir com o seu conteúdo principal? (Mesmo se o resto do seu site não terminar de carregar)
• O seu site carrega sem problemas ou o conteúdo “salta” e muda de estilo conforme novos recursos são carregados?
• Há atrasos na entrada quando os usuários tentam interagir com o seu site?

Aqui estão as três métricas que atualmente compõem os Core Web Vitals:

Maior Pintura de Conteúdo (Largest Contentful Paint – LCP) – mede o carregamento – quanto tempo leva para o conteúdo principal da sua página carregar. Não todo o conteúdo – apenas o conteúdo principal que os visitantes veem primeiro. Seu LCP deve ter menos de 2,5 segundos.

Atraso na primeira entrada (First Input Delay – FID) – mede a interatividade – quanto tempo leva para a sua página se tornar interativa. Ou seja, quando um visitante clica em um botão ou outro elemento. Seu FID deve ser inferior a 100 ms (este número se refere ao atraso no processamento do evento).

Deslocamento de layout cumulativo (Cumulative Layout Shift – CLS) – mede a estabilidade visual – quanto o seu conteúdo muda visualmente conforme é carregado. Por exemplo, se o seu conteúdo “pular” quando um novo anúncio é carregado. Seu CLS deve ser inferior a 0,1.

Nas palavras do Google, essas três métricas são:

Um conjunto de métricas do mundo real centradas no usuário, que quantificam os principais aspectos da experiência do usuário. Elas medem as dimensões da usabilidade da web, como tempo de carregamento, interatividade e a estabilidade do conteúdo à medida que ele carrega (para que você não toque acidentalmente em um botão quando ele muda sob o seu dedo – isso é chato!)

Por que os administradores de sites em WordPress devem se preocupar com os Core Web Vitals?

Existem dois grandes motivos pelos quais os usuários do WordPress devem se preocupar com os Google Core Web Vitals:

Experiência do usuário / Otimização de mecanismos de pesquisa (Search engine optimization – SEO)

O primeiro motivo para se preocupar com os Core Web Vitals é que eles são, pelo menos na estimativa do Google, uma métrica muito boa para a experiência do usuário no seu site, no que diz respeito ao desempenho.

Simplificando, otimizar os seus Core Web Vitals deve fazer os seus visitantes terem uma experiência melhor e eliminar frustrações, como a de eles clicarem acidentalmente no botão errado porque o seu layout mudou.

O segundo grande motivo para se preocupar com os Core Web Vitals é o SEO. Para estimular os webmasters a otimizarem os Core Web Vitals, o Google está usando um dos maiores “prêmios” que possui – os rankings de busca.

Como analisar o desempenho de seu site em Core Web Vitals?

Existem algumas maneiras de comparar o seu site com as métricas dos Core Web Vitals:

• PageSpeed ​​Insights
• Google Search Console
• GT Metrix
• WebPageTest
• PageSpeed ​​Insights

Se você deseja testar rapidamente uma única página em relação aos Core Web Vitals, você pode usar a ferramenta de teste PageSpeed ​​Insights do Google.

Depois de inserir o seu URL, você verá métricas para:

• Maior Pintura de Conteúdo (LCP)
• Deslocamento de Layout Cumulativo (CLS)O Google marca as métricas Core Web Vitals com uma bandeira azul.

Como melhorar o desempenho do WordPress Core Web Vitals?

Se você deseja melhorar os seus resultados Google Core Web Vitals, você geralmente deve se concentrar em melhorar o desempenho do seu site.

No entanto, é importante entender que o Google não está apenas olhando para o número que você obtém ao conectar o seu site a uma ferramenta de teste de velocidade. Embora ferramentas diferentes usem medidas de teste de velocidade diferentes, a maioria das ferramentas de teste de velocidade usa alguma variação de uma métrica “totalmente carregada”.

Lembre-se – o Google não está muito preocupado com quanto tempo leva para o seu site carregar totalmente. Em vez disso, ele está mais focado em quanto tempo leva para os visitantes começarem a ter uma boa experiência (o que nem sempre significa que o seu site já está totalmente carregado).

Portanto, embora a otimização do tempo de carregamento da sua página provavelmente também tenha um efeito benéfico nos seus Core Web Vitals, você realmente precisa se concentrar mais em como o seu site carrega, não apenas em quanto tempo leva para carregar.

Por exemplo:

• O seu conteúdo “principal” está otimizado para carregar o mais rápido possível?
• Em que ordem os seus scripts e CSS são carregados?
• Você tem algum script de bloqueio de renderização?
• Você poderia embutir o CSS crítico para evitar flashes de conteúdo não estilizado?
• Você está veiculando anúncios de fontes de terceiros que causam mudanças de layout?

Infelizmente, muito disso se torna bastante técnico. Ou seja, você não pode simplesmente instalar um plug-in para consertar tudo, embora os plug-ins possam ajudar em algumas partes.

Ainda assim, o seu primeiro passo deve ser a otimização básica do WordPress, caso ainda não tenha feito isso.

Em seguida, vamos examinar algumas correções específicas para as três métricas dos Core Web Vitals.

Maior Pintura de Conteúdo (LCP)

Novamente, o LCP mede quanto tempo leva para carregar o conteúdo maior e mais importante de uma página. Normalmente, esta será sua imagem ou vídeo principal. Ou, se você não tiver uma hero image, pode ser o seu texto H1.

Uma das maiores coisas que você pode fazer aqui é usar o cache da página para servir páginas HTML estáticas em vez de construir cada página dinamicamente (leia mais sobre CDN para cache dinâmico). Outra coisa que você pode fazer é mudar para uma hospedagem com melhor desempenho.

Outras estratégias para melhorar o seu tempo de LCP são:

• Use uma rede de distribuição de conteúdo (Content Delivery Network – CDN)
• Elimine JavaScript e CSS de bloqueio de renderização
• CSS crítico embutido/CSS não crítico deferido
• Otimize e comprima imagens
• Use compressão no nível do servidor como Gzip ou Brotli

Otimize o Atraso na Primeira Entrada (First Input Delay – FID)

Novamente, o FID mede o quão responsivo e interativo o seu site é. Ele mede o tempo desde a primeira interação do usuário até o momento em que o seu site se torna responsivo.

Infelizmente, as correções aqui são todas bastante técnicas, então você pode precisar da ajuda de um desenvolvedor se a sua pontuação for fraca nesse requisito. A maioria das correções trata da otimização do JavaScript do seu site.

Otimize o Deslocamento de Layout Cumulativo (Cumulative Layout Shift – CLS)

Novamente, o CLS mede o quanto o seu conteúdo “salta” ao carregar.

Os maiores problemas com o deslocamento de layout cumulativo provavelmente virão de:

• Imagens sem dimensões
• Anúncios ou incorporações sem dimensões
• Fontes da web

Para evitar problemas com flashes de texto não estilizado ou invisíveis, você pode pré-carregar fontes importantes.

Prepare-se para os Core Web Vitals no WordPress

Goste ou não, o Google Core Web Vitals fará parte de como você otimizará o seu site WordPress (ou o do seu cliente) em 2021 e além. Portanto, não deixe que os Core Web Vitals o surpreendam. Familiarize-se agora e comece a trabalhar em maneiras de melhorar a sua pontuação.

Não só será um fator de ranking em 2021, mas também deve ajudá-lo a melhorar a experiência do usuário do seu site, o que é uma meta válida por si só.

Referencia: https://wplift.com/google-core-web-vitals-wordpress

Dar os primeiros passos na GoCache é uma tarefa bem simples, principalmente se você usa o CMS do WordPress em seu site.

No vídeo acima falamos um pouco sobre as configurações básicas dentro da GoCache para um site em WordPress.

Configurações básicas de CDN para WordPress:

Definindo os tempos de cache estático (TTL): Dentro do painel da GoCache você pode configurar seus tempos de expiração de cache (TTL) dos itens estáticos de sua aplicação (imagens, css, jss). Caso você queira aumentar sua eficiência de cache, a recomendação é utilizar tempos acima de 7 dias de TTL.

Habilitando o Smart Cache: O recurso de Smart Cache é uma facilidade da GoCache para usuários que utilizam WordPress. Basicamente, quando você ativa o Smart Cache em sua conta, a GoCache passa a fazer automaticamente cache dinâmico em sua aplicação (html, json…). Trata-se de um ótimo recurso, já que ele contribui bastante para ganhos em performance (TTFB, Start Render) e ainda dá mais poder de escala para sua aplicação.

Cache de navegador (TTL): Permitimos que você selecione o tempo de expiração de seu cache de navegador. A recomendação por aqui é manter mais de 30 dias de politica de cache, já que boa parte das ferramentas de performance consideram esses dados para formar suas notas.

Performance (Compressão GZIP e Lithio): otimizador de imagensdocumentação completaPor padrão, a compressão de GZIP está ativa para todos os sites que rodam dentro da rede de distribuição de conteúdo (CDN) da GoCache, porém, caso tenha interesse, também é possível ativar o Lithio, nosso . Caso queira aprender mais sobre o Lithio, recomendamos acessar a .

Facilite sua integração com o nosso plugin para WordPress:

Após configurar seu site em WordPress na GoCache, recomendamos a instalação de nosso plugin.

O plugin para WordPress da GoCache faz a gestão de cache de sua aplicação, limpando automaticamente seu cache quando novas publicações são feitas e permitindo que você gerencie suas politicas de cache através do seu painel do WordPress, sem a necessidade de acessar nosso painel.

Se você chegou até este artigo, provavelmente está buscando opções de plugins de cache para WordPress.

Atualmente existem diversas opções de plugins para cache no WordPress, cada um com uma característica diferente. Abaixo, listamos algumas opções que fazem cache e otimizações de código.

Jetpack: 

O Jetpack é um dos plugins mais utilizados em instalações de WordPress. O plugin permite que você aprimore a segurança de sua aplicação e melhore a performance de entrega de assets estáticos, mas deve-se levar em consideração que ativar o recurso de “Desempenho e velocidade” fará com que seus assets estáticos (imagens, js, css…) sejam entregues através de um domínio externo, o que pode comprometer seus resultados de SEO, visto que essa não é a melhor pratica.

Configurações de desempenho do JetPack

Caso você tenha interesse em utilizar o Jetpack em conjunto com a GoCache, nossa recomendação é desativar as funções “Acelerar o carregamento de imagens” e “Acelerar o carregamento de arquivos estáticos”, pois eles farão com que suas imagens sejam entregues por endereços externos.

Já a opção “ativar o carregamento lento de imagens” pode ser utilizado em conjunto com a GoCache. Basicamente, esse recurso do Jetpack é um recurso de Lazy Images. Caso queira conhecer mais, leia a documentação aqui – Documentação oficial

WP Super Cache: 

O WP Super Cache é bastante utilizado por sites em WordPress, principalmente em instalações mais antigas, já que o plugin foi destaque por muitos anos, mas acabou perdendo um pouco de relevância nos últimos anos.

Basicamente, o cache do WP Super Cache é feito de maneira local, sem obrigar que seus assets sejam servidos por um endereço externo, porém, por tratar-se de um cache local, ele não deve reduzir latência de entrega como uma CDN e nem dar escala para sua aplicação.

Caso queira utilizar em conjunto com a GoCache, recomendamos desabilitar o recurso de cache.

É possível utilizar o cache do WP Super Cache em conjunto com a GoCache, porém, está não é a melhor prática, já que adicionaríamos mais uma camada de cache na aplicação, o que pode atrapalhar bastante o dia a dia, sendo assim, a recomendação é deixar o recurso de cache desligado.

Smush: 

O Smush é uma boa alternativa de plugin para performance pois ele possibilita que você comprima imagens no processo de upload. É claro que boa parte dos usuários de WordPress reconhecem que precisam subir imagens otimizadas, mas no dia a dia, isso pode passar batido.

Compressão de imagens durante upload

Além de configurar a compactação para novas imagens enviadas, também é possível remover metadados das imagens.

Outro recurso bem legal do Smush são as opções de Lazy Load que podem ser utilizadas em conjunto com a GoCache CDN.

Lazy Load Smush

Agora, deve-se ter atenção com o recurso de CDN da Smush, pois o mesmo é cobrado em dólar e pode ser entregue por rotas fora do Brasil. Inclusive, apenas usuários do serviço de CDN da Smush podem usar o recurso de conversão para webP, sendo assim, o Smush acaba sendo um plugin muito mais indicado para otimizar o upload de imagens em sua aplicação, e não necessariamente para a entrega dos assets estáticos.

Autoptimize: 

O plugin de performance Autoptimize tem diversos recursos de de otimização de js, css e HTML que podem ser utilizados em conjunto com a GoCache, porém, é necessário ter em mente que nem todos os recursos oferecidos são recomendados, sendo assim, é necessário testar recurso por recurso para validar se as alterações do Autoptimize não vão afetar negativamente sua aplicação.

Opções de JS Autoptimize

Opções de CSS Autoptimize

O plugin da Autoptimize também disponibiliza um serviço de CDN, mas assim como citamos em outros exemplos, a CDN também passa a ser entregue por endereços externos, o que pode prejudicar seus resultados de SEO. Além disso, o serviço também é cobrado em dólar e é feito com base na quantidade de imagens entregues pela CDN do plugin. Caso queira, também é possível fazer conversão webP pelo plugin.

Opção de CDN da Autoptimize

W3 Total Cache: 

Certamente o W3 Total Cache é um dos plugins para wordpress mais conhecidos no mercado brasileiro. Ela tem recursos de cache local, minify e browser cache. Deve-se levar em consideração que o cache é feito de forma local, sem reduzir latência de entrega e sem dar escalabilidade para sua aplicação.

O recurso de cache local do W3 pode ser utilizado em conjunto com a GoCache, mas conforme citamos em outros exemplos, esse tipo de cache pode trazer problemas, já que a aplicação passa a ter mais de uma camada de itens cacheados.

W3 Page Cache

Minify W3 Cache

Browser cache W3

O W3 Total Cache também oferece recursos de CDN, mas ele atua apenas como um integrador de diferentes soluções, sendo assim, para utilizar o recurso é necessário contratar uma CDN a parte. Deve-se levar em consideração que a maior parte das soluções oferecidas pela W3 são de fora do país com cobrança em dólar.

LiteSpeed Cache: 

O plugin de cache LiteSpeed é uma boa opção para usuários que apenas necessitam fazer cache local. Trata-se de uma ferramenta com várias opções e que permite uma configuração bem ampla de regras de cache. Por lá é possível decidir o TTL de expiração de cache, cache de browser, cache por objeto e método, entre outros.

Litespeed configurações de cache

Deve-se levar em consideração que para usar o Litespeed é necessário criar um webserver com o QUIC.cloud, aumentando bastante o esforço técnico para implementação. Leia a documentação – Documentação Litespeed

WP Fastest Cache: 

Esse é provavelmente um dos plugins para cache do WordPress mais utilizados nos últimos anos. O WP Fastest cache é uma ótima opção pela facilidade de configuração. Trata-se de um plugin bem organizado e intuitivo.

Caso queira usar em conjunto com a GoCache, é possível preservar opções de Minify HTML, Minify Css, Minify JS, Combine Css, Combine Js e Lazy Load. Já outros recursos de cache são locais, o que pode trazer prejuízos quando utilizado em conjunto com a CDN.

WP Fastest Cache opções de cache e otimização de código

O WP Fastest cache também possui integrações nativas com algumas CDNs. Inclusive, também é possível configurar a GoCache dentro do WP Fastest Cache. Para isso, basta criar uma conta na GoCache, configurar sua conta em modo CNAME e utilizar o endereço de distribuição. Abaixo, compartilhamos um exemplo de como a configuração é feita:

Configuração de CDN – Custom

Além de todas as opções citadas acima, também é possível utilizar o plugin da GoCache para administrar o cache de sua CDN.

Usar o formato de imagens webP dentro do WordPress tem sido cada vez mais frequente, considerando os ganhos em performance que o formato tem trazido para diversas aplicações.

O webP é um formato de imagens desenvolvido pelo próprio Google, com o objetivo de diminuir o tamanho dos arquivos de uma aplicação e acelerar a entrega de imagens, principalmente em dispositivos móveis. Inclusive, quando avaliamos essa questão de velocidade no Brasil, entendemos que na grande maioria dos casos é essencial usar esse formato, considerando que a qualidade da conexão de banda larga e mobile muitas vezes deixa a desejar.

Um das grandes vantagens da implementação de webP no WordPress é a versatilidade do formato, já que é possível aplicar compressão, usar transparência (assim como PNG) e ainda ter suporte a animações (como em GIF).

Quais navegadores dão suporte nativo a webP?

Criado em 2010, o webP só começou a ficar popular em 2014, quando boa parte dos navegadores passou a dar suporte nativo para o formato. Atualmente, os navegadores que dão suporte nativo ao formato de webP são:

• Google Chrome Desktop (versão 17+)
• Google Chrome for Android (versão 25+)
• Microsoft Edge (versão 18+)
• Firefox (versão 65+)
• Opera (versão 11.10+)
• Browser nativo android (versão 4.0+)

Vale a pena usar webP no WordPress?

Na maioria dos casos é resposta é sim, mas é necessário levar em consideração alguns aspectos, como por exemplo, a falta de compatibilidade com navegadores Safari, frequentemente utilizados por usuários de IOS.

Por decisão da própria Apple, o navegador Safari ainda não fornece suporte nativo para o formato, sendo assim, é possível que determinadas imagens deixem de ser exibidas para usuários que utilizam esse browser.

Porém, se você utilizar um conversor de imagens em webP, é possível reunir os melhor dos dois mundos: entregar o formato webP para usuários elegíveis e para usuários de Safari, entregar imagens em formatos tradicionais, como PNG e JPG.

Por exemplo, o produto de otimização de imagens da GoCache, chamado Lithio, reconhece o navegador de cada usuários que acessa seu WordPress e decide qual o melhor formato de entrega. Isso tudo feito automaticamente e em fração de milissegundos.

Quais os ganhos em performance que o webP pode trazer para um site em WordPress?

Existem diversos estudos na internet sobre o assunto e em praticamente todos os cenários, os ganhos costumam ser bem expressivos.

O próprio Google fez um estudo em seu blog de developers em que cita reduções de 25 a 35% no tamanho de arquivos webP, quando comparados com formatos PNG e JPG.

Exemplo de otimização em webP + Compressão de imagens + Remoção de metadados com Lithio da GoCache

Já na GoCache, temos diversos casos em que nosso conversor para webP conseguiu reduzir mais de 50%. Estes ganhos vão depender muito do tamanho original da imagem e as opções de compressão.

Como implementar webP em WordPress?

No vídeo abaixo, mostramos como configurar o Lithio, nosso otimizador de imagens no WordPress (falamos sobre o assunto aos 8:20 minutos).

Por padrão, todos os sites que rodam dentro da rede da GoCache CDN podem usar nosso conversor para webP. Após a instalação de nossa ferramenta, basta acessar sua conta, clicar sobre “Configurações” e “Performance”.

Exemplo painel da GoCache – Configurações > Performance

Feito isso, você encontrará as opções de nosso otimizador de imagens, permitindo que você habilite a otimização para webP em sua instalação do WordPress.

Habilitar webP em seu WordPress

Conforme podemos ver na imagem acima, além de otimizar suas imagens para webP, também é possível selecionar outras opções de otimização de imagens que podem trazer ainda mais performance para sua aplicação, como JPEG progressivo e remoção de metadados. Além disso, é possível selecionar níveis de compressão de imagens, conforme vemos abaixo:

Níveis de compressão: Alto, médio e baixo.

Quanto maior o nível de compressão, maior a economia no tamanho do arquivo, o que consequentemente trará melhores ganhos em performance.

E caso você queira personalizar seus níveis de compressão, é possível fazer isso em Smart Rules:

Dentro do painel, selecione a opção Smart Rules

Agora, basta criar uma nova regra com critério de URL, preencher o caminho da imagem e selecionar as opções de otimização. Por exemplo, digamos que um determinado banner de seu site precise sempre ter a melhor resolução possível, enquanto o resto da aplicação pode ser comprimida. Neste caso, basta criar uma regra similar ao exemplo abaixo:

Personalizar que uma determinada URL tenha níveis diferentes de otimização

Caso você prefira, também é possível criar regras com *, que contemplam todo um patch de imagens, como por exemplo: /wp-content/uploads/* – Neste caso, tudo que estiver após /uploads/ será otimizado segundo sua personalização de regra.

Como posso validar que minhas imagens estão sendo entregues em webP?

Dentro de seu painel da GoCache, basta selecionar a aba “Analytics” e clicar sobre a opção “Otimização de Imagens”.

Dentro do painel, clique sobre Analytics e Otimização de imagens

Agora, você pode analisar algumas métricas de performance sobre a otimização de imagens em sua aplicação, conforme vemos abaixo:

Analytics – Veja informações sobre otimização de imagens

Transferência reduzida:
Total de transferência reduzida com a utilização do Lithio e porcentagem da redução ao Tráfego Original.

Tráfego Original
Total da transferência de dados se não tivesse a otimização de imagens.

Imagens Otimizadas
Total de requisições em que as imagens foram otimizadas com sucesso.

Além disso, também é possível analisar a otimização de imagens diretamente em sua aplicação. Por exemplo, se você estiver usando o Chrome ou Firefox, basta segurar CTRL + SHIFT + I. Agora, selecione a guia “Network” e “Img”.

Selecione “Network” e “img”.

Feito isso, selecione a imagem que você quer analisar, e inspecione o seu Response Header, conforme vemos abaixo:

Analise o Response Header de sua imagem

Request URL: 
No exemplo acima, é possível ver que a imagem tem uma extensão .PNG

Content-Type: 
O content-type indica qual o conteúdo de resposta. Neste caso, vemos que ele está sinalizado como image/webp, o que indica que o arquivo fonte (em PNG) foi convertido para webP.

X-GoCache-Image: 
Este é um header enviado pela GoCache para sinalizar se imagem foi otimizada ou não.

Caso precise de mais informações sobre a otimização de imagens e conversão para webP, leia nossa documentação – https://docs.gocache.com.br/lithio/