How can I effectively async or defer CSS in Liquid?

phpfaruk · ‎11-12-2021

I am trying add css async but it does not work.

how can add this?

Cedcommerce · ‎12-10-2021

Hope you are doing well!!

We have gone through the code you were entering, instead of entering that apply this code and let us know:-

"<link rel="preload stylesheet" href="{{ 'styles.css' | asset_url }}" as="style" >"

Let me know if you face any issues, we will help you out. For further concern, you can connect on Whatsapp via this link:- https://chat.whatsapp.com/EFgRCPfCmDjHoZBNcINTEJ

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here

Mircea_Piturca · ‎12-10-2021

Async and defer are attributed only appliable to the script element. These attributes control how the browser will load the script: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

CSS does not have real async and defer attributes but we sometimes "fake it".

Have a look at this code:

<link rel="stylesheet" href="{{ 'theme.css' | asset_url }}" media="print" onload="this.media='all'">

...its a trick

The print media will "tell" the browser only to load this stylesheet only when you print the page. This makes the stylesheet not be loaded until the onload attribute kicks in and changes the media to all. You can read more about it here: https://www.filamentgroup.com/lab/load-css-simpler/

I do not think that you should do it.

Until the "async" CSS loads your page will be unstyled, will be a bit of a mess. This can be a powerful optimization technique but not doe right will cause CLS (content layout shift) issues.

Finally—Add variant descriptions to your products

QuintenM · ‎12-11-2021

I highly advice agains't this.

Your website requires this stylesheet to look the way it does by having it load later you are only slowing down the time it takes for the user to get a visually good looking website its not going to give any speed improvements.

however to answer your question

in the href you'd put your stylesheet asset url

If you want to focus on speed improvements instead try to split up your styles.css into a global css (which would be used to store the style rules that apply to every page) and then to make multiple small css files that you ONLY load onto the page where they are specificly made for.

This will greatly improve your site speed by having your users only load css thats important for them. and the webbrowser only having to calculate and process important css

Software developer focused on speed and customization in websites

My Youtube channel

Youtube channel for some tips/tricks and website reviews
( from a developer point of view to help both store owners as developers )

Mircea_Piturca · ‎12-11-2021

Delay loading CSS is a powerful optimization technique. Some build systems create a minimal critical inline CSS and load the rest of the styles after the initial load. This ensures a fast initial paint and no CLS as the critical inline CSS gives the page structure.

I also advise against it as it can go terribly wrong if you do not know what you are doing.

rel=preload tells the browser that the respective resource needs to be loaded fast. It's a hint. In this case, rel=preload is the exact opposite of async or defer.

As style sheets placed in the <head> are early discovered by parsers and will load with a high priority I do not usually preload them, I let the browser do its own thing.

If you want to optimize your theme you need to know the basics, if not just go with the theme give you. Otherwise, you risk making a mess.
Most themes from the app store are well optimized.

Finally—Add variant descriptions to your products

How can I effectively async or defer CSS in Liquid?

How can I effectively async or defer CSS in Liquid?

Community Blog Articles