
Os Core Web Vitals são uma coleção de métricas para medir a qualidade da experiência do usuário em sites. O Google os considera como sinais de classificação e, portanto, eles também são importantes para SEO (multilíngue). Se você os negligenciar, corre o risco de ser rejeitado tanto pelos visitantes quanto pelos mecanismos de pesquisa.
Para evitar esse cenário, nesta publicação, você aprenderá tudo o que precisa saber sobre como melhorar essas métricas em seu site multilíngue. Explicaremos o que são os Core Web Vitals, como testar o desempenho atual do seu site e instruções passo a passo sobre como melhorar cada uma das métricas do seu site.
Conforme mencionado, os Core Web Vitals medem a experiência do usuário em sites. Todos eles estão de alguma forma relacionados à velocidade de carregamento e à interatividade do site. As métricas foram introduzidas pelo Google em 2020 e se tornaram parte de seu algoritmo de pesquisa. Vamos examiná-las uma a uma.
O primeiro é o Largest Contentful Paint (LCP). Ele mede o tempo que uma página leva para carregar até se tornar visível e utilizável. Ele determina isso detectando o maior elemento de conteúdo de uma página da Web, que geralmente é uma imagem ou um bloco de texto, e quando ele se torna visível para os visitantes.

Esse intervalo é medido em segundos e usado como a pontuação LCP. O Google definiu uma série de pontos de corte para definir o tipo de tempo que seu site deve atingir.

Como você pode ver acima, uma boa pontuação é de até 2,5 segundos para o carregamento do elemento LCP. Até 4 segundos é aceitável, mas deve ser melhorado, e qualquer coisa além disso o Google considera muito longo.
A próxima métrica rastreia a estabilidade do layout de um site enquanto ele é carregado, ou seja, quanto movimento ele mostra quando novos elementos aparecem na página. Ela é chamada de deslocamento cumulativo de layout (Cumulative Layout Shift ou CLS).
Por que isso é importante?
Um alto grau de CLS pode atrapalhar a interação do usuário com o seu site. Além de simplesmente não ter uma boa aparência, ele também pode fazer com que o usuário perca seu lugar na página devido ao texto em movimento ou fazer com que ele clique acidentalmente no elemento errado porque ele se desloca no momento errado.
O CLS é calculado observando-se o quanto o layout se move durante o carregamento, bem como o tamanho desses movimentos. Essas duas proporções são multiplicadas uma pela outra para obter a pontuação.

Uma pontuação CLS abaixo de 0,1 é boa; até 0,25 precisa ser melhorada e qualquer valor acima disso é inaceitável.
Uma observação: o movimento da página dentro de 500 ms da interação do usuário com a página (como um clique) não afetará a pontuação do CLS. Esses movimentos são considerados propositais.
Interaction to Next Paint ou INP é a mais recente adição de métricas do Core Web Vitals. Ele substituirá o First Input Delay (FID), uma das medições originais, em março de 2024.
Ambos rastreiam o tempo entre o momento em que um visitante interage com um elemento da página e a rapidez com que ele responde. Obviamente, quanto mais rápida for a reação, melhor.
Enquanto o atraso na primeira entrada analisa apenas a primeira interação do visitante, o Interaction to Next Paint rastreia todos os envolvimentos da página durante uma visita e mostra a pior pontuação. Dessa forma, você tem uma visão mais precisa da capacidade de resposta da página.
Qual é uma boa pontuação do INP a ser atingida?
Até 200 ms é bom, e até 500 ms é justo; qualquer coisa além disso afetará negativamente a visão do Google sobre seu site.

Depois que você souber exatamente o que são os Core Web Vitals, a próxima pergunta lógica é: como descobrir a situação do seu site? A maneira mais fácil de descobrir é usar uma ferramenta de teste de velocidade como o PageSpeed Insights.

Basta inserir o URL do seu site na parte superior e executar o teste. Uma vez concluído, ele não apenas informa se o seu site foi aprovado na avaliação do Core Web Vitals, mas também fornece valores para cada um dos pontos de dados mencionados.

