6 ms·
>no stylesheets Well, there is a fair amount of css wrapped in <style> tags. Not sure I understand the upside of not putting it in a separate file. Though the
by tyingq 4y ago
>no stylesheets
Well, there is a fair amount of css wrapped in <style> tags. Not sure I understand the upside of not putting it in a separate file.
Though the look is reasonably pleasant.
Edit: The example blog also loads js, despite the "no javascript" claim. Like: <script src="https://cdn.usefathom.com/script.js https://cdn.usefathom.com/script.js" data-site="WKWMFTPV" defer></script>. Perhaps that's not a default thing, but it seems odd to link to an example blog that doesn't match the sales pitch.
- twohaibei 4y agoDepending on the styles inside of that style tag it can be faster because of lack of separate http request to fetch it.
- kabirgoel 4y agoYep, although on HTTP/2 this shouldn't be an issue anyway.
- Kaze404 4y agoInline 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)
- deleted 4y ago[deleted]
- KronisLV 4y ago> Edit: The example blog also loads js, despite the "no javascript" claim. Like: <script src="https://cdn.usefathom.com/script.js https://cdn.usefathom.com/script.js" data-site="WKWMFTPV" defer></script>. Perhaps that's not a default thing, but it seems odd to link to an example blog that doesn't match the sales pitch. Seems like this is loading Fathom analytics: https://usefathom.com/ https://usefathom.com/ Probably safe to turn off, as uBlock Origins and other ad blocking solutions would, depending on your settings. So I guess in a way the site itself works just fine without JS enabled and doesn't require it, but the authors have chosen to add analytics to see who uses their site, then.
- HermanMartinus 4y agoBear Blog users can optionally add Fathom as an analytics tool. It's a fair criticism that this adds JS, but Fathom is arguably the best choice for analytics (maybe Plausible as well).
- HermanMartinus 4y agoCreator here. So it may be a bit pedantic, but yes, there are styles (pure HTML isn't the most pleasant to read) but no external stylesheets. I ran a bunch of tests when setting it up to see what loads faster and it turns out the <style> tag in the head, with such minimal styles outperformed external stylesheets (even though the browser can cache them). With styles so small once the html page is loaded (at 2-5kb gzipped) the styles are immediate, whereas even if retrieving from browser cache the html needs to load first before it can take effect. The second bit with Fathom analytics is that users can optionally connect Fathom to their accounts (this is the only analytics tool you can connect since they have a track record of being trustworthy). But yes, it is technically included JS.