How to Use JS to Delay Loading Assets Until User Interaction

Financial Services SEO
Financial Services SEO: Tips, Techniques, and Trends in 2023
February 10, 2023

Using JS to Delay Loading Assets

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.

Why Is Delayed Loading a Good Idea?

Delayed loading is a practice that allows you to postpone initializing web elements until the user begins scrolling toward them.

Delayed Website Loading

This can help you avoid several issues that impact web performance, including:

  • Loss of users due to poor site performance
  • Longer load times resulting from large content files
  • Page lag resulting from multiple requests for content at the same time
  • Bandwidth waste due to content that is loaded but not viewed

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.

Understanding Google PageSpeed Insights Score

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.

Google PageSpeed Insights Score

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.

Why It’s So Important to Pay Attention to How JS Is Impacting Your Site Performance

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.

Paying Attention to Site Performance

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.

Deciding Which Files to Delay

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.

Deciding Which Files to Delay

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:

  • Social media follow/like button embeds
  • Advertising scripts (Amazon Ads, Google Adsense, Outbrain, Taboola, Media.net, etc.)
  • Customer Support and Live Chat (Intercom, Zendesk, Customerly, tawk.to, Olark, etc.)
  • Tracking and Analytics (Facebook Pixel, Google Analytics, Hotjar, Google Tag Manager, Statcounter, etc.)
  • Non-third-party scripts that aren’t essential to above-the-fold content rendering
  • Other third-party scripts (Facebook comments, Disqus comments, Cookie consent, etc.)

On the other hand, you’ll want to steer clear of delaying the following file categories:

  • All the dependencies that other script files use
  • Files that are essential for First Paint rendering above the fold
  • JQuery

How to Use JS to Delay Loading Assets Until User Interaction

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.

WP Plugins

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.

WordPress NitroPack Plugin

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.

Add “Defer” or “Async” to Your JavaScript Code

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.

Adding Defer and Async to JavaScript Code

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.

Custom Code

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.

Using a Custom Code

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.)

Is It Time to Hire the Pros to Take Care of Your SEO Needs?

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.

A Professional SEO Agency

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.

David Curtis
David Curtis
David Curtis is the founder and CEO of Blue Pig Media. With twenty years of successful execution in sales, marketing and operations, for both clients and vendors, he has a bottom line ROI driven mentality rooted in metrics driven performance across highly competitive global corporate initiatives.

Comments are closed.