Se disponível, você obtém uma combinação de resultados da vida real e de laboratório. Isso inclui informações do CrUX, em que o Google coletou dados de usuários de sites do navegador Chrome. Se eles não tiverem isso, você obterá apenas medições do Lighthouse, que as calcula ad hoc.
Outras ferramentas que podem lhe informar sobre o desempenho do Core Web Vitals são GTmetrix, WebPageTest ou a extensão Chrome Web Vitals.
Então, o que você deve fazer se seus valores não forem tão bons? Vamos falar sobre isso agora.
A partir de agora, veremos explicações passo a passo sobre como melhorar cada métrica do Core Web Vital em seu site multilíngue. Abordaremos como fazer isso manualmente, além de uma maneira fácil de fazer isso para usuários do WordPress com a ajuda do plug-in WP Rocket.
O WP Rocket torna muito fácil para pessoas sem conhecimento técnico implementar melhorias sofisticadas de desempenho de forma rápida e sem esforço. Ele é facilmente um dos plug-ins de cache mais avançados e fáceis de usar para iniciantes.
Vamos começar com algumas dicas gerais sobre como garantir que seu site carregue rapidamente:
As dicas acima estabelecerão uma boa base para um desempenho geralmente rápido antes de você adotar medidas mais específicas.
Há dois caminhos principais para aprimorar o Largest Contentful Paint: otimizar a velocidade de carregamento da página em geral (conforme abordado acima) e tornar mais rápida a entrega de seus elementos LCP.
Qual é o seu elemento LCP? O PageSpeed Insights lhe dirá isso em Diagnóstico.

O armazenamento em cache e a compactação são duas técnicas fundamentais para melhorar o desempenho do site. A primeira significa armazenar dados de páginas renderizadas para acelerar o acesso dos visitantes. Ela é especialmente eficaz quando se usa o WordPress para alimentar seu site.
Por quê?
Em um CMS como o WordPress, as páginas geralmente são criadas dinamicamente a partir do código PHP e do conteúdo extraído de um banco de dados. O servidor as transforma em documentos HTML e as envia para o navegador.
O armazenamento em cache acelera esse processo ao armazenar versões HTML pré-renderizadas de suas páginas da Web no servidor para que você possa enviá-las diretamente aos visitantes. Isso pode eliminar várias viagens de ida e volta por visita e tornar a experiência do usuário muito mais rápida e melhor.
A compactação, por outro lado, é o mesmo que criar arquivos zip, só que isso acontece em um servidor em vez de no seu computador doméstico. Ela reduz os arquivos que compõem um site para que eles possam ser baixados e exibidos mais rapidamente.
Para ativar o cache e a compactação em seu servidor, você precisa editar um arquivo chamado .htaccess. Ele contém diretrizes importantes para a funcionalidade do seu servidor da Web e geralmente se encontra no diretório raiz do seu site.

Você pode copiar e colar o código a seguir nele para ativar as duas técnicas de otimização de velocidade mencionadas anteriormente:
Os dois trechos de código são cortesia da GTmetrix e funcionam para servidores Apache. Você pode encontrar instruções para outros servidores, como o NGINX, on-line, por exemplo, neste tutorial do KeyCDN.
Se isso parecer intimidador, você pode conseguir o mesmo usando o plug-in WP Rocket mencionado anteriormente. Aqui, você só precisa instalar e ativar o plug-in - ele implementa a compactação e o armazenamento em cache automaticamente, inclusive para dispositivos móveis.

Tudo o que você puder fazer para otimizar a entrega e o processamento do código do seu site ajudará a melhorar o Largest Contentful Paint em seu site multilíngue. Vamos examinar algumas boas opções para isso:
Para a minificação manual, você pode usar ferramentas como Minifier ou Grunt. A otimização do CSS e do JavaScript geralmente significa muita análise do que está impedindo o carregamento de suas páginas. As ferramentas de teste de velocidade permitirão que você saiba quais são os scripts problemáticos.

Depois disso, cabe a você adicionar manualmente as tags defer e async a eles. Elas têm a seguinte aparência:
Você também pode dividir alguns códigos para carregar apenas o que é essencial no início. Falaremos mais sobre isso abaixo, quando falarmos sobre a otimização do INP.
Se você quiser automatizar esses processos, o WP Rocket pode reduzir o código, remover o CSS não utilizado, adiar o JavaScript e carregá-lo de forma assíncrona simplesmente marcando algumas caixas.

A otimização de imagens significa reduzir o tamanho dos elementos visuais em seu site sem comprometer a qualidade. Esse é um ótimo aprimoramento geral do desempenho e ajuda especialmente a melhorar o Largest Contentful Paint, pois as imagens geralmente acabam sendo os elementos LCP.
Como você pode otimizar as imagens em seu site?
Você pode usar ferramentas como o TinyPNG para compactar imagens e convertê-las em outros formatos de arquivo. Algo como o Image Resizer também pode cortá-las em qualquer dimensão que você precisar. Você também encontra opções para isso no WordPress em Configurações > Mídia.

