when to inline your entire stylesheet when using critical path rendering CSS

[pkinchla]

So I have been thinking about possibly inlining the entire stylesheet into the head of the document for a couple of projects I work on. These projects share the same traits.

• They all have stylesheets that hover around 30k.
• They all have a critical path stylesheet that is inlined in the head.
• They all use LoadCSS to asynchronously load the rest of the styles.

I plan testing this later tonight but I was wondering if anyone here had thoughts on this. I got the idea from this article:

http://www.nateberkopec.com/2015/10/07/frontend-performance-chrome-timeline.html

He mentions that when your stylesheet is under 50k that it might be a good idea to inline your entire stylesheet.

thoughts?

P.S. One of these projects has some pretty bad page thrashing going on when the page is painted. One of my hopes is that inlining everything might minimize this.

[pkinchla]

It’s far from perfect but inlining really does make a significant noticeable perceived difference on a slow connection.

[Alen]

@pkinchla

Inlining the whole CSS, you will lose benefit of browser caching. Since the data will be transferred on each request and not be cached by user’s browser.

Critical CSS is about perception of speed. You want the user to have something to interact with while the rest is downloading.

[pkinchla]

Thanks for the responses. So the projects I mentioned all use WordPress. You can see how I am loading assets here on line 172

https://github.com/pkinchla/mothership/blob/master/wp-content/themes/special/functions.php

So I did some initial testing on my own site with inlining my entire stylesheet in the head and have not really seen any performance improvements.

At least for myself I did just move to http/2 — So my days of worrying about blocking requests for that site are numbered.

Any other general tips or thoughts would be much appreciated.

[Alen]

The paragraph about that goes back and forth a bit but I believe that with inlining they mean placing it in the head section. Then it would still be cached of course. @shikkediel

No it wouldn’t. When you link to a resource like .css once the file is downloaded by the browser it is stored in browser cache. So if the user was on the home page and they navigate to different location the same .css will not be downloaded, instead loaded from the cache.

So if you place your entire stylesheet in the head, this means, that each time this document is requested, since the data is in the head, it will be downloaded each time, as part of the HTML.

So I did some initial testing on my own site with inlining my entire stylesheet in the head and have not really seen any performance improvements. @pkinchla

Please be careful about what you are measuring.

Any other general tips or thoughts would be much appreciated.

Have you tried Service Workers.

[Shikkediel]

I would think any HTML is cached just the same… but I was considering a single page situation since there’s no mention of shared style sheets anywhere.

[Alen]

I would think any HTML is cached just the same @shikkediel

You can’t cache HTML, you can cache a HTML version of your response on your server so that you can serve it faster of the disk instead of requesting it from a database or compiling.

But the HTML still needs to come down the pipe. And if you inline extra information, in the HTML, that too needs to be transferred on each request.

There’s nothing to load from browser cache otherwise.

[Shikkediel]

Normal web pages cache just fine. Dynamically created CMS content may be different.

[Alen]

What are you talking about? You can’t cache HTML on users browser, only resource files. If you link to a file, like main.css this can be cached by the browser. If you inline this file, in the head of HTML, on each request you’ll be downloading this additional data. Web is stateless. Server will respond with new HTML which has to be downloaded. If your inlined CSS is additional 50k, this will be downloaded EACH TIME, not cached.

[Shikkediel]

Is doing this nonsense then (objectively wondering)?

<IfModule mod_expires.c>
<Filesmatch "\.(html|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 month"
</IfModule>

When I look at about:cache, index pages are definitely cached as something…

I was very much surprised that last time we forgot to pay the provider in time, I could not visit any new pages but the static ones previously visited would still show up.

[Alen]

But that’s for repeat visits, what happens when the user navigates to a different part of your site.

To simplify what I’m saying:

• When you visit for example index.html and you link to a resource like main.css. And then you navigate away from that page to something like about.html, the main.css will be loaded from cache. Essentially speeding things up. No additional network requests.
• When you inline the whole CSS, and visit index.html that response is cached sure, but when you navigate away from that page, to about.html the whole new cache needs to be created, so you lose the benefit of cached resources.

URLs are important. You can’t create a HTML cache at /about and use it at /contact.

[Alen]

When thinking about critical path CSS, perception plays a big role… following is a great talk

https://www.youtube.com/watch?v=18s7jJEJeOc

[Shikkediel]

No disagreement then, shared files will definitely make a difference when inlining them. Until the asyncatrribute is cross browser, I find it more trouble than it’s worth to be honest. A flash of unstyled content seems a lot worse to me than a couple of milliseconds delay – there isn’t a good approach without JS for the case where cache has expired but the scroll position is still remembered…

What I found interesting trying out mod_expires is that Google PageSpeed didn’t start to whine about the fact that I removed html from it.

[pkinchla]

I agree totally with the perception vs reality. This plays a big role on slower connections which I which get to witness each morning during my commute on the subway.

When I do speed testing I use speed index as a barometer mainly.

I just want to point out again that were are talking about css that falls under the 20-30k range. Well under 50k.

[Author]

Posts