- This topic is empty.
October 21, 2015 at 10:14 am #209965
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:
He mentions that when your stylesheet is under 50k that it might be a good idea to inline your entire stylesheet.
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.October 21, 2015 at 4:41 pm #209976
It’s far from perfect but inlining really does make a significant noticeable perceived difference on a slow connection.October 22, 2015 at 8:23 am #209991
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.October 24, 2015 at 7:03 am #210108
Thanks for the responses. So the projects I mentioned all use WordPress. You can see how I am loading assets here on line 172
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.October 25, 2015 at 4:36 am #210155
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
.cssonce 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
.csswill 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.October 25, 2015 at 6:41 am #210160
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.October 25, 2015 at 7:03 am #210161
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.October 25, 2015 at 7:37 am #210162
Normal web pages cache just fine. Dynamically created CMS content may be different.October 25, 2015 at 7:42 am #210163
What are you talking about? You can’t cache HTML on users browser, only resource files. If you link to a file, like
main.cssthis 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.October 25, 2015 at 9:10 am #210164
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.October 25, 2015 at 9:30 am #210167
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.htmland you link to a resource like
main.css. And then you navigate away from that page to something like
main.csswill be loaded from cache. Essentially speeding things up. No additional network requests.
- When you inline the whole CSS, and visit
index.htmlthat response is cached sure, but when you navigate away from that page, to
about.htmlthe 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
/aboutand use it at
/contact.October 25, 2015 at 10:31 am #210170
When thinking about critical path CSS, perception plays a big role… following is a great talkOctober 25, 2015 at 10:34 am #210171
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_expiresis that Google PageSpeed didn’t start to whine about the fact that I removed
htmlfrom it.October 29, 2015 at 8:03 am #210311
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.
- When you visit for example
- The forum ‘CSS’ is closed to new topics and replies.