How To Eliminate Render Blocking CSS for WordPress

Written by
Published
Topics
  • how to
  • Tech

So you’re trying to optimize your page’s speed, or even get a full score on Google’s PageSpeed test? And you’re stuck with the error “Your page has X blocking script resources and Y blocking CSS resources. This causes a delay in rendering your page.”

I’ve been there, optimizing the delivery of your CSS, and JavaScript  without additional plugins, is not a hard task on its own. In fact the hardest part is knowing what you should do to, and where you should start. Once you know that, you won’t need more than a couple minutes to do it!

the_fastest_man_alive

Optimizing your js delivery is as simple as adding “defer”, or “async” to the script you’re calling. Example :

<script async src="my.js">

Yet When it comes to optimizing your css delivery, and removing the blocking resources. It’s quite difference, as loading your css in footer won’t do any help.

To be able to do this you don’t need to be an expert, you only have to know basic css, and php.

Here’s what we’re going to do in:

  • If your style.css is being called in your theme/functions.php file: remove the calling
  • Otherwise if the Style.css is being called in theme/header.php : remove it
  • Use the javascript provided which will wait until your page finish rendering before it calls the css file  (more below)
  • Make a small inline styling (in header) that will give a basic design to your site (more below)
  • Modify your css file

The Javascript:

Include the following JavaScript in your footer, just before the closing </body> tag. Replace small.css with the link to your stylesheet css (//example.com/wp-content/theme/style.css)

<script>
      var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = 'small.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>

Make sure the page stays mobile friendly, and user friendly even before the css loads

To make sure your website stays friendly to users, you have to include a small inline css. Basically the trick here, is to decide what you have to load to your visitors first, and what can wait until the full css is loaded .

What I did in this site is that  i set my header, social links, and some other divs , to hidden when the page initially loads. I set the maximum width for my page, img , and post layout to max:100% on mobile.

Here is my code:

<style>
#ult-social-icons, #header,#redbar ,.relatedposts,.crunchify-social {display:none;}
a{
color: #000;
}

@media only screen and (max-width: 640px) {
.menu-mobile-container {display:block;}

.post-pagination li a {
padding-top: 3px
}
#header,
#footer,
#page {
max-width: 100%;
overflow: hidden
}
#rail,
#footer-like ,#nav-main{
display: none
}
.post-pagination li a {
display: block;
text-decoration: none;
padding-top: 3px
}
.post .post-body img {
max-width: 100%
}
}
</style>

One more thing to do:

Since we set some divs to hidden in our small inline css, we now need to make sure that they show up when the full css loads.  We only  need to add one css line, that will make them show up. Its very critical to use “!important” tag to make sure they override the initial styling.

My code:

#ult-social-icons, #header,#redbar ,.relatedposts,.crunchify-social {display:display: block !important; }

is a blogger, YouTuber and founder of UltGate, a popular tech & how-to website since 2013. Jed is Mostly known for hacking a bank live on tv, uncovering over 1 million porn video on Instagram and shedding light on Viber's origin.Sign-up for the email newsletter for your daily dose of tech tips & tutorials.