Eliminate render-blocking JavaScript and CSS in above-the-fold content

[Pico Bags]

Hello friends , i am web developer and having an issue regarding to the loading speed of my website ( www.picobags.co.uk ). I have found so many tools that shows a problem like, Eliminate render-blocking JavaScript and CSS in above-the-fold content. Now i am unable to solve it. Please help me out.

 

[Paul Murray]

Render-blocking Javascript basically means Javascript that runs before the page has loaded all the DOM elements. You will need to defer the JS functionality until after the page fold elements have loaded.

Render-blocking CSS is caused by having a number of CSS files that must be loaded and parsed first. You can reduce/prevent this by using less CSS files and less CSS in general.

 

[MrDaveFoy]

@Pico Bags I see your site is on Shopify? You might have problems moving the calls to JS and CSS in your templates in that case.

Are you using Google's page speed testing tool? I wouldn't get too hung up about some of the issues it reports (like render-blocking). Sure, it's better to reduce the number of calls to JS and CSS, move them below the page content, etc. But in many cases it's not desirable for the proper functioning of your site, or you don't have control over it anyway.

Fix what you can, and then look at the ACTUAL page load speeds. They're far more important. Google's tool is just a blind robot and doesn't know any different.

I like GTMetrix for page speed tests, as well as https://www.webpagetest.org/. Also use the page speed tools in Chrome developer tools. They'll record your actual page load speed in the browser for you.

Hope that helps. I'm happy to take a further look if you need it.