When your website is slow to load, it harms the overall user experience as well as the conversion potential of your site. Beyond that, Google is less inclined to rank web pages highly when they take too long to load.
When you have heavy JavaScript files on your site below the fold, what can you do to ensure that they aren’t dragging down your PageSpeed Insights score?
One option is using JS to delay loading assets until the user is about to interact with them. This means the rest of your site can load quickly in a way that helps your SEO and isn’t encumbered by loading JS assets that the user isn’t even close to engaging with yet.
Delayed loading is a practice that allows you to postpone initializing web elements until the user begins scrolling toward them.
This can help you avoid several issues that impact web performance, including:
Ultimately, this means that you can boost the performance of your webpage by ensuring that elements don’t load until they have to. In addition, it can help improve several core web vitals, including Time to Interactive, Total Blocking Time (and First Input Delay), and First Contentful Paint.
Site speed is a known ranking factor, meaning that pages that meet a specific threshold for loading speed benefit from a boost in Google results. Page load speed is measured from the moment a user clicks on a SERP link until the page is loaded.
You can use Google’s own tool, known as PageSpeed Insights, to measure and understand the loading time of your site.
This performance tool analyzes your website’s content and gives you a numerical score for desktop and mobile site versions. Beyond that, it will give you recommendations for improvement and let you know about opportunities for optimization.
When you enter your URL into the PageSpeed Insights tool, a report will be generated that gives you a Core Web Vitals assessment, diagnostics, opportunities, Lighthouse lab data, and passed audits.
Your score can range from 0 to 100, with a score of over 90 being Google’s definition of a “good” score. If you find yourself in the 50-89 range, Google considers your site speed to need improvement, while less than 50 is labeled as “poor.”
Are you learning the basics of SEO and wondering what the difference is between SEO and SEM? This recent post takes a deep dive into these two terms that are commonly used interchangeably.
When it comes to your page speeds, not every element that impacts loading time is in your control. However, a number of them are– including JavaScript, videos, images, and more.
Behind images, JavaScript is the second largest contributor to page bulk. This means altering your JavaScript assets so they don’t load until the user is close to interacting with them can help to improve your Google PageSpeed Insights score without sacrificing the dynamic and interactive nature of JavaScript elements.
There are even some theories that JavaScript has a more significant impact on the performance of pages than images. The idea here is that the combination of the time it takes to execute the script and the download size makes them weightier than images, which are only heavy due to their download size.
For example, running a script on mobile devices can take several seconds, even once it’s been downloaded. The problem, however, isn’t necessarily JavaScript in itself but the fact that they often block the download and rendering of other content because of how it is implemented.
In layman’s terms, this means that scripts are often put at the beginning of the page in a way that results in the page will remain blank until the scripts have been completely downloaded and executed.
Luckily, there are a number of ways to delay loading JS assets until the user is about to interact with them, which means that you don’t have to sacrifice page performance to utilize the interactive nature of JS.
While page load speed is important, it’s only one of many factors that impact where your site ranks on Google and Bing search results. Take a look at this guide for twenty items you’ll want to audit on your site to help boost your rankings.
Before you jump in and delay all of your files to boost your site speed, it’s important to recognize that not all files can be safely delayed.
While it’s a good idea to make sure that everything is still operating as it should after implementing this optimization, these file categories can typically be delayed:
On the other hand, you’ll want to steer clear of delaying the following file categories:
When you want to improve your site performance by using JS to delay loading assets until the users are about to interact with them, you have a number of options. They all have their pros and cons, and it’s worth taking the time to look at each potential route before forging forward.
There are many paid plugins you can use in WordPress to delay loading assets. Of course, these do cost money, and they only work with certain content management systems.
One popular option is Nitropack, available on WordPress, WooCommerce, Magento, Opencart, and Custom Websites.
Nitropack offers a suite of speed optimization features, including advanced lazy loading and other image optimization services.
Another plugin you can use is WP Rocket, which can help you improve your PageSpeed score, boost your loading time, and optimize your Core Web Vitals. Like Nitropack, WP Rocket offers a package of features, including delayed JavaScript execution.
FlyingPress and Perfmatters are two more paid plugins you can use that provide the JavaScript delay feature.
There is also a free WP plugin you can use for this purpose called Flying Scripts. The entire function of this plugin is to delay the execution of non-critical JavaScript until a user is about to interact with them.
If you don’t want to go with a paid plugin or can’t find any compatible with your CMS, you also have the option of adding “defer” or “async” to your JavaScript code.
Adding “async” to your code produces an outcome where scripts load asynchronously. This can speed up the page load time when several external scripts are on the same page.
When you use the “defer” attribute, it means that the browser will only load the script once the page is loaded. This could be useful if you want your scripts to load after the initial page load to boost your loading time or if there are scripts that rely on other scripts.
Async and defer are already used by the lion’s share of the sites online to improve page load times. The reality is, though, that it’s not usually enough to boost performance significantly.
Adding an async attribute means the script will load parallel to parsing the page. As soon as the script loads, it will execute.
Using the defer attribute means that the script loads in parallel to parsing the page but then will only execute once loading has been completed.
For this reason, defer is generally preferred compared to async, but it’s still not the best choice. It ultimately isn’t the ideal way to go about delaying the loading of assets on your page, as it can end up hurting your Google PageSpeed Insights score in some ways.
Another option on the table is using custom code to delay asset loading, which can be particularly useful for heavy JavaScript elements that you don’t need to load immediately, such as Live Chat plugins, Disqus, or other comment systems, and robust slideshows.
This custom JavaScript snippet is a great option that works on all content management systems:
(function($) {
// Function to set and retrieve a cookie
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; } function eraseCookie(name) { document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'; } // Load JS initially only after user interaction $(document).on('scroll.drift', function() { if ($(window).scrollTop() > 2000) {
$.ajax({
type: "GET",
url: "your.js",
dataType: "script",
});
$(document).off('scroll.drift');
setCookie('delaycookie', 'delaycookie', 7);
}
});
// If JS has been loaded after a user interaction on a previous page, load it right away
var x = getCookie('delaycookie');
if (x) {
$.ajax({
type: "GET",
url: "your.js",
dataType: "script",
});
}
})(jQuery);
What this code can do for you is delay the loading of a particularly heavy javascript code. Nothing happens until the user starts scrolling. At the same time, a cookie is set in the user’s browser so that it will be remembered later on. Once the user starts moving toward the element, the asset begins loading.
Now that the cookie is in place, the code removes the delay when the user visits another page. This means that the JS will be instantaneously loaded for all future page visits.
This is such a useful bit of code because Google Pagespeed Insights gives you a score based on initially loading your page– it doesn’t scroll down the page. This means that your burliest JavaScript can be offloaded into this code, and it won’t ding your score. In fact, it can have a particularly positive impact on it.
Are you new to the world of site optimization and are wondering where to begin? If so, check out the top SEO metrics to optimize (and what they mean.)
While it can be rewarding and fascinating to manage the SEO of your own site, it can also be time-consuming and exhausting. Google is frequently updating its algorithms, and the world of SEO is an ever-evolving landscape, meaning that you truly have to stay on your toes if you want your site to obtain and maintain the top spots on search engines.
If dealing with problems like how to use JS to delay asset loading isn’t something that you really have time for on your schedule, it might be time to hire the job out to the pros. An experienced SEO agency will be able to audit your site and make sure that it is in tip-top shape for its climb up the rankings.
Have you been searching for the right digital marketing agency to help your site thrive? If so, you’ve come to the right place. Blue Pig Media is a full-service SEO and digital marketing agency that can help you build or redesign your site, create and implement a content strategy, launch PPC and social media marketing campaigns, and optimize your site for search engines.
Does that all sound good to you? If so, contact us today to get started.
Do you have any questions or concerns about anything we discussed in this article? If so, you’re always more than free to reach out and let us know! We’d be more than happy to answer any of your questions, clear up any concerns you may be having, and assist you however we possibly can.