Além disso, se você estiver executando a versão mais recente do WordPress (ou qualquer versão posterior à 5.4), seu site deverá ter o carregamento lento ativado por padrão.
Se você quiser uma solução automática, existe o Imagify. É um plugin de otimização de imagens fácil que funciona bem com o WP Rocket. Ele pode processar automaticamente suas imagens para torná-las mais leves e, ao mesmo tempo, equilibrar qualidade e desempenho. O plug-in converte seus recursos visuais em WebP e Avif, redimensiona imagens grandes e exibe automaticamente as versões otimizadas em seu site do WordPress.

Além disso, o WP Rocket oferece carregamento lento não apenas para imagens, mas também para planos de fundo CSS e mídia incorporada, como vídeos. Além disso, você pode excluir a mídia do carregamento lento quando fizer sentido.

Uma rede de distribuição de conteúdo (CDN) consiste em vários computadores interconectados, localizados em diferentes áreas do mundo, que contêm os arquivos do seu site. Sua finalidade é entregá-los aos seus visitantes a partir do local mais próximo a eles e fazer isso o mais rápido possível. Isso é especialmente importante para sites multilíngues com um público internacional.
Por esse motivo, Weglot configura automaticamente uma CDN para que você possa entregar seu conteúdo traduzido rapidamente em todo o mundo. Se você não for usuário Weglot , geralmente precisa se inscrever em uma CDN e configurá-la para seu site. Isso é diferente de provedor para provedor; aqui estão instruções de exemplo.
Se você quiser ajuda, o WP Rocket tem complementos dedicados para o Sucuri e o Cloudflare, duas soluções populares. Eles tornam mais rápida e fácil a configuração dessas redes de distribuição de conteúdo para seu site.

Você também pode ativar outras redes nas configurações de CDN fornecendo o CNAME do seu provedor.

Por fim, o WP Rocket também tem sua própria rede, chamada RocketCDN, que você pode configurar automaticamente de dentro do plug-in. Além disso, a capacidade do WP Rocket de reduzir os arquivos de código pode reduzir o tráfego e os custos da CDN.
O próximo item da nossa lista de Core Web Vitals a ser aprimorado em seu site multilíngue é o CLS. Veja como você pode garantir o sucesso nesse departamento.
Um dos maiores fatores das pontuações ruins do CLS geralmente são as imagens sem atributos de altura e largura definidos.
Se você não informar o tamanho que uma imagem terá na página final, o navegador não poderá reservar a quantidade certa de espaço para ela. Como consequência, quando o tamanho real é diferente do espaço reservado, a imagem aparece repentinamente, empurrando para baixo tudo o que está abaixo dela. Isso pode acontecer especialmente com a mídia de carregamento lento, que não é exibida ao carregar a página pela primeira vez.
Portanto, a primeira regra para otimizar o CLS é adicionar definições de altura e largura às suas imagens. Como fazer isso?
Em HTML puro, ele tem a seguinte aparência:
Se estiver usando o editor de blocos do WordPress, ele deve definir as dimensões automaticamente, mas você também pode definir tamanhos específicos ao criar seu conteúdo.

Além disso, o WP Rocket tem uma opção para adicionar declarações de largura e altura ausentes aos seus arquivos de mídia, caso você tenha perdido alguma.

A mesma regra acima também se aplica ao conteúdo dinâmico, como elementos incorporados ou anúncios. Eles também precisam de definições de altura e largura para evitar a movimentação do restante do layout da página.
O problema aqui é que nem sempre é possível controlar o tamanho desses elementos, pois eles geralmente vêm de fontes de terceiros. Nesse caso, é uma boa prática fazer pelo menos uma estimativa para reservar o espaço. Mesmo que o elemento final acabe sendo maior, a mudança não será tão pronunciada, levando a uma pontuação CLS mais baixa.
No WordPress, o editor também adiciona automaticamente largura e altura ao conteúdo incorporado. Além disso, conforme mencionado, o WP Rocket vem com uma opção de carregamento lento da mídia incorporada. Isso reserva automaticamente o espaço necessário para quando elas forem carregadas.
As fontes também podem causar mudanças de layout, especialmente quando você usa fontes personalizadas em seu site. Os dois problemas mais comuns aqui são:
Você pode evitar esses problemas com as seguintes estratégias:
Se você estiver usando o WP Rocket, o plug-in vem com uma opção para pré-carregar arquivos de fonte. Tudo o que você precisa fazer é inserir o caminho onde eles estão localizados.

