Como Melhorar a Pontuação dos Seus Core Web Vitals

O que são os Core Web Vitals

Os Core Web Vitals são um conjunto de métricas que o Google utiliza para medir a experiência do utilizador nas páginas web. Desde 2021, estas métricas são um fator de classificação na pesquisa do Google, o que significa que um site com melhores Core Web Vitals tem vantagem nos resultados de pesquisa face a um site com pontuações inferiores. Com esta medida, o Google deixou claro que a experiência do utilizador não é apenas uma questão de design, mas um parâmetro técnico mensurável que afeta a visibilidade na pesquisa.

As três métricas principais são o Largest Contentful Paint, que mede a velocidade de carregamento, o Interaction to Next Paint, que mede a capacidade de resposta às ações do utilizador, e o Cumulative Layout Shift, que mede a estabilidade visual da página. Cada métrica tem limiares definidos para pontuações boas, que precisam de melhoria e fracas. O objetivo é que 75 por cento das visitas à página tenham boas pontuações nas três métricas. Compreender cada métrica e as técnicas de otimização é a chave para alcançar pontuações elevadas.

Largest Contentful Paint (LCP)

O que o LCP mede

O LCP mede o tempo necessário para que o maior elemento visível da página seja carregado na viewport. Esse elemento é normalmente uma imagem hero, um grande título ou o poster de um vídeo. Uma boa pontuação é um LCP abaixo de 2,5 segundos; entre 2,5 e 4 segundos exige melhoria; e acima de 4 segundos é uma pontuação fraca. O LCP é a métrica mais importante para a perceção de velocidade, porque os utilizadores consideram uma página carregada quando veem o conteúdo principal, independentemente de todos os elementos terem terminado de carregar.

Otimização de imagens

As imagens são a causa mais comum de um LCP fraco, porque são normalmente o maior elemento da página. Utilize formatos modernos como WebP ou AVIF, que oferecem a mesma qualidade de imagem com um tamanho de ficheiro 25 a 50 por cento menor em comparação com o JPEG. Defina as dimensões da imagem para o tamanho exato em que é apresentada, em vez de enviar uma imagem de 4000 píxeis para ser exibida a 800 píxeis. Imagens responsivas com o atributo srcset permitem que o browser escolha o tamanho ideal para cada dispositivo.

O hint de preload para a imagem LCP diz ao browser para começar a transferir a imagem o mais cedo possível, sem esperar que o parser chegue à tag img. Adicione link rel preload as image href caminho-da-imagem na secção head da página. Para imagens hero acima da dobra, utilize o atributo fetchpriority high, dando prioridade à transferência face a outros recursos. Evite o carregamento diferido para a imagem LCP, porque atrasa o seu carregamento.

Tempo de resposta do servidor

O Time to First Byte afeta diretamente o LCP, porque o conteúdo não pode começar a carregar até o servidor responder. Um TTFB abaixo de 200 milissegundos é o objetivo para um desempenho ideal. Utilize um CDN para distribuir conteúdo a partir de um servidor geograficamente mais próximo do visitante. O caching no lado do servidor com Redis ou Memcached elimina a necessidade de regenerar a página a cada pedido. Na BeoHosting, os nossos servidores com discos SSD e configuração otimizada oferecem um TTFB baixo em todo o país.

Interaction to Next Paint (INP)

O que o INP mede

O INP substituiu o First Input Delay em março de 2024 como métrica de capacidade de resposta. Enquanto o FID media apenas o atraso do primeiro clique, o INP mede a capacidade de resposta de todas as interações ao longo de toda a visita à página e considera a pior interação. Uma boa pontuação é um INP abaixo de 200 milissegundos. O INP mede o tempo desde a ação do utilizador, como clique, toque ou pressão de tecla, até à atualização visual seguinte do ecrã, o que inclui o processamento do event handler, o cálculo do layout e a renderização.

Otimização de JavaScript

Tarefas longas de JavaScript bloqueiam a thread principal e impedem o browser de responder às interações do utilizador. Divida as tarefas longas em partes mais pequenas usando técnicas como o yielding com scheduler.yield ou setTimeout. O code splitting com import dinâmico carrega apenas o JavaScript necessário para a página atual em vez de todo o bundle. O tree shaking elimina o código não utilizado do bundle final, reduzindo o tamanho e o tempo de parsing.

Scripts de terceiros como analytics, widgets de chat e código publicitário são uma causa comum de um INP fraco, porque são executados na thread principal e bloqueiam as interações do utilizador. Carregue-os de forma assíncrona com os atributos async ou defer e atrase a sua inicialização até o utilizador interagir com a página. Os Web Workers permitem executar operações computacionalmente intensivas fora da thread principal, libertando-a para as interações do utilizador.

Debouncing e throttling

