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.

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>

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>

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).

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.

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!

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>

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.

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.

Perfect Chrome Lighthouse Score: What Happens?