What is the most important SEO consideration when optimizing your site's speed?
Users and search engines must see the same content.
Google provides an easy way to validate this for any webpage.
In this context, there has been some confusion about NitroPack’s JavaScript lazy loading.
That’s why in this article, we’ll focus on the link between our JS execution features, the visitor’s experience, and how search engines see a website.
Here’s a quick summary of what we’ll get into:
-
Google’s Mobile-Friendly Test and URL Inspector Tool show you how the search engine sees your website. Use these tools when testing NitroPack on any site;
-
Studies show that people scroll much more than before. That’s why lazy loading JS until user interaction while prioritizing HTML and CSS can provide a better UX;
-
With NitroPack, lazy loading JS scripts is just one of many options. You can easily switch to a mode that doesn’t lazy load JS;
-
Lazy loading JS helps browsers start painting content (HTML, CSS) fast. In a lot of cases, this is crucial for avoiding page abandonment;
-
Google (web.dev) endorses a lot of similar JS techniques for removing render-blocking resources and other performance benefits;
-
While NitroPack is a pioneer in bringing JS lazy loading to the market, other companies are also building similar features.
Now, let’s cover things in a bit more detail.
Always test
Testing is crucial before using any new service on your site.
Whether it’s with a staging site or any other means, experienced site owners test everything before deploying it.
This is also true for NitroPack. That’s why we advise everyone to test our service thoroughly.
In terms of SEO, using Google’s Mobile-Friendly Test and URL Inspector Tool can show you how the search engine see your site after NitroPack’s optimizations.
Put simply:
Testing is the only safe way to see if lazy loading JS is right for your site.
If all content renders as expected - perfect, that’s a pass!
And if some content is missing? Not to worry - NitroPack has many possible configurations that don't lazy load JS. More on this in a bit.
(To make this difficult task easier for you, we've made it possible to try our service without risking any money, UX issues, or vendor lock-in.)
Users scroll much more than before
Studies show that most users' first interaction with a web page is scrolling.
You can find a ton of research showing that people are used to scrolling much more than before. For example, a 2018 study by the NN Group found that:
"In 2010, 80% of the viewing time was spent above the fold. Today, that number is only 57% — likely a consequence of the pervasiveness of long pages...it could mean that users have become conditioned to scroll — the prevalence of pages requiring scrolling has ingrained that behavior in us."
In that sense, lazy loading JS until interaction can improve the UX on a page. By loading content (especially above the fold) quickly, you give people a reason to scroll further
Different optimization modes for different sites
Out of all NitroPack presets, only the Ludicrous mode lazy loads JS scripts by default.
If you don’t want that feature on your site, you can simply switch to another mode and purge your cache. It only takes a few seconds to do so.
We have detailed articles about these modes in our Help Center. We’ve described their differences, especially in the context of the Strong and Ludicrous modes.
And because we know that some JS-heavy websites can have rendering problems with the latter, we encourage people to test it and decide if it's right for them.
On top of that, problematic resources can be excluded from NitroPack’s optimizations.
Lastly, our Manual Mode opens the doors for even more ways to tailor NitroPack to specific websites.
JS execution techniques backed by Google
Deferring JS isn’t some secret that everyone’s oblivious to.
For example, Google also knows how much JS can affect the UX on a page.
That’s why they advise using similar techniques to eliminate render-blocking resources. Philip Walton (Engineer at Google) also has a popular strategy for deferring code and running when it's needed.
Source: This Twitter thread between Mario Peshev (CEO of DevriX) and Pascal Birchler (Developer Relations Engineer at Google)
On top of that, Google understands that users also want to see content being painted quickly. That’s why metrics like First Paint and First Contentful Paint are so important.
As Addy Osmani (Engineer at Google) puts it in this article on web page usability:
“First Paint marks when the browser can render anything visually different from what was displayed before navigation. It confirms that rendering has started. This can be an important metric, as the duration of ‘blank screen’ is probably the most significant indicator of page abandonment.”
Lazy loading JS and prioritizing the HTML and CSS helps browsers start painting pages faster. This is crucial for avoiding page abandonment.
And on that note, most modern browsers now support defer and async attributes that help run JavaScript without blocking page load.
That’s not to say that interactivity should be neglected. Pages should become interactive as quickly as possible. At the same time, if you don’t provide users with content fast, a lot of them won’t stick around.
We’re also seeing other companies build similar techniques for lazy loading JS. At this point, ours is the most mature implementation of these features, but the industry is following suit.
Again, NitroPack does things a bit differently. Apart from lazy loading JS, we also have a proprietary resource loading mechanism that changes the way resources are fed to the main thread.
But the ideas behind improving the user experience (especially on low and mid-tier devices) by deferring JS are the same.
Put simply:
If we want a better, faster web, we need to deal with the JS problem. Executing JS more efficiently through various techniques is a big step in that regard.
While we aren’t 100% there yet, our current features are a great start. They’re also easy to test for everyone wanting to see if NitroPack is right for their site.
