Web pages often load third-party scripts to improve the user experience or perform marketing attribution. In many instances, libraries are getting added more and more and no library is ever deleted. For example, google analytics, google tag manager, social media widgets, customer support widgets, Facebook pixel and many more are imported. This results in incredible bloat and very slow loading times.
The Next.JS Script component allows the loading of third-party javascript scripts in different strategies. This helps to reduce the loading time of the page. The default loading strategy is afterinteractive, which loads third-party scripts early after some hydration has occurred. In the following, we first see how third-party bloat can be identified and then we explore the Next.JS script component.
New to Next.JS? Read our introductory guide to Next.JS and understand why Next.JS is suited for search engine optimisation. For more tips on how to improve your core web vitals read more here.
Table of Contents
How to see which third-party scripts are being used?
You can visit https://pagespeed.web.dev to check your website. Pagespeed gives you lab insights into the performance of a website. To see all scripts which are getting loaded click on View Treemap.
From the screenshot, it is obvious that the site is loading a bunch of js libraries and this might substantially affect the loading time. As much as possible, it is advisable to remove the libraries altogether. Generally speaking, it is more important for the business that users can load the website fast compared to having 100% visibility on attribution (marketers will disagree). In other words, on many websites, 5-10 third-party marketing scripts are loaded. In the pursuit of finding which marketing channel works best, the user experience is substantially degraded. This might ok in countries with very fast internet, but in other countries, users might not even be able to load the website.
The treemap shows all third-party scripts that were loaded. Ideally, you remove as many as you can. There are scripts which you cannot afford to remove, in this case, make sure you load them asynchronously. This prevents they do not block the loading of other components.
Cutting down on third-party scripts also helps to better use your crawl budget. Every website has a certain crawl budget the search engine crawler can use scrape. For very big javascript-heavy websites, search engine crawlers might exceed their budget quickly. The more third-party scripts you can remove, the more efficiently the crawl budget can be used (and the more pages will be crawled).
How to use the Next.JS Script component?
You can simply import the Script and the script components can then be placed into the head component. The default loading strategy is afterinteractive. Next.JS will also do its best to prevent loading the script on multiple pages. To learn about other Next.JS components, read more here
There are different loading strategies which we discuss in the following.
import Script from 'next/script'
import Head from 'next/head'
function Index() {
return (
<div>
<Head>
<Script src="https://random.com/myScript.js">My page title</title>
</Head>
<p>Hello world!</p>
</div>
)
}There are three different loading strategies. The main difference between the strategies is in the loading priority of the third-party script. By making use of the different loading strategies strategically, you can define your overall loading sequence of third-party scripts.
To change the strategy property, you simply update the strategy property:
<Script src="https://example.com/myScript.js" strategy="beforeInteractive" />beforeInteractive loading strategy
A next js script component loads the script before most events occur. The loading of the third-party script is executed immediately. It’s hard to think about which scripts absolutely have to be loaded before the page is interactive and blocking the main thread. Should you have one of these critical scripts, you load them with the beforeinteractive strategy.
afterInteractive loading strategy
The afterInteractive is the default loading strategy. It loads the script immediately after the page is interactive (HTML served and hydrated). You can use this loading strategy for important scripts.
lazyOnload loading strategy
Load the script after everything else is finished loading. Some people use lazyonload strategy only for every low-priority scripts. To score high on core web vitals, I load almost all scripts with lazyonload strategy. You may lose some marketing attribution accuracy, however, you are drastically improving the website speed (and thus organic traffic) which substantially outweighs the downside. I found this strategy to substantially improve loading performance.
Worker strategy (experimental)
At the time of writing, Next.JS also offers to offload the loading of the external script to a web worker. Specifically, code execution of offloaded to Partytown making sure the main thread is not burdened with third-party scripts. The worker strategy is still experimental. For this strategy to work, you have to activate it in next.config.js
module.exports = {
experimental: {
nextScriptWorkers: true,
},
}Conclusion
Next Js script offer three loading strategies to tailor your loading strategy of external scripts for optimal loading. Third-party script bloat is real that reduces page speed. To improving loading performance, it is best to load most scripts with lazyonload strategy.
