Core Web Vitals na prática
O que LCP, INP e CLS medem, por que laboratório e campo não batem e onde o WordPress reprova. Sessões no TDC Business 2023 e no webinar da Abradi.
Core Web Vitals na prática é a minha palestra sobre as três métricas que o Google usa para avaliar a experiência de página nas visitas reais: LCP, INP e CLS. Explico o que cada uma mede, por que nota de laboratório e dado de campo não batem e onde os sites WordPress costumam reprovar. Já apresentei em eventos brasileiros com títulos diferentes, o mais recente no TDC Business 2023, e falei do mesmo assunto em podcasts. Esta página reúne todas as versões, com a página oficial do evento ou a gravação de cada uma.
Onde apresentei esta palestra
| Data | Evento | Sessão | Link |
|---|---|---|---|
| 19 de setembro de 2023 | TDC Business 2023, trilha Web e Front-end | Impulsionando a Velocidade e Experiência: Desvendando os Core Web Vitals | Página da trilha |
| 27 de junho de 2023 | Webinar da Abradi (online) | Melhore a Experiência do Usuário com Core Web Vitals | Gravação |
Também conversei sobre Core Web Vitals em dois podcasts, ambos gravados:
- Performance, WordPress & Google Core Web Vitals, Martincast #102 com John Martin, 16 de maio de 2023.
- Core Web Vitals WordPress, com Seo Martin, 4 de agosto de 2021.
O que a palestra cobre
A palestra começa pelas definições, porque a maior parte da confusão sobre Core Web Vitals vem de misturar as métricas com as ferramentas. O Google avalia cada métrica no percentil 75 dos dados de campo de usuários reais do Chrome, coletados no Chrome UX Report numa janela móvel de 28 dias.
| Métrica | O que mede | Bom | Ruim |
|---|---|---|---|
| LCP | Quando a maior imagem ou bloco de texto da área visível termina de renderizar | Até 2,5 s | Acima de 4 s |
| INP | O atraso entre uma interação e o próximo quadro na tela | Até 200 ms | Acima de 500 ms |
| CLS | Quanto o conteúdo visível se mexe sem o usuário provocar | Até 0,1 | Acima de 0,25 |
O INP substituiu o First Input Delay como Core Web Vital em março de 2024, depois das sessões de 2023 listadas acima. O conteúdo desta página já usa INP.
Depois vem a parte prática:
- Por que uma nota verde no Lighthouse não muda o dado de campo que o Google usa, e como ler os dois no PageSpeed Insights.
- Como descobrir qual template e qual métrica reprovam, com o relatório de Core Web Vitals do Search Console.
- As causas mais comuns no WordPress: servidor lento sem cache de página, imagem principal com lazy load, CSS e JavaScript de tema e plugins bloqueando a renderização, scripts de terceiros e deslocamentos de layout por fontes, anúncios e embeds.
- A ordem em que eu corrijo, começando pelo que afeta todas as páginas.
Para quem é
Donos de site, times de marketing e devs que viram a avaliação de Core Web Vitals reprovada e não sabem por onde começar. A primeira metade não exige programação. A segunda mostra as correções no WordPress num nível que um dev consegue transformar direto em tarefa.
Artigos e guias relacionados
A versão escrita deste conteúdo está em Core Web Vitals no WordPress: o guia completo. Para o básico, comece por o que são Core Web Vitals, e para cada métrica veja LCP no WordPress, INP no WordPress e CLS no WordPress. Se precisa que alguém olhe o seu site, veja minha consultoria em Core Web Vitals. As outras sessões estão na página de palestras.