5 ms·
Inline CSS has the benefit of not making a second HTTP request, as well as (if I recall correctly) rendering the page styled from the get go, as opposed to once
by Kaze404 4y ago
Inline CSS has the benefit of not making a second HTTP request, as well as (if I recall correctly) rendering the page styled from the get go, as opposed to once unstyled and once again when the CSS has finished downloading.
- treve 4y agoThe issue you're describing only happens when JavaScriptis used to render the CSS.
- julianlam 4y agoThe fact that this needed to be said is concerning. There's no FOUC if you add a stylesheet to <head>, and it concerns me that people seeing that flash have come to expect it as a fault of CSS, when it's really these frameworks making a decision to load the stylesheet via javascript.
- josephcsible 4y agoWhy is seeing plain text before the stylesheet is loaded considered to be worse than seeing nothing at all before the stylesheet is loaded?
- egypturnash 4y agoreflow while you're trying to read something sucks
- agraddy 4y agoI completely agree. I'm promoting a concept called TACE to get back to the principles of the web that were being promoted between 2000-2010. I've realized that a lot of web developers these days don't understand the basic principles of HTML, CSS, and JS because they initially learned web development using a Javascript framework. https://www.agraddy.com/introducing-tace https://www.agraddy.com/introducing-tace
- Kaze404 4y agoI feel like this is an overblown reaction to a single person getting something wrong in the internet? It's not really concerning that not everyone knows everything with a 100% degree of certainty.
- tyingq 4y agoPerhaps, though I thought the net benefit of newer http protocols was to make that second request very lightweight. Then it's also cached if they visit a second page on the blog.
- datalopers 4y agoIt’s text and is transmitted gzipped. This is as close to a non-issue as I can think of.
- tyingq 4y agoNormally, yes, but the sales pitch is "no stylesheets" + "fast", etc. So it becomes a topic of interest.
- butz 4y agoOne might argue, that inline CSS cannot be cached by browser and are loaded with each HTTP document, thus increasing total download size. And using HTTP/2 making additional requests ain't such a big problem anymore. All in all I think developers have considered all options and chose the best solution for their particular use case.
- quest88 4y agoThe browser can cache the http page too!
- gbear605 4y agoTrue, but they can’t cache a portion of the page that happens to be shared across every page on the website. If I go to a dozen different pages on the site, any in-http-page styles will be loaded a dozen times, while a separate style sheet will only be loaded once.
- onlyrealcuzzo 4y agoTrue but blogs are not Facebook. People generally don't visit thousands of pages. 1 visit and bounce is very common for blogs.
- josephg 4y agoVisiting 1 article then bouncing is the most common pattern for blogs by a long way. Also the amount of time taken to download a CSS file is usually much less than the round trip time for requesting the file. Especially in the p90/p99 end of the latency distribution. Here in Australia, I can download a 10kb css file in less than 1ms. But simply requesting that CSS file from America will take 200ms. For a blog, inlining the css is absolutely the way to go. Especially if the css is small (which it should be!).
- Kaze404 4y agoGreat points. I completely forgot about HTTP/2, thank you.
- numlock86 4y agoSeparate CSS has the advantage that it can get cached, so you ideally only transfer it once.
- wbobeirne 4y agoHTML can be cached too, with the right headers.
- mccorrinall 4y agoMost blogs consist of more than a single html page and usually reuse the same styles.
- josephg 4y agoTrue, but most visitors to your blog won’t read more than one page.
- stefs 4y agotrue, but for a blog, the html would be cached per page, which means that if you look at n pages the same css is loaded n times too. depending on _how_ you cache it, there might be a cache invalidation round trip for your css (Q: has this changed? A: no), which might or might not transfer more data than your embedded css anyway.
- fsociety 4y agoHow does that make the website better though?
- Kaze404 4y agoI don't know. You'll have to ask the people who made it.
- s__s 4y agoCSS is render blocking. The browser will never paint anything on screen until it’s downloaded and parsed in to a css object model. Unless you’re hyper tuning the page load performance in some specific way I think CSS is usually best served as a separate asset with a very generous cache time. If the entirety of the CSS is extremely minimal it can make sense to in-line it too. Especially if you can get everything in at under 14kb. (Initial TCP window size)