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.
- First decide the necessary CSS which is required to load your webpage properly and directly inline it the head section of your website.
- Now copy all the unnecessary CSS and create a new stylesheet then upload it to you website.
- 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>
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.