Fishbrain Engineering Blog

Performance improvements in a Next.js page

When improving the performance, web vitals take a vital place. In this article we are mainly looking at the LCP score.

- 3 min read

Are web vitals necessary?

From Google monthly user experience data, between May and October 2021, overall Core web vitals compliance increased by 58 per cent worldwide.

  • Largest Contentful Paint – 44 per cent compliance
  • Cumulative Layout Shift – 71 per cent met requirements
  • First Input Delay – 91 per cent compliance

So obviously if you're not optimizing for core web vitals, you are definitely in the minority.


In the Fishbrain web application, we're doing fine with the FID and CLS scores as you can see in the title image. But the LCP score is quite hight compared to the standard time (2.5s).

LCP score margin

Identifying the LCP of a page

There are a few ways we can identify the LCP of a page. One easy way is to use the Performance Insights tab in Google Chrome. Once you click the "Measure page load" button it will run for a few seconds and then it will show some details related to performance. On the right side of the tab, you will be able to see web vitals and once you hover LCP it will highlight the LCP content of the page.

Google Chrome Performance Insights

Improve the performance of an image

Once we identify the LCP element of the page, we can try to make sure it loads relatively fast. Since in this case, it's an image, we can load the image in "eager" mode instead of "lazy" mode.

<img src="imageUrl" loading="eager" />

Since eager is the default value for the loading attribute, in this case we can remove the loading prop as well.

This Article from our blog also explains how we have improved the overall performance of the images.

Preload the LCP image

Preloading the image inside next/head is another effective way to improve the LCP score.

  <link rel="preload" href={imageUrl} as="image" />

This will ask the browser to load the image upfront even before it discovers the image element.

Next.js Dynamic imports

For testing a single page (url) performance, is a great tool. After measuring the performance with this tool, it provides us with some useful methods on how to improve our web vitals scores. One of the methods it suggests is to reduce the initial response time. For this we could use Next.js dynamic imports. It's a handy way to load components and libraries only when those are needed. Therefore we could use the dynamic imports when we are loading components conditionally. This will also slightly reduce the build size.

const DynamicCatchesSection = dynamic(async () =>
  title="This is title"


Before: Lighthouse Performance Desktop Before

After: Lighthouse Performance Desktop After As you can see, our performance is quite good and the LCP score in particular has improved a lot compared to the earlier version.

Note: The performance is tested in Lighthouse using Desktop mode. Scores can be different from time to time and for mobile devices this score will be considerably lower since the mobile has fewer resources than Desktop devices.

Below are a few more things you can try to improve the overall performance of a Next.js application.

Next.js image

Next.js also has provide us a good image component (next/image). Check it out here They are also experimenting on a new image component - next/future/image with the help from user's feedback. It will be good to keep an eye on this one since it might help us to improve the performance of the image even more.

Static & Incremental Static Regeneration (ISR)

Next.js static pages are really important since they will pre-render at build time. We can use static pages by exporting a function called getStaticProps. ISR pages in Next.js have also helped us a lot in improving the overall performance of our application. You can read more about it in the Next.js docs

The future of Web Vitals

Google has mentioned earlier that they will be reevaluating Core Web Vitals every year and there has been some indications that FID might be replaced with one of items below.

  • Responsiveness of all user inputs, rather than just the very first one
  • The full duration of the event, rather than just the delay
  • Events that happen as part of the same user interaction, together with the entire duration of that process
  • An aggregate score for all interactions that happen during the full lifecycle of a web page

I believe it's good to keep an eye on this since it's good to be aware of the changes early to get ahead of the competition.


performance Web Development Next.js web-vitals