Render-blocking JS picked up even after moving them to footer

[Armand Szoke]

Hi All, 

I hope someone can help out on the following:

We've started optimising our websites for PageSpeed Insights and these went well up until the following has come up:

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fveetee.mcm-zeus.co.uk%2Fen-gb

For this site, no matter what we do with the JS files (moved to footer from head then to before </body> tag), we can't get these removed. On our other sites using the same technology and layout, these got removed from the issues, but for some reason they aren't for this site. 

We also tried cutting these scripts back, eliminating social tracking pixels and other non-essential items, to no avail.  

The current view is the cut-back version.

I know we could add 'async' to these external files, but that would mess up the order they load in and the inline JS blocks wouldn't run either. This probably wouldn't work with bundling either - for exactly the same reason. 

It's also worth pointing out that the CSS files are also picked up as render-blocking, even though we used the deferring technique mentioned in the best practices.

Any help would be much appreciated. 

[Rick Steinwand]

Is your JS used to render the page or just used after the page has loaded?

Are you inlining critical CSS when deferring CSS files? https://jonassebastianohlsson.com/criticalpathcssgenerator/

[Rick Steinwand]

[Rick Steinwand]

It failed to mention Your page has 11 blocking script resources and 4 blocking CSS resources. This causes a delay in rendering your page.

Why don't you re-assess how many of those scripts you really need, and combine them into one script you use on every page and use that for simple pages and combine the rest for complex pages (like pages with forms or other use). You should really get that down to at most 3 scripts. My website never has more than 2 style sheets, and just one for the public side.

Check out the suggestions using GTMetrix: https://gtmetrix.com/reports/veetee.mcm-zeus.co.uk/QAlE3m2e and WebPageTest https://www.webpagetest.org/

[Armand Szoke]

Hey Rick,

Thanks for the ideas.

CSS - wise we normally have a core CSS that we use globally and external CSS files that we defer (just like we do on the site using the JS loader recommendation from Google).

Scripts - again, combining (bundling) them is an option and we'll probably do that, but the fact that they are thought to be render blocking is quite baffling since a single, combined JS file will also be render blocking in the same position. :/

I've checked out the resources you posted - they're quite useful, thanks.

[Armand Szoke]

The JS is not used to render the page, simply for jquery and related plugins, animations, ajax requests, etc.

We do inline critical CSS, but we'll review that with the tool you recommended.

Cheers.

[Rick Steinwand]

If the JS isn't used to render the page, you should be able to defer multiple external files, but async a single file.

[Armand Szoke]

Yeah, that's probably what I'm gonna have to do - bundle them together and put async on it. 

Although I'm a bit concerned other, page-specific inline JS codes that might be dependant on the bundled JS files..

We'll see what happens, though.

Thanks a lot!

[Jaspreet Singh]

hi rick,

my webpage is showing Leverage browser caching js files, coming from addcode.. could you please tell me some solution to fix that...

[Rick Steinwand]

Are they YOUR files or files on other sites that you've linked to?

You can only control what you host on your site. I only see the message for Google Analytics, which I have to ignore.

If they're your JS files, the fix depends if you have Apache or IIS (Windows) server.