1

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.

Improve this question
1
  • Generally you need to wait for some scripts to load before you run your code. For example, wait for jQuery to load before using any jQuery functions Commented Oct 22, 2019 at 8:10

2 Answers 2

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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

Improve this answer

2 Comments

i have tried it, it was loading my HTML first and then JS and CSS, but it was taking a noticeable amount of time(1 to 1.5 seconds ) to load js and css which my client didn't like it.
That's the normal time

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.