Event handlers que são executados a cada pressão de tecla, movimento do rato ou evento de scroll podem degradar significativamente o INP. O debouncing atrasa a execução da função até o utilizador parar a ação, por exemplo 300 milissegundos após o último caráter num campo de pesquisa. O throttling limita a frequência de execução, por exemplo uma vez a cada 100 milissegundos para um handler de scroll. Ambas as técnicas reduzem o número de execuções dos event handlers e libertam a thread principal para processar as interações do utilizador.

Cumulative Layout Shift (CLS)

O que o CLS mede

O CLS mede a estabilidade visual da página quantificando o quanto os elementos se deslocam inesperadamente durante o carregamento. Uma boa pontuação é um CLS abaixo de 0,1. Um layout shift acontece quando um elemento visível muda de posição de um frame renderizado para outro sem ação do utilizador. As causas típicas são imagens sem dimensões definidas, fontes que carregam tarde, conteúdo inserido dinamicamente acima da área visível e anúncios que carregam com atraso.

Dimensões para imagens e vídeo

Defina sempre os atributos width e height nos elementos img e video. Isto permite que o browser reserve espaço antes de o recurso carregar, evitando o deslocamento do conteúdo abaixo. A propriedade CSS aspect-ratio é uma alternativa moderna que calcula automaticamente as dimensões com base na proporção definida. Para imagens responsivas, utilize CSS max-width 100 por cento e height auto juntamente com os atributos HTML definidos de width e height que garantem a proporção exata.

Estratégia de carregamento de fontes

As web fonts que carregam tarde podem causar efeitos FOIT ou FOUT que deslocam o conteúdo. O font-display swap apresenta imediatamente a fonte de fallback e substitui-a pela web font quando esta carrega, mas essa substituição pode causar layout shift se as fontes diferirem significativamente nas dimensões. O hint de preload para fontes críticas acelera o seu carregamento. O descritor size-adjust na declaração font-face alinha as dimensões da fonte de fallback com a web font, minimizando o deslocamento na substituição.

Conteúdo dinâmico

Anúncios, banners de cookies, notificações e conteúdo inserido dinamicamente são causas comuns de CLS porque ocupam espaço que desloca o resto da página. Reserve espaço para os anúncios com a propriedade CSS min-height ainda antes de o código do anúncio carregar. Coloque o banner de cookies no topo ou no fundo do ecrã com posição fixa para que não desloque o conteúdo abaixo. Para conteúdo carregado de forma assíncrona, como sliders ou infinite scroll, utilize placeholders skeleton que ocupam o mesmo espaço que o conteúdo final.

Ferramentas de medição

Dados de laboratório

O Google Lighthouse no Chrome DevTools oferece a medição em laboratório dos Core Web Vitals no seu computador. O PageSpeed Insights combina dados de laboratório e de campo e dá recomendações concretas de otimização. O WebPageTest oferece uma visão mais aprofundada com diagramas waterfall, visualização do carregamento em filmstrip e a possibilidade de testar a partir de diferentes localizações e dispositivos. O Lighthouse CI permite a medição automática do desempenho a cada deploy como parte do pipeline de CI/CD.

Dados de campo

O Chrome User Experience Report fornece dados reais sobre os Core Web Vitals de utilizadores reais do browser Chrome. O Google Search Console apresenta um relatório de Core Web Vitals para o seu site com a identificação dos URLs que precisam de melhoria. A biblioteca JavaScript Web Vitals do Google permite recolher métricas dos seus visitantes e enviá-las para um sistema de analytics. Os dados de campo são mais importantes do que os dados de laboratório porque refletem a experiência real do utilizador em diferentes dispositivos e redes.

Impacto do alojamento nos Core Web Vitals

Desempenho do servidor

A qualidade do alojamento afeta diretamente o TTFB e, consequentemente, o LCP. O alojamento partilhado com servidores sobrecarregados pode resultar num TTFB superior a um segundo, o que torna praticamente impossível alcançar um bom LCP. Discos SSD, RAM suficiente e uma configuração de servidor otimizada são o mínimo para um bom desempenho. A versão 8.2 do PHP ou mais recente com OPcache acelera significativamente a execução do código PHP em comparação com versões mais antigas.

Na BeoHosting, os nossos pacotes de alojamento otimizados estão afinados para os Core Web Vitals com discos NVMe SSD, suporte HTTP/2 e HTTP/3, compressão Brotli e caching ao nível do servidor. O servidor web LiteSpeed que utilizamos oferece um desempenho superior em comparação com o Apache, especialmente para sites WordPress com o plugin LiteSpeed Cache. A nossa infraestrutura garante baixa latência para os visitantes locais, melhorando diretamente as métricas TTFB e LCP.

Conclusão

A otimização dos Core Web Vitals exige uma abordagem sistemática, com foco nas imagens e no servidor para o LCP, na otimização de JavaScript para o INP e na estabilidade visual para o CLS. Utilize ferramentas de medição para identificar páginas problemáticas e acompanhar o progresso após cada otimização. A combinação de alojamento de qualidade, código otimizado e caching corretamente configurado pode melhorar significativamente as três métricas e garantir melhores posições na pesquisa do Google.