Current time: 03-09-2021, 11:49 AM Hello There, Guest! (LoginRegister)

Post Reply 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
In-Lining CSS on First Page View
02-26-2015, 07:00 AM (This post was last modified: 02-26-2015 07:03 AM by ajm_76.)
Post: #4
RE: In-Lining CSS on First Page View
(02-26-2015 12:43 AM) Wrote:  Greetings,

I was wondering what people's thoughts are on doing this:

- Inline ALL CSS on first page view (or until the user has it in their cache - can have an AJAX call to the server letting the server know this is complete)
- On that same page view, have the last event that takes place (besides the AJAX call) download an external CSS stylesheet with the same CSS that was inlined so that it is cached for future calls
- On future page views, serve the CSS as an async stylesheet in the HTML HEAD section (which should be cached at that point)

I was doing this just for CRITICAL CSS but I was having rendering above the fold issues that went away when I placed all css in the head inlined.

Initial thought on this procedure is that what if the user clears cache? Well, the cookie that stores the session variables (including the one that the ajax call would set) would be cleared. So what if the user clears cached images and files but not cookies? It would be rare but it could happen. However, since the CSS is async in the HTML HEAD, it would just download it again. Some people say it might defeat the purpose but it is rare that somebody would clear cache and then continue to use the website on that same visit. Future visits would have cookies expired.

Sounds convoluted to me. Why not just inline critical CSS, and after DomContentLoaded, load a single, combined stylesheet from which critical CSS is drawn?

Just a note on this bit:
Quote:I was doing this just for CRITICAL CSS but I was having rendering above the fold issues that went away when I placed all css in the head inlined.

The rendering issues indicate that some CSS critical to the rendering were absent. Inlining different CSS on different pages is fine if that is what is called for to render each page optimally. It is doubly fine all pages are drawing from the same, one, combined CSS file.

Quote:How much critical CSS is too much CSS though to put in HTML HEAD as inline? At what point does this method become user un-friendly? Thoughts?

We have found that (in most instances) so long as the HTML ends up under 50kB, there is no general performance impact (and when there is, it is easily mitigated). For a lot of sites, this of course means that all CSS can be inlined. Most people have a reflexive aversion to what I've just written there, but we've A/B tested and verified this hundreds of thousands of times across hundreds of properties. I encourage others to A/B test their own application(s) and see for themselves.

Managing Partner

Make your WordPress website or blog not just faster & not merely fast, but one of the fastest sites in the ENTIRE WORLD.

Performance. Speed. Get Some. WpFASTER!
Find all posts by this user
Quote this message in a reply
Post Reply 

Messages In This Thread
RE: In-Lining CSS on First Page View - ajm_76 - 02-26-2015 07:00 AM

Forum Jump:

User(s) browsing this thread: 1 Guest(s)