Async critical code and defer unneccesary code - js/css

JamesHarperA
New Member
1 0 0

Hey!

I was wondering how I would async and defer my critical code from js and css files on my website to eliminate render-blocking resources. I have the code separated into new .js and .css files, but I'm not sure where to go from here. I have tried using script code in my header to async the new files, but it always seems to want to load the original ones right away even if I try to defer them, which I may not even be doing properly.

Is it at all possible to have it async the new .js and .css files, and then defer to the original files for the code that doesn't need to be loaded right away?

Thanks,
James

0 Likes

Hi there, for your issue with render-blocking, you need a bit of coding to fix it:
If you're loading JavaScript files to your website, you can add the attribute "async" or "defer" to your <script> tag, for example:

<script async src="script.js"></script>

or

 

 

<script defer src="script.js"></script>

You can read more about it here:

 

https://flaviocopes.com/javascript-async-defer/

 

To optimize CSS is harder, currently, only Chrome and some modern browser are supporting "preload", you can try to use this library to optimize your website:
https://github.com/filamentgroup/loadCSS

Hope it helped you.

CRO Expert at PageFly - Advanced Shopify Page Builder - Empowering 100.000+ active merchants.

Check our Evergreen List of Best Platforms To Sell Online.

0 Likes
alexflorisca
New Member
5 0 0

Hi Mateusz,

I've just been recently working on loading critical css and delaying the rest of it.

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