A propósito, parte da otimização de fontes para um site multilíngue também é usar fontes compatíveis com alfabetos diferentes. Isso é especialmente verdadeiro se você oferecer idiomas RTL (escritos da direita para a esquerda) em seu site.
Por conteúdo dinâmico, queremos dizer elementos que aparecem depois que uma página termina de carregar. Exemplos disso incluem imagens de carregamento lento, banners, formulários etc.
Para manter baixo o impacto na pontuação do CLS, siga as mesmas orientações acima:
Weglot propósito, Weglot é totalmente capaz de traduzir conteúdo dinâmico. Portanto, você não precisa se preocupar com o fato de os membros do seu público não o entenderem.
Por fim, vamos falar sobre como você pode garantir que seu INP esteja no ponto.
O JavaScript geralmente é um dos principais fatores quando se trata de problemas com o Interaction to Next Paint, especialmente as chamadas "tarefas longas". Essas são tarefas de JavaScript que levam mais de 50 ms para serem concluídas e podem bloquear a capacidade do navegador de processar as interações do usuário na página. Além disso, ter muitos scripts em seu site em geral pode impedir a capacidade de resposta das páginas.
Já falamos sobre como você pode otimizar o JavaScript na seção LCP. Para o INP, é especificamente importante que você lide com tarefas longas em seu site. Se elas existirem, você poderá encontrá-las nas ferramentas de desenvolvedor do Chrome. Elas são marcadas com pequenos triângulos vermelhos.

Veja se você pode dividi-los em partes menores que podem ser carregadas consecutivamente sem bloquear permanentemente a thread principal do navegador. Você pode encontrar informações detalhadas sobre isso neste tutorial do web.dev. A redução, o adiamento, a assincronização e a remoção de código desnecessário também ajudam a manter o navegador responsivo à interação do usuário.
Se você estiver usando o WP Rocket, o plug-in permite que você faça configurações detalhadas de quais arquivos JavaScript você deseja atrasar o carregamento e quais não deseja.

Tudo o que se aplica ao JavaScript também é válido para o CSS. O download e o processamento de folhas de estilo podem manter o navegador ocupado e atrasar sua reação à entrada do usuário.
Aqui, você também pode usar ferramentas de teste de velocidade para encontrar CSS não utilizado. Além disso, você pode dividir suas folhas de estilo para carregar primeiro o CSS crucial ou colocá-lo em linha.
Conforme mencionado, o WP Rocket tem opções para remover automaticamente o CSS não utilizado.

Já falamos sobre o lazy loading para otimização de imagens. Ele também pode ter um impacto positivo no INP, pois libera recursos do navegador para reagir à entrada do usuário. Siga as instruções acima para implementá-lo.
Weglot propósito, se estiver tendo problemas com a tradução de imagens de carregamento lento, Weglot, por padrão, traduz os URLs de imagem adicionados aos atributos data-src ou srcset. Se seu carregamento lento usar atributos personalizados, Weglot não os traduzirá imediatamente - você terá de adicionar um filtro PHP, que é específico para integrações do WordPress.
Se estiver usando a integração Weglot JavaScript e/ou ainda não conseguir traduzir suas imagens, entre em contato com o suporte para obter mais informações.
Os Core Web Vitals são um importante indicador de qualidade para a usabilidade do seu site multilíngue. Além de os visitantes se preocuparem com esse tópico, os Core Web Vitals também afetam as classificações de pesquisa. Por esse motivo, otimizar seu site para eles é algo que deve ser levado a sério.
Como você provavelmente já viu acima, isso não é tão difícil. Trata-se principalmente de garantir que suas páginas da Web carreguem rapidamente e permaneçam estáveis e responsivas durante esse período. Há algumas medidas importantes que você pode tomar para isso, as quais abordamos em detalhes acima.
Se você acha que lidar com códigos e arquivos de sites está além de suas capacidades, também pode optar por uma solução de plug-in como o WP Rocket. Ele pode otimizar seu site para você sem a necessidade de desenvolvimento ou habilidades técnicas e faz grande parte do trabalho por padrão.
A melhor maneira de compreender o poder do Weglot experimentá-lo você mesmo. Teste-o gratuitamente e sem qualquer compromisso.
A melhor maneira de compreender o poder do Weglot experimentá-lo você mesmo. Teste-o gratuitamente e sem qualquer compromisso.
Um site de demonstração está disponível no seu painel de controle, caso ainda não esteja pronto para conectar o seu site.