Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I am trying add css async but it does not work.
how can add this?
{{ 'styles.css' | asset_url | stylesheet_tag }}
Hello @phpfaruk ,
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
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.
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
<link rel="preload" href="" as="style">
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
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.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024