SparkCore
Melhorar as Core Web Vitals com multimédia mais leve
O LCP e o CLS dependem muitas vezes de imagens pesadas. Ficheiros mais pequenos e dimensões fixas ajudam de imediato.
Em resumo
- Bom é: LCP de 2,5 segundos ou menos, INP de 200 milissegundos ou menos, CLS de 0,1 ou inferior.
- As imagens afetam sobretudo o LCP e o CLS; o INP depende mais do JavaScript.
- Nunca aplique lazy load à primeira imagem grande e indique width e height em todas as imagens.
Ganhos rápidos
- Comprima as imagens de destaque e as fotografias de produto
- Use formatos modernos
- Evite carregamentos de imagens sobredimensionadas
O que são as Core Web Vitals e que pontuações são boas?
As Core Web Vitals medem como uma página é sentida pelos visitantes. O LCP mede a rapidez com que aparece o maior elemento visível. O INP mede a rapidez com que a página reage a cliques e toques. O CLS mede quanto o layout se desloca durante o carregamento. Uma boa pontuação é um LCP de 2,5 segundos ou menos, um INP de 200 milissegundos ou menos e um CLS de 0,1 ou inferior. Meça de preferência com dados de visitantes reais, e não apenas com um teste de laboratório.
- LCP: 2,5 segundos ou menos
- INP: 200 milissegundos ou menos
- CLS: 0,1 ou inferior
Como melhorar o LCP no WordPress?
Em muitas páginas, o elemento do LCP é uma imagem grande, como uma imagem de destaque ou uma fotografia de produto. Torne esse ficheiro o mais pequeno possível e sirva-o num formato moderno. Não lhe aplique lazy load: está logo à vista e tem de começar a carregar de imediato. Um servidor rápido e a cache de página reduzem o tempo de espera pelo primeiro byte, e isso também conta para o LCP. Além disso, não carregue uma imagem muito maior do que o espaço onde é apresentada.
- Comprima a imagem de destaque e as fotografias de produto
- Use WebP ou AVIF com uma alternativa (fallback)
- Não ative o lazy loading na primeira imagem
Como evitar a mudança de layout (CLS) com imagens?
A mudança de layout surge quando o navegador não conhece o tamanho de uma imagem. O texto desce de repente assim que a imagem chega. Por isso, indique um width e um height em cada imagem. O navegador reserva então o espaço certo antes do carregamento. O WordPress costuma acrescentar estes atributos por si às imagens da biblioteca de multimédia. Verifique, no entanto, os seus próprios blocos, componentes do tema e código. Reserve também espaço para banners, anúncios e tipos de letra que carregam mais tarde.
O que se pode fazer quanto ao INP e onde ajuda a cache?
O INP depende sobretudo do JavaScript. Os scripts pesados de temas, plugins e rastreadores mantêm o thread principal ocupado. Remova o que não usa e adie o carregamento do resto. As imagens têm aqui um papel pequeno. A cache ajuda sobretudo no LCP. Uma página em cache fica pronta mais depressa, e uma CDN aproxima os ficheiros do visitante. Meça de novo após cada alteração e ajuste uma coisa de cada vez, caso contrário não saberá o que funcionou.
Perguntas frequentes
Normalmente o LCP, porque o maior elemento é muitas vezes uma imagem. Comprima esse ficheiro, escolha um formato moderno e não lhe aplique lazy load. A seguir vem o CLS: indique width e height em cada imagem.
Não. O lazy loading destina-se a imagens abaixo da dobra. O WordPress aplica automaticamente loading lazy às imagens. A primeira imagem grande, muitas vezes o elemento do LCP, deve carregar logo, caso contrário o LCP fica mais lento.
As imagens são apenas parte da história. Alojamento lento, scripts pesados, páginas sem cache e um layout que se desloca também pesam. Veja no seu relatório, por métrica, que elemento ou script é a causa.