How To Optimize External CSS File For Better Loading?

As you know that external CSS files are important and nearly everyone is using it but it require loading time and slowing down your web speed. So its time to make it load fast so that it will not effect on your page load time. Through using this code, you will also get “Eliminate Or Remove Render-Blocking External CSS” error from your blog too so we suggest everyone to use this code. In this code, we will call the CSS file after HTML page load through pure JavaScript only that will not effect on load time.

If the external CSS resources are small, you can insert those directly into the HTML document, which is called inlining. Inlining small CSS in this way allows the browser to proceed with rendering the page. Keep in mind if the CSS file is large, completely inlining the CSS may cause PageSpeed Insights to warn that the above-the-fold portion of your page is too large via Prioritize Visible Content. In the case of a large CSS file, you will need to identify and inline the CSS necessary for rendering the above-the-fold content and defer loading the remaining styles until after the above-the-fold content.

How To Optimize External CSS?

Step 1:) Find external css files on your web page and delete it.
<script rel="stylesheet" type="text/css" src="https://www.example.com/css/style.css">
Step 2:) Now add the below code just before </body>.

//Eliminate Render Blocking CSS
//Remove GooglePageSpeed Error
//Code Shared By EXEIdeas
<script type="text/javascript">
 var cb = function () {
 var l = document.createElement('link');
 l.rel = 'stylesheet'; l.href ='style.css';
 var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
 };
 var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
 if(raf) raf(cb);
 else window.addEventListener('load', cb);
</script>

Step 3:) Now replace style.css in the upper code from your external CSS file like (http://www.example.com/css/style.css)
Step 4:) Save and done.

Important Note:

This code will run only on JavaScript browsers and nearly 99.99% browsers are supporting JavaScript. In many webpage speed tester, you will not be able to see your CSS while testing a page then don’t worry. Its ok.

Last Words:

This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share a whole guide step by step about WordPress and make it easy for you. If you liked it then share it and be with us to get next tutorial. If you have any problem then feel free to ask us. We will help you with what we can or have.