Eliminate External Render-Blocking

Eliminate external render-blocking

Google suggests you to put the initially needed (above-the-fold) CSS inline and load the rest of the CSS when the page load is ready. See here.

Same goes for the javascript. Include the "must have code" inline and load the "nice to have code" on page load as suggested here

Idea is to load what the user sees first as fast as possible.

Personally I find it hard to follow as it would split the code and makes maintaining it harder. Makes sense for large projects though…

Eliminate external render-blocking

Google suggests you to put the initially needed (above-the-fold) CSS inline and load the rest of the CSS when the page load is ready. See here.

Same goes for the javascript. Include the "must have code" inline and load the "nice to have code" on page load as suggested here

Idea is to load what the user sees first as fast as possible.

Personally I find it hard to follow as it would split the code and makes maintaining it harder. Makes sense for large projects though…

Elimante render-blocking resources

JavaScript

When using async you have to ensure that load order does not affect your implementation.

Async basically says "load everything as quickly as you can, I don't care about load order".

If you haven't accounted for this then the easiest fix is to use defer on your JavaScript instead of async. This basically says "load everything after the HTML has loaded but please keep the order as some scripts depend on others".

This will be slightly slower overall but still fix the JavaScript being render blocking.

You should defer all scripts, except any scripts that are essential for above the fold operations (and then you should inline those scripts in a <script> tag in the <header>, obviously keep this to a minimum).

CSS

Render blocking CSS is anything sitting in an external file that relates to content "above the fold".

To understand this fully you need to understand how the browser render things but in essence anything that is visible without scrolling ("above the fold" content) is delayed if your CSS is in an external file as it needs that information to know how to present and lay things out.

What you need to do is find all the styles that apply to your above the fold content and inline them in a <style> tag in the page <header>. Yet again this needs to be kept to a minimum so you may need to make the above the fold CSS custom rather than using bootstrap....including the whole of bootstrap inline would not be good!

Then all other styles can sit in external style sheets.

This way the second the page's HTML is downloaded it has everything it needs to layout the page without waiting for any other requests.

Font Awesome

Ah fonts for icons. I won't go into why that is a bad practice from an accessibility and performance perspective as I have covered that numerous times before.

Instead I will simply say that for any "above the fold" icons you should instead swap them for inline SVGs. This is for the same reason as inlining your CSS, inline SVGs do not need a network request to render so the second the HTML is loaded your page can be displayed.

Removing render blocking JS and CSS causing issue in my WordPress website

Render Blocking CSS

Render blocking CSS will always show on Google Page Speed Insights if you are using external resources for your CSS.

What you need to do is to inline all of your 'above the fold' styles in <style></style> tags in the head of your web page.

I will warn you, this is NOT easy and plugins that claim to do this often do not work, it requires effort.

To explain what is happening:-

1. A user navigates to your site and the HTML starts downloading.
2. As the HTML downloads the browser is trying to work out how to render that HTML correctly and it expects styling on those elements.
3. Once the HTML has downloaded if it hasn't found styles for the elements that appear above the fold (the initial part of the visible page) then it cannot render anything yet.
4. The browser looks for your style sheets and once they have downloaded it can render the page.

Point 4. is the render blocking as those resources are stopping the page from rendering the initial view.

To achieve this you need to work out every element that displays without scrolling the page and then find all the styles associated with those elements and inline them.

Render Blocking JS

This one is simpler to fix.

If you are able to use the async attribute on your external JS then use that.

However be warned that in a lot of cases this will break your site if you have not designed for it in the first place.

This is because async will download and execute your JS files as fast as possible. If a script requires another script to function (i.e. you are using jQuery) then if it loads before the other script it will throw an error. (i.e. your main.js file uses jQuery but downloads before it. You call $('#element') and you get a $ is undefined error as jQuery is not downloaded yet.)

The better tag to use if you do not have the knowledge required to implement async without error is to use the defer attribute instead.

This will not start downloading the script until the HTML has finished parsing. However it will still download and execute scripts in the order specified in the HTML.

---

Related Topics