Largest Contentful Paint
O que é o LCP ?
A métrica Largest Contentful Paint (LCP) informa o tempo de renderização da maior imagem ou bloco de texto visível na janela de visualização (viewport), em relação a quando a página começou a carregar pela primeira vez.
Os sites devem se esforçar para ter uma Largest Contentful Paint de 2,5 segundos ou menos, um bom limite para medir é o 75% de carregamentos de página, em dispositivos móveis e desktop.
Que elementos são considerados ?
img, svg e video, URL e elementos de texto.
Otimizando o LCP
fetchpriority
O atributo fetchpriority permite que você especifique a prioridade de carregamento de um recurso. Isso pode ser útil para recursos que você sabe que são críticos para o carregamento da página, mas que não são críticos para o conteúdo principal.
<img src="https://example.com/image.jpg" fetchpriority="high">Detectar o elemento LCP no NextJS
Measuring performance with Next.js (opens in a new tab)
// pages/_app.js
export function reportWebVitals(metric: any) {
switch (metric.name) {
case 'FCP':
// handle FCP results
break
case 'LCP':
// handle LCP results
break
case 'CLS':
// handle CLS results
break
case 'FID':
// handle FID results
break
case 'TTFB':
// handle TTFB results
break
case 'INP':
// handle INP results (note: INP is still an experimental metric)
break
default:
break
}
}// next.config.js
const nextConfig = {
experimental: {
webVitalsAttribution: ['FCP', 'LCP', 'CLS', 'FID', 'TTFB', 'INP'],
}
}