Supercharge your NEXT.js FCP and LCP for SEO and UX
Increasing your PageSpeed Insights and Core Web Vitals score is critical for SEO and improving user experience. In this article, I will talk about one way you can accelerate your First Contentful Paint (FCP) and Largest Contentful Paint (LCP) with a NEXT.js hack.
The Metrics: FCP and LCP
First Contentful Paint (FCP) measures the amount of time it takes for a page’s content to start appearing for your users. According to Google, a “Good” FCP is within 1s of the initial page request. A FCP of over 3s is considered “Poor”, and anything in-between is considered “Needs Improvement”.
Largest Contentful Paint (LCP) measures the amounts of the time it takes for the largest chunk of your page to appear from the start of the initial page request. According to Google, a “Good” LCP is within 2.5s of the initial page request. An LCP of over 4s is considered “Poor”, and anything in-between is considered “Needs Improvement”.
Your LCP score is particularly important for SEO as it is one of the three main criteria in Google’s new Core Web Vitals report. These are known to be particularly important for your ranking, especially if your performance is poor. You can find warnings about these vitals in your Google Search Console.
Measurement: Google Lighthouse
One of the main ways to measure these scores is using Google Lighthouse. It is a tool made by Google that quantitatively measures your performance in comparison to all other websites as measured in Google’s User Experience Report.
Since Lighthouse is open-source, you can find a number of tools online that can give you a potential score. If you use Chrome, you can even find it in your browser console. For the most accurate score, however, I recommend using Google PageSpeed Insights.
The NEXT.js Hack
To significantly improve your FCP and LCP, you should replace the NextScript import in your _document.js with the following:
What the hack does is to use defer rather than async with many of the JS scripts that are loaded within a page. Combined with dynamic imports, this allows you to quickly load the HTML content of a page much faster, especially for heavier pages.
How It Works: Async vs Defer
The async and defer attributes are sometimes used interchangeably by developers, but their behaviour can be very different from a performance perspective. While both beginning fetching the moment the browser finds the script, their later behavior is different.
async parses and executes the script as soon as it is ready, which can mean wasting valuable time on scripts that are not vital for the initial load of the page.
defer waits until the HTML has finished parsing and loaded before parsing and executing the script.
You can find a better comparison and breakdown at https://flaviocopes.com/javascript-async-defer/.
The Results: 37 to 87!
At Wowa Leads, we use NEXT.js as our main frontend framework for both of our websites: WOWA.ca and Casaplorer.com. We recently got a warning in our Google Search Console about our slow page loads, which led to this investigation.
All of the following tests were conducted using Google Lighthouse on a Mobile setting.
For our first example, I chose our Privacy Policy. It is a predominantly text-heavy and script-light page.
Before optimization:
After optimization:
For our second example, I chose one of our heavier pages — our Toronto Housing Market Report. This page has an interactive map, a number of charts, and dynamic ads.
Before optimization:
After optimization:
Conclusion
This is one of the easiest way to supercharge your NEXT.js deployment if you are suffering a bad performance score. There are also a number of other ways, ranging from Static File Generation to proper CDN caching to dynamic imports and lazy-loading, but this probably has the best bang-for-the-buck return.
Let me know below if this trick helped you, and share your own suggestions and tips for you made your NEXT.js deployment faster.
