Fix Google PageSpeed Eliminate render-blocking JavaScript and CSS in above-the-fold content



Solve render blocking Javascript and CSS

The Google PageSpeed [1] test “eliminate render-blocking JavaScript and CSS in above-the-fold content” propose you to delivers your site’s JS and CSS files after the HTML is fully loaded – and, therefore, do not pause your HTML loading to download them.

[1] - PageSpeed Insights – developers.google.com
Render-blocking script definition: Scripts that are loaded before the full HTML DOM has been parsed. For example, scripts included in header or within content, without any specific instruction for browsers to delay script load until after HTML paint.

Eliminate render-blocking JavaScript and CSS in above-the-fold content: show how to fix it

  1. Have an external system optimize your website for you
  2. Use a CDN that will perform all possible optimizations on your behalf, including the three following optimization necessary to fix eliminate render-blocking resources:
  3. Defer Javascript files load
  4. Load CSS after HTML load
  5. Use a WordPress plugin

There is a lot of optimizations necessary to fix eliminate render-blocking resources and might be tedious to implement them by yourself – plus, you will have to constantly look out for new tests included in Chrome LightHouse and  Google PageSpeed ‌  among other page speed tests.

There is no existing solution to eliminate render-blocking resources in htaccess code as the issue is related to DOM, meaning the website content, and the order on which the included resources are loaded, such as Javascript and CSS, but not only. These cannot be triggered in Htaccess, but only in the HTML DOM content.

If you solve these issues for desktop, you will at the same time eliminate render-blocking resources for mobile as both are exactly the same!

Did you know that you can even have all these steps executed automatically for you by using an external  Site Speed Accelerator ‌  technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as  Ezoic platform ‌  offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

Defer Javascript files load

In order to defer load of your JS files [2], you can either add the async or defer instruction to your scripts links. Async will not guarantee that they are loaded in the same sequence – therefore, if you have several scripts that should run one after the other, defer is preferable to guarantee the sequence :

<script defer type="text/javascript" src="./js/mootools-more-1.4.0.1.js"></script>
[2] - Remove Render-Blocking JavaScript | PageSpeed Insights | Good Developers – developers.google.com

Load CSS after HTML load

For the CSS to be loaded after the full HTML is transmitted, Google proposes [3] this piece of code to add at the end of your HTML, for example after footer closing tag and before body closing tag :

</footer>
 <script>
 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>
</body>
[3] - Optimize CSS Delivery | PageSpeed Insights | Good Developers – developers.google.com

In order to optimize your website, it is also a good idea to remove unused CSS code, an operation which can be tedious if you do not have knowledge in Web design. If you have not created your website theme yourself, it might be wiser to use an external system to remove unused CSS code on your pages on your behalf, such as Ezoic LEAP for example, the new (and totally free) version of their amazing Site Speed Accelerator.

Pass the Google site speed test!

This allowed me to pass the Google PageSpeed [1] test eliminate render-blocking JavaScript and CSS in above-the-fold content (along with Leverage browser caching [4]) on a website, going up from a score of 51 on mobile (Fig 1) to 72 (Fig 2), and up from 59 (Fig 3) to 79 on desktop (Fig 4).

[4] - Fix Google PageSpeed leverage browser caching in htaccess - Yoann Bierling, International SAP/Web Consultant - www.ybierling.com

How to eliminate render-blocking resources in WordPress

To eliminate render-blocking resources in WordPress, it is necessary to install a plugin such as JetPack.

Then, go to the options, for which you must be an administrator, and go to JetPack options > Writing > Performance and Speed > check Enable site accelerator, speed up image load times, speed up static file load times, and enable lazy loading for images.

This will eliminate render-blocking resources in WordPress and load pages faster by allowing JetPack to optimize your images and serve your images and static files (like CSS and JavaScript) from their global network of servers.

How to Eliminate render-blocking JavaScript and CSS on WordPress

Also, do not forget to postpone loading images off-screen by using a lazy load function. While it used to be difficult and necessitate an external library to postpone loading images off-screen, it is now possible natively in HTML5!

Lazy loading of images: website images are only requested to the server when user scroll on the webpage and might display them

To implement lazy loading of images on your websites, simply add the values LAZY to the attributes LOADING of your website images, and recent browsers will understand that these images should only be requested and loaded if they are being displayed, meaning if user scrolls down to the image placeholders.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>
Lazy loading – Web performance – Mozilla Developer Network

On top of that, lazy loading also works with iframes, and is an important implementation to eliminate render-blocking resources from your webpages.

Once the rendering blocking resources will have instructions to load after the main content, meaning the HTML DOM, you will already earn a lot of points on the Google Lighthouse test, the Page Speed Insights test, or the Google Core Web Vitals.

Have an external system optimize your website for you

Do you know that you could actually have all the  Google PageSpeed ‌  issues solved on your behalf, without much effort from your site – except registering for a free trial and changing your DNS?

Using the  Ezoic platform ‌   Site Speed Accelerator ‌  technology, all the usual  Google PageSpeed ‌  issues will be solved by their system, which will be the intermediary between your website and the visitors. They will optimize the web page for you before displaying it to your visitor.

In April 2021, Ezoic paid Site Speed Accelerator will become free Ezoic LEAP, and help websites reaching Core Web Vitals green scores at no charge!

Become green by simply registering for a free trial on  Ezoic platform ‌  and try it for yourself – they will make your website reach the highest standards of page speed optimization within a few days: render next generation webp images, optimize CSS and JavaScript by removing unused CSS and JS, lazy load images, resize images, cache your site pages, optimize fonts, pre-connect to all your included sites, and much more.

No credit card required – all you have to do is to register for free and give it a try. Plus, if your website is making money from display ads, on top of making your website much faster, they can also make you earn several times more money than you do with Google AdSense by optimizing your ads with machine learning and advanced artificial intellingence.

x
100% Chrome Lighthouse Speed Test Success: What Happens?

Perfect Chrome Lighthouse Score: What Happens?






Comments (8)

 2018-08-19 -  quranapk
Love reading your content keep posting – it helped me fix fix render blocking CSS
 2018-09-23 -  Monica
So this is how we do it, it's great to know how to solve eliminate render-blocking resources
 2018-09-25 -  Van
Great, that's exactly what I was looking for, now I'm ready to eliminate render-blocking resources on mobile
 2018-11-03 -  utumikaji0
Amazing, now it's time for me to try it and fix eliminate render-blocking resources!
 2019-01-12 -  Leo
Don’t know how to thank you, but that is pure genius, thanks – it worked on WordPress to remove render blocking resources
 2019-04-21 -  Ludanulema
Hi, I saw your article and it helped me solve the problem eliminate render-blocking resources on PHP, thank you
 2019-06-12 -  animeg2Q
I'll try it now, thanks for sharing this eliminate render-blocking resources fix
 2019-07-02 -  Gasfackele
It worked well for me, no need to look any further to eliminate render-blocking resources in HTML website

Leave a comment