LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Website / Website Tips / WordPress / WordPress Tips » How To Optimize External CSS File For Better Loading?

How To Optimize External CSS File For Better Loading?

Optimize-External-CSS-File-For-Better-Load-Time

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.

Table of Contents

Recommended For You:
For Newbies: How To Add .html In WordPress Page Permalink?

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.

Recommended For You:
Top 10 Free & Premium WordPress Templates For Your Business 2019

You Like It, Please Share This Recipe With Your Friends Using...

6 Responses to “How To Optimize External CSS File For Better Loading?”

  1. iliyas shaikh says:

    how can i use in blogger dear

  2. iliyas shaikh says:

    Thanks i am use it now
    thank you very much brother

  3. lovina says:

    using above code css is not rendering in ie8

Leave a Reply

Your email address will not be published. Required fields are marked *