NextJS Core Web Vitals - medir os Core Web Vitals

Medir os Core Web Vitals no NextJS

Next.js é um framework JavaScript construído em cima do REACT que permite construir sites super-rápidos e extremamente fáceis de usar. Isso é verdade, o Next.js é bastante rápido e possui muitos recursos integrados para garantir que ele permaneça rápido. Pelo menos ....., na teoria. Com o tempo, à medida que o seu site cresce e mais recursos são adicionados, e talvez quando nem todas as melhores práticas são seguidas, as páginas do Next.js se tornarão cada vez mais lentas. É provavelmente por isso que você está visitando esta página :-)

Para medir e prevenir páginas lentas, é importante medir os Core Web Vitals e tomar medidas quando uma métrica dos Core Vitals estiver abaixo de um limite.

O que são os Core Web Vitals?

Os Core Web Vitals são o subconjunto de Web Vitals que se aplicam a todas as páginas da web, devem ser medidos por todos os proprietários de sites e aparecerão em todas as ferramentas do Google. Cada um dos Core Web Vitals representa uma faceta distinta da experiência do usuário, é mensurável no campo e reflete a experiência do mundo real de um resultado crítico centrado no usuário.

As métricas que compõem os Core Web Vitals evoluirão com o tempo. O conjunto atual para 2020 se concentra em três aspectos da experiência do usuário — carregamento, interatividade e estabilidade visual — e inclui as seguintes métricas (e seus respectivos limites):

Largest Contentful Paint (LCP): mede o desempenho de carregamento. Para fornecer uma boa experiência ao usuário, o LCP deve ocorrer dentro de 2,5 segundos após o início do carregamento da página.

First Input Delay (FID): mede a interatividade. Para fornecer uma boa experiência ao usuário, as páginas devem ter um FID de 100 milissegundos ou menos.

Cumulative Layout Shift (CLS): mede a estabilidade visual. Para fornecer uma boa experiência ao usuário, as páginas devem manter um CLS de 0,1 ou menos.

Esqueça o Lighthouse (mais ou menos)

Lighthouse é uma ferramenta de teste para os Core Web Vitals. Quase todos os clientes com os quais trabalho, em algum momento, começarão a falar sobre suas pontuações do Lighthouse e como elas não correspondem às pontuações do Search Console. A primeira coisa que digo a eles é a seguinte: esqueçam o Lighthouse. Vou explicar:

Lighthouse é uma ferramenta muito útil que coleta 'dados de laboratório' para uma visita pela primeira vez não armazenada em cache sob condições reguladas. Infelizmente, os dados coletados não refletem necessariamente os dados de campo. Os dados de campo são coletados pelo navegador toda vez que um usuário carrega uma de suas páginas. Esses dados são então enviados ao Google e usados para determinar suas pontuações reais dos Core Web Vitals. Esse processo também é chamado de monitoramento de usuários reais (RUM).

Agora, não me entenda mal: eu adoro o Lighthouse. É um software magistral e lhe dará ótimas sugestões que você provavelmente deveria implementar. O que estou dizendo é que as métricas RUM em um site Next.js não são compostas apenas por visualizações pela primeira vez sem cache e por visitantes que não interagem com seu site (o Lighthouse não interage com seu site!)

Não, os Core Web Vitals em um site Next.js são mais complicados. É por isso que uma das primeiras coisas que implemento para meus clientes é o monitoramento de usuários reais em tempo real.

Configurar o monitoramento de usuários reais em tempo real dos Core Web Vitals

Coletar os dados dos Core Web Vitals no Next.js é simples, pois o Next.js fornece um método integrado para capturar os Core Web Vitals. Tudo o que você precisa fazer é exportar a função reportWebVitals no _app.tsx e pronto.

Agora, em sites de alto tráfego, fará pouco sentido coletar todos os dados de todos os usuários. Podemos facilmente amostrar 50% ou menos desta forma:

c
export function reportWebVitals(metric: NextWebVitalsMetric) {
  if (metric.label === 'web-vital' && bInSample) {
  	console.log(metric)
  }
}

Agora, se quisermos, por exemplo, enviar as métricas dos Core Web Vitals para análises, tudo o que precisamos fazer é:

export function reportWebVitals(metric: NextWebVitalsMetric) {
  if (metric.label === 'web-vital') {
    window.gtag('event', name, {
      event_category: 'web-vital',
      value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value), // values must be integers
      event_label: metric.id, // id unique to current page load
      non_interaction: true, // avoids affecting bounce rate.
    })  
  }
}

E com a mesma facilidade podemos enviar os Core Web Vitals para qualquer back-end de análise personalizado:

  const url = 'https://example.com/custom-analytics'

  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, JSON.stringify(metric))
  } else {
    fetch(url, { JSON.stringify(metric), method: 'POST', keepalive: true })
  }
}

Agora lembre-se de que, ao ler os dados RUM para os Core Web Vitals, você precisa usar o 75º percentil.

Ferramentas de terceiros que coletam os Core Web Vitals no Next.js

Existem algumas ferramentas de terceiros que coletam os Core Web Vitals no Next.js. Por exemplo, NewRelic e Sentry. Agora, como um especialista em Core Web Vitals, não sou um fã. O Sentry dispara algumas solicitações de alta prioridade no início do processo de renderização e o NewRelic também diminui consideravelmente a velocidade do seu site. Dito isso, entendo a importância de tais ferramentas e se você já usa uma dessas ferramentas, elas farão um ótimo trabalho coletando e relatando os Core Web Vitals.s