How to inline critical css and js

New Member
18 0 0
Been trying to do what Google pagespeed insights asks and inline the critical css and Js above the fold but everything I try breaks the site would love some suggestions so I can get my site faster kinda slow right now says it's in the 20 something, let me know what you think.
https://www.chicberri.com
0 Likes
Shopify Partner
1361 21 195

This is usually done with build systems, see Slate: https://github.com/Shopify/slate

Basically add to the build pipeline something like this: https://github.com/addyosmani/critical

 

It is not something you want to do via the Theme Editor (although possible).

https://sections.design tips, tricks & Shopify sections
0 Likes
Highlighted
New Member
18 0 0
How do you incorporate your website into all this, I don't get how to use
that
0 Likes
Tourist
13 1 2

Hey Brandon,

 

Your site is at 98 for desktop which is a great score. You could improve mobile with the following (most sales are heavy on mobile lately):

 

  • Lazy load your images below your fold (you can use https://github.com/aFarkas/lazysizes to do so, this will require a few code changes on your theme)
  • Minimize your theme.js file (you can use https://jscompress.com to fully compress and save some bytes)
  • Defer your js as well in your theme.liquid (assuming it's setup this way in your theme):
    <script defer src="{{theme.js | asset_url}}"></script>

The above serves as a good starting point, ping us if you have any issues or discuss further!

Need shopify help? Drop us an email hi@cnvs.la
Web: www.cnvs.la
0 Likes