CODEWITHSUNDEEP
wordpressperformancepagespeed
Abhishek Kalotra
Abhishek Kalotra

Reputation: 139

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

i'm trying to improve speed of my website. i'm using PageSpeed Insights to check my site performance and it was telling me to remove render blocking java script and css. so i did it and know its causing problem in my website design. so what should i do to remove rendering blocking without causing problem in my website design.

Upvotes: 1

Views: 627

Answers (2)

GrahamTheDev
GrahamTheDev

Reputation: 24825

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.

Upvotes: 1

Hitech Hitesh
Hitech Hitesh

Reputation: 1635

Add async in the script tag and put the css and js in the last of the page

Upvotes: 0

Related Questions