Performance Metrics - LCP

[alejandronanez]

Hey there, I started to dig into Measuring Performance and I was expecting to get the LCP (Largest Contentful Paint) right after the page was completely loaded. But instead, I got nothing printed in the console, unless I scroll or interact with the page in some way.

Is this expected for LCP? I don't have anything special in my app, the only thing I have is:

// app.js
export function reportWebVitals(metric) {
  if (metric.name === 'LCP') {
    console.log(metric);
  }
}

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

// pages/index.js
export default function Home() {
  return (
    <>
      <img src="https://www.yourtrainingedge.com/wp-content/uploads/2019/05/background-calm-clouds-747964.jpg" />
      // More dummy components...
    </>
  )
}

Demo video

https://www.loom.com/share/92b10e58bdd5452180e12a934002b4e1

[jamesmosier]

That is to be expected, per the web-vitals package that Next uses.

Note: some of these metrics will not report until the user has interacted with the page, switched tabs, or the page starts to unload. If you don't see the values logged to the console immediately, try switching tabs and then switching back.

[alejandronanez]

Oh I see, thanks for the link to the official documentation @jamesmosier! 🙌