Web

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

2018-07-09 2020-05-06 International Consulting Web

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.

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!

Get green and solve Google Page Speed Issues with Ezoic Site Speed Accelerator – free trial

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>

Google PageSpeed Insights web site speed test

Have you read?

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>

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

Fix Google PageSpeed Eliminate render-blocking JavaScript and CSS in above-the-fold content : Fig 2 : Score after eliminating render-blocking JS and CSS in above-the-fold content of 72 on mobile — Fig 2 : Score after eliminating render-blocking JS and CSS in above-the-fold content of 72 on mobile

Fix Google PageSpeed Eliminate render-blocking JavaScript and CSS in above-the-fold content : Fig 3 : Score before eliminating render-blocking JS and CSS in above-the-fold content of 59 on desktop — Fig 3 : Score before eliminating render-blocking JS and CSS in above-the-fold content of 59 on desktop

Fix Google PageSpeed Eliminate render-blocking JavaScript and CSS in above-the-fold content : Fig 4 : Score after eliminating render-blocking JS and CSS in above-the-fold content of 79 on desktop — Fig 4 : Score after eliminating render-blocking JS and CSS in above-the-fold content of 79 on desktop

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

Fix Google PageSpeed Eliminate render-blocking JavaScript and CSS in above-the-fold content : How to eliminate render-blocking resources in WordPRess — How to eliminate render-blocking resources in WordPRess

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.