Boost Page Speed with Asynchronous Loading Techniques

Asynchronous loading is a technique that allows certain resources on a web page, such as scripts or images, to be loaded in the background while the rest of the page continues to load. This means that these resources won’t block the rendering of the page and can speed up the overall page load time.

Think of it like ordering at a fast-food restaurant. Instead of waiting for your entire order to be prepared and served all at once, the restaurant will give you the items that are ready while they continue to work on the rest of your order. This way, you can start eating and enjoying your food without having to wait for everything to be ready at the same time.

How to Implement Asynchronous Loading

To implement asynchronous loading on a web page, you can use the “async” or “defer” attribute in the HTML code of the page.

• The “async” attribute tells the browser to download the script in the background and continue rendering the page without waiting for it to be fully downloaded.
• The “defer” attribute tells the browser to download the script in the background, but also to wait until the page has finished rendering before executing the script.

Here’s a basic guide on how to implement asynchronous loading using the “async” attribute:

1. Find the script tags in your HTML code that you want to load asynchronously.

2. Add the “async” attribute to the script tags. For example, if you want to load a Google Analytics script asynchronously, your code might look like this:

<script async src=”https://www.google-analytics.com/analytics.js”></script>

3. Save your changes and test your page to make sure everything is working properly.

Note: Not all scripts are suitable for asynchronous loading. Scripts that rely on other scripts or that need to be executed in a specific order may not work properly with asynchronous loading. In those cases, you may need to use the “defer” attribute or other techniques to optimise your page load speed.

Asynchronous Loading for Javascript and CSS

To load JavaScript and CSS asynchronously in WordPress, you can use the Async JavaScript plugin. Here are the steps:

1. Install and activate the Async JavaScript plugin from the WordPress plugin repository.
2. Go to the plugin’s settings page by clicking on “Async JavaScript” in the WordPress admin menu.
3. In the “JavaScript Options” section, select “async” or “defer” for the loading method. You can choose to apply this to all scripts or only specific ones.
4. In the “CSS Options” section, select “async” or “defer” for the loading method. You can also choose to inline critical CSS to improve page speed.
5. Click “Save Changes” to apply the settings.

By default, the plugin will add async attributes to all JavaScript files and defer attributes to all CSS files. You can also choose to exclude certain scripts or stylesheets if needed.

Note: Asynchronous loading may cause compatibility issues with some plugins and themes, so it’s important to test your site thoroughly after making these changes.

WordPress Plugins Which Manage Asynchronous Loading

There are several other WordPress plugins that support asynchronous loading of JavaScript and CSS. Here are a few examples:

1. Autoptimize – This plugin allows you to optimise your site’s performance by optimising and aggregating your CSS and JavaScript files, and also supports asynchronous loading.
2. WP Deferred JavaScripts – This plugin defers the loading of JavaScript files until after the page has loaded, which can help improve page speed.
3. Speed Booster Pack – This plugin includes various speed optimisation features, including the ability to asynchronously load JavaScript and CSS files.

As with any plugin, it’s important to thoroughly test the plugin and make sure it’s compatible with your site before making changes to your site’s code.

Related: 35 WordPress Tools and Resources to Improve Page Speed

How to Implement Asynchronous Loading in Magento 2

To load JavaScript and CSS asynchronously in Magento 2, you can follow these steps:

1. Create a new file called requirejs-config.js in your theme directory (app/design/frontend/[Vendor]/[Theme]/) if it doesn’t already exist.

2. Add the following code to the requirejs-config.js file:

var config = {

    map: {

        ‘*’: {

            ‘Magento_Catalog/js/product_list’: ‘Magento_Catalog/js/product_list.async’

        }

    }

};

This code tells Magento 2 to load the product_list.async.js file instead of the product_list.js file.

3. Duplicate the original JavaScript file (e.g., product_list.js) and rename it to product_list.async.js.

4. Edit the product_list.async.js file and add the following code at the beginning:

define([‘jquery’, ‘domReady!’], function($) {

    // Your JavaScript code here

});

This code tells Magento 2 to load the jquery library and wait for the DOM to be ready before executing your JavaScript code.

5. Save the requirejs-config.js and product_list.async.js files, clear your Magento 2 cache, and test your site to make sure everything is working properly.

Note: this is just one example of how to load JavaScript and CSS asynchronously in Magento 2, and the exact implementation may vary depending on your specific use case. It’s always a good idea to test thoroughly and make sure that any changes you make are compatible with your site.

Related:

• 28 Magento 2 Tools and Resources to Improve Page Speed
• Magento Page Speed Optimisation Services

How to Implement Asynchronous Loading in Shopify

In Shopify, asynchronous loading can be achieved by modifying the theme’s liquid code.

Here are the basic steps to implement Asynchronous Loading:

1. Open the theme editor: From your Shopify admin, go to Online Store > Themes, and click the “Actions” dropdown next to the theme you want to edit, then select “Edit code”.
2. Locate the CSS and JavaScript files: In the “Layout” folder, find the “theme.liquid” file, and look for the links to the CSS and JavaScript files. These will be located in the section.
3. Move the CSS and JavaScript files: Move the CSS file link to the bottom of the section, just before the closing tag. Similarly, move the JavaScript file link to the bottom of the section.
4. Add the “async” attribute: Add the “async” attribute to the script tag for the JavaScript file. This tells the browser to load the script asynchronously.
5. Save the changes: Save the changes to the “theme.liquid” file, and check your website to make sure everything is working correctly.

Shopify Apps Which Manage Asynchronous Loading

Here are some popular Shopify apps that support asynchronous loading:

1. Async Load: This app helps you speed up your Shopify store by asynchronously loading scripts and styles. It also provides some other performance optimisation features, such as minification and concatenation of files. Pricing starts at $7.99/month.
2. SpeedBoost ‑ Fastify: This app offers many performance optimisation features including asynchronous loading of Javascript and CSS. The app also offers image compression, script concatenation and minification, and lazy loading. Pricing starts at $14.99/month.
3. Lazy Loader: This app helps you reduce page load time by asynchronously loading images, videos, and iframes. It also provides some other performance optimisation features, such as image optimisation and lazy loading. Pricing starts at $5.99/month.
4. NitroPack: NitroPack offers a suite of performance optimisation features, including asynchronous loading of Javascript and CSS. It also offers image optimisation, lazy loading, and advanced caching options. Pricing starts at $15/month.
5. Page Speed Booster: This app helps you speed up your Shopify store by asynchronously loading scripts and styles. It also provides some other performance optimisation features, such as minification and concatenation of files. Pricing starts at $4.99/month.

Prices may vary depending on the plan you choose and any additional features that you may require.

Related: 17 Shopify Tools and Resources to Improve Page Speed