Load Critcal CSS

Highlighted
New Member
4 0 0

Hi,
you can print the contents of the css files into pages?

<style>{{ "critical.css" | asset_url }}</style>


Thanks

0 Likes
Shopify Expert
9675 41 1361

Hey Simone,

The code you've added above will just add the a string containing the path to the file. If you need to inline CSS into a page those styles will need to be in a template file (not asset). A snippet would be a good example.

  • Add your css into a snippet called styles.liquid
  • Include that snippet in the page template
<style>{% include 'styles' %}</style>

Do keep in mind that you won't be able to see sass (scss) formatting. Standard CSS only that doesn't need compiling.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
New Member
4 0 0
Thanks so much
0 Likes
Shopify Partner
1305 14 167

I think that this is a great question, Jason gave you the answer on how to do it.

I've been thnking for some time at something like this. Since stores do change the CSS a lot, the critical css should be always up to date.

I am thinking at an APP, themes/update webhook can listen to any style update probably by keeping references to CSS files.

Addy Osmani have a great node.js critical path generator https://github.com/addyosmani/critical. On themes/update the APP can write the CSS onto a theme snippet like Jason mentioned.

In the theme you would need to include that snippet. The good part is that the critical css will be always synced with the theme CSS assets.

I think that this should be doable and hope to have the time to at least give it a try. 

https://sections.design tips, tricks & Shopify sections
1 Like
Tourist
5 0 2

Mircea, this sounds cool.

0 Likes
Shopify Partner
1305 14 167

Can be usefull also.

https://sections.design tips, tricks & Shopify sections
0 Likes
Tourist
5 0 2

looking forward to it :)

 

0 Likes
New Member
3 0 0

Here is the app you are looking for guys! Also it's totally free!!!

It's not officially published yet. You can give it a go here.

0 Likes
Shopify Partner
1305 14 167

Form a quick look this APP is just injecting some CSS to the page

What we need is something that automatically generates the "critical path" CSS.

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