How to Implement loadCSS and Asynchronous CSS Loading On Your Website?

If you have ever used Google’s Page Speed Insight tool then you must have seen that it recommends to reduce above the fold content or load the CSS stylesheets asynchronously. Here we are going to see one of the methods for asynchronous CSS loading and that is loadCSS by Filament Group, Inc which is also recommended by Google for asynchronous loading of CSS files. Implementing loadCSS is very simple and you can do it by adding few codes on the head section of your website.

Download the latest source code from loadCSS Github or you can just visit loadCSS source code page.

Implementing loadCSS

    1. First decide the necessary CSS which is required to load your webpage properly and directly inline it the head section of your website.
    2. Now copy all the unnecessary CSS and create a new stylesheet then upload it to you website.
    3. Now replace # with the link of your CSS file and copy the below code to your website in the head section.It will look something like in the image.<link rel="preload" href="#" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="#"></noscript>Pre load CSS in head section
    4. Directly inline the JavaScript code to the head section of your website (Remember to get the code from the GitHub link provided above). Be sure to always update the code with the new version. Here’s the loadCSS JavaScript code from the Github that worked for me and there is also a test page which was meant to show that the loadCSS can enable asynchronous CSS loading in browsers that do not support rel=preload you can also get the source code from that page.

If this method doesn’t work for you be sure to check the loadCSS documentation on asynchronous CSS loading read all the steps carefully if you can’t make it work then see the source code of the test page.

This method makes it easier for the web browsers to load the webpages faster by asynchronously loading the unnecessary CSS files. This could improve your webpage performance on mobile phones and browsers running on slow internet connection.

The new attribute rel preload is supported by some of the major browsers but currently few browsers doesn’t support it and loadCSS can enable this on those browsers.