Defer non-critical CSS

Zygmunt_Korczyń
New Member
3 0 0

Hello everyone, 

 

I'm trying to improve the performance of my website. To make this work, I'd like to start with deferring non-critical CSS. I found an interesting function which loads CSS asynchronously. You can read more about it here.

 

However, I'm not sure how does it scale to liquid. I have the following code in my <HEAD> section:

{% include 'bc-sf-filter-style' %}

which obviously load the CSS of one of my third parties application.

 

Is there a way to use loadCSS with liquid? I don't even know the location of the CSS file because it's just saying "include" and the file name I guess.

 

Thank you,

Mateusz

0 Likes
Mircea_Piturca
Shopify Partner
1489 42 316

You can create a CSS file stored in the assets folder and copy the contents of that file there.

This way you could defer load it as described in this article:  https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

 

I believe that bc-sf-filter-style is only used on collection pages by a custom filter APP.

If this is the case, a quick win would be to just include it on collection pages.

 

{% if template contains 'collection' %}
  {% include 'bc-sf-filter-style' %}
{% endif %}
Finally—Add variant descriptions to your products
0 Likes
alexflorisca
New Member
5 0 0

Hi Mateusz,

I've just been recently working on this problem.

One way to do this is to use Addy Osmani's critical css generator tool. You will need to have this as part of your build system, and run it every time you make a change to your theme's css files. I used this tool to fetch the critical-css for each page of a Shopify store and include it in a snippet that looks something like this:

 

 

{% if template contains 'product' %}
<style id="critical-css-product">[...critical css here]</style>
{% elsif template contains 'collection' %}
<style id="critical-css-collection">[...critical css here]</style>
{% elsif template contains 'list-collections' %}
<style id="critical-css-list-collections">[...critical css here]</style>
{% elsif template contains 'customer' %}
<style id="critical-css-customers">[...critical css here]</style>
{% elsif template contains 'search' %}
<style id="critical-css-search">[...critical css here]</style>
{% elsif template contains 'cart' %}
<style id="critical-css-cart">[...critical css here]</style>
{% elsif template contains 'blog' %}
<style id="critical-css-blog">[...critical css here]</style>
{% elsif template contains 'page' %}
<style id="critical-css-page">[...critical css here]</style>
{% elsif template contains 'article' %}
<style id="critical-css-article">[...critical css here]</style>
{% else %}
<style id="critical-css-index">[...critical css here]</style>
{% endif %}

 

 

I then included this in the main theme.liquid file.

I found doing this each time I changed my theme's css a bit tedious so I built an app that solves this problem and generates the critical css for you automatically with 1 click. You can find the app here 

I hope this helps.

Alex

0 Likes