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.
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:
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.
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.
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.)
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 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
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.
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:
Lazy loading JS and prioritizing the HTML and CSS helps browsers start painting pages faster. This is crucial for avoiding page abandonment.
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.
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.
Evgeni writes about site speed and makes sure everything we publish is awesome.