Online store performance and site speed optimization
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
Hello!
I'm currently in theme.liquid and want to inline my CSS into the head with
<style></style>
It works just partly because I have two places where theme.css is included:
1. The first place, looking like the following code snippet, I can calmly comment out or delete after I added my styles inline.
<link rel="preload" as="style" href="{{ 'theme.css' | asset_url }}">
2. But the second place, looking like the following snippet, loads the theme.css again,
{%- render 'font-face' -%}
{{ 'theme.css' | asset_url | stylesheet_tag }}
{%- render 'css-variables' -%}
and if I remove this part, which loads theme.css,
{{ 'theme.css' | asset_url | stylesheet_tag }}
my page loses font styles.
What should I do to achieve working of my inline styles?
Solution: copypaste error, style rules were partly commented out and because of this misinterpreted.
You shouldn't inline your entire stylesheet.
You'll end up loosing the benefits of caching.
If you'll doing this to improve your pagespeed performance, I reccomend do a critical CSS and non render blocking CSS setup instead of inlining your entire stylesheet. and set it up so the css is non render blocking when you first visit the website, then normal afterwards.
Isnt HTML cached? Why do I loose cache benefits?
In the case of Shopify, its not.
Even if it did let your browser cache HTML, imagine you load the homepage, that's cached, but then you load the product page, the HTML is diferent from the homepage, so it wouldn't be cached and you would load it from scratch.
Stylesheets are assumed to be consitent regardless of what page you load them on, so these are cached, but once you move your stylesheet inline, the CSS no longer being cached and each time you load a page, you have to deal with the extra weight the stylesheet adds to the HTML document.
Of course, it all depends on your circumstance and goals, I've had a client who wanted to have all their CSS inline becuase they wanted a great PSI score, and having it inlined gave a slightly better score then in a CSS file.
User | RANK |
---|---|
2 | |
2 | |
2 | |
2 | |
2 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022