How to inline critical css and js

New Member
20 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.
Shopify Partner
1346 22 208

This is usually done with build systems, see Slate:

Basically add to the build pipeline something like this:


It is not something you want to do via the Theme Editor (although possible). tips, tricks & Shopify sections
New Member
20 0 0
How do you incorporate your website into all this, I don't get how to use
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 to do so, this will require a few code changes on your theme)
  • Minimize your theme.js file (you can use 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