Page Speed Issue

Highlighted

Wondering if anyone could assist with this 

Google is saying there are issues with page speed on my site 

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

Your page has 6 blocking script resources and 4 blocking CSS resources. This causes a delay in rendering your page.

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

Remove render-blocking JavaScript:

Optimize CSS Delivery of the following:

 

How do I fix these? (this is desktop) 

The mobile is even worse :( see below 

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

Your page has 6 blocking script resources and 4 blocking CSS resources. This causes a delay in rendering your page.

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

Remove render-blocking JavaScript:

Optimize CSS Delivery of the following:

0 Likes
Shopify Partner
1305 14 167

The browser will stop everything from rendering the page until it will download, parse and execute those files.

Some of the JavaScript files form there can be loaded async, this will load the assets in a non blocking way. Other files are injected by Shopify or 3rd party APPs, you can't optimize them.

Same thing with the CSS files, I've rune a network load test and there are 15 CSS files, you need to combine them to reduce network requests... Things will change with HTTP2.

The Google PageSpeed gives a good overview of the network load. You can also run http://www.webpagetest.org/. What you are really interested when optimizing your site is the Start Render metric, when your user sees meaningful content.

Hope it helps

https://sections.design tips, tricks & Shopify sections
0 Likes
New Member
1 0 0

Hi,

I know I'm a little bit late to the party ;)

You could use free services like the one at https://www.sitelocity.com/critical-path-css-generator to generate the critical css for the above the fold content. You can then just inline the generated css snippet into the head tag since it will only have a few kb.

Hope it helps

Cheers

0 Likes
Shopify Partner
1305 14 167

Critical path CSS is something you can do to ensure a fast render.

The problem with this and Shopify is that is not really maintainable. For every template page you would have to do this. And for every CSS modification you do this CSS needs to be regenerated.

It is something you can do but takes lots of maintenance.

https://sections.design tips, tricks & Shopify sections
0 Likes
New Member
1 0 0

Michael,

Thank you for sharing the URL for Critical Path CSS generator, very helpful tool espscially since we use a custom design.

Bravo! 

0 Likes