"Render-blocking JavaScript"

13
6.9K followers

Following Jovo’s blog/question yesterday,

https://my.wealthyaffiliate.com/everything-wordpre...

I too have struggled to fully understand “Render-blocking javascript” shown in various page speed checker sites. They tell you to fix immediately, but don’t tell you how. I’ve been through many sites explaining what we should do, and came to the semi-conclusion that “it’s ok to leave as they are" for now (I'm tired!)

These scripts are necessary (obviously) to perform some of your site functions, but not all. However because they’re sitting in the header or above-fold, every time a user opens your site, they start to run, hence it slows down the loading speed. So the solutions can be to

(1) move those to the footer or

(2) let it run asynchronously (what the hell?) or

(3) if you have 2 or more sets of these javascript files, concatenate into one.

Those "clearing the cache" plugins seem to work a little. I've used W3 Total Cache, and followed the instruction by this guy exactly.

http://customizewp.com/eliminate-render-blocking-j...

I have two websites using different themes.

(1) With GTmetrix, dramatically increased the score & "loading time" on both sites.

(2) With Google Speed, eliminated all the "render-blocking javascript" from one site. But not the other one. I had 5 of those, eliminated 2 using this method. Still have 3 that I can't get rid of.


Now this site below tells you that, these scripts may be intentional by the developer, so if you do something (i.e. move to the footer etc), it may break the functionality. So "it's ok to leave the scripts there".

http://docs.wp-rocket.me/article/108-render-blocki...

The same people say that you shouldn't care about Google Page Speed, the speed is what matters, not the score;

http://blog.wp-rocket.me/the-truth-about-google-pa...

(Not affiliate links by the way - they sell premium cache-solution plugins)

But like Jovo says in his blog, those speed-checkers give different results and I don't feel I can rely on any of them. With GTmetrix, one of my sites was always slow (6 - 30 seconds depending on the time I test), but I changed the server location from Vancouver to London UK, it now always shows much faster rate (2-3 seconds)

Pingdom always gives me "super-fast" results, like 1.1 - 1.5 seconds.

https://tools.pingdom.com

With all that said, I find one of my site "actually slow" on my mobile phone. I managed to get rid of all the render-blocking javascript and CSS. But it takes several seconds to open it up on my phone with 4G signal. I'm using a premium theme and awaiting to hear the answer from their developer...

Login
Create Your Free Wealthy Affiliate Account Today!
icon
4-Steps to Success Class
icon
One Profit Ready Website
icon
Market Research & Analysis Tools
icon
Millionaire Mentorship
icon
Core “Business Start Up” Training

Recent Comments

30

Ray, the W3TC plugin looks promising. I took your link to the article and studied the screenshots (from customizewp),

Looks like it's minifying the files—at least it allows one to select which files. This is very positive.

Does the plugin also allow you to move, or add the defer or async attribute to JavaScripts?

--Fran

Hi Fran,

Wow, thanks for checking! It's good to know that W3TC works. I've just taken a screenshot of the options as attached....(if that's what you mean?)

Although in my case I use Thrive Content Builder plugin to edit my sites, and if I minified these jQuery files using W3TC, the Thrive CB would stop working. And Thrive's technical support advised me not to minify, so I'm not actively using W3TC now.

Thanks again Fran, I appreciate it!

Hi, Ray! While I have not yet loaded the W3TC plugin you mentioned, that article you researched and linked to had plenty of screenshots—yes, like the one you just added here. Thank you, again.

The reason why it looks so promising is the way in which it gives one a _choice_ of the files to minify (and then whether to combine them or not).

But this is interesting about Thrive having problems with the W3TC's JQuery minification. It goes to show how important testing is. Yes, I imagine that there are a number of plugins that really require JQuery in the head of the document (minified or not). In the many potential combinations (within and between plugins), there's a conflict, somewhere, waiting to happen. Thanks for all of your research and also this latest nugget. It's great and very helpful!

--Fran

Hi Fran, thank YOU! again, for the explanation. I just read Jovo's original post again, and what you said about JQuery files and this are beginning to make sense to me now.

Thanks gain for your help, I appreciate it!
Ray

Ray, I applaud you for testing as you've done, and researching and reporting. We all have to deal with things like this; and often, it's just trial and error, as you have seen. Thanks again! I got a lot out of your review here.
:)
Fran

Thank you so much Fran, you're a star, you know!

Thanks for the info, that's great!
I use Thrive Content Builder to create my posts and it seems to conflict with cache-clearing plugins. Those jQuery files have to be called in the header in my case... I cleared them, and the content builder stopped working. Thanks again for the training pages :-)

I have been told that it depends on the theme you use and it is up to the theme supplier to correct

Thanks Paul, I've contacted the theme's support now, hopefully they'll come back with a good news. Thanks, have a good Sunday evening!

I've just spent two days working back and forth with WA Support on an issue on my website from trying to fix the speed of my website with 'Leverage Browser Caching' and other WP carp. Not what I want to do.

I just ran a test with pingdom.com and it says I'm good. That's good enough for me. You can't wait for my site to load, that's okay just move on.

Yes you're right Phil, you can be as pedantic as you wish but I guess you need to draw the line to focus on other areas...I just opened your nice site and it seems so quick. It's good it's sorted :-)

Hey Ray, thanks for looking.
Could I impose on you to leave a Comment, even it's just "TEST... TEST... TEST"

I want to see if you get this Error message.

Hi Phil, apology for the delay! I just left a comment and didn't get an error message - hope it's working?
Ray

Ray, I just installed AntiSpam Bee and I think it just marked your comment as Spam???

So, far it's working for everybody else that tried leaving a comment.

I like your website.
Phil

Hi Phil, thanks for your comments too! I like your website, that's a kind of site that I'd like to do in the future!

I wonder it's the context - the comment I left on your site was fairly low quality (sorry) merely saying "your site is great, I like your page" and got caught by your AntiSpam? I'm only guessing... Thanks again Phil :-)

Hey Ray, thanks for the effort.
Phil

PS, I just left a follow-up comment on your website.

Thank you so much Phil! Have a great week :-)

I am not at this level yet I haven't got my degree in IT fiddledom!

It's not the best way to spend Sunday either....!

Lol!

And you tested only the homepage!http://winningwp.com/gtmetrix/

Ah, thanks Dorina, that's a great instruction. I've seen the name Daniel Pataki somewhere else. I'll follow what he says!

Wow, that's very helpful, thank you! I'll do that right now!

You welcome!A nice Sunday!

Thanks :)

Thanks Jude for stopping by, it's a bit too technical for Sunday morning!

Thank you Ray. The text about W3TC looks good. You say the procedure helps a little, so is it worth effort?

Hi Jovo, yes I think it's worth a try, but it may not eliminate them. Mine were the same as the two lines that show in your blog (ending with "query..js..") W3TC eliminated these lines from one of my sites, but not from the other one. The only difference is that I'm using different themes...

See more comments

Login
Create Your Free Wealthy Affiliate Account Today!
icon
4-Steps to Success Class
icon
One Profit Ready Website
icon
Market Research & Analysis Tools
icon
Millionaire Mentorship
icon
Core “Business Start Up” Training