Critical CSS? Not So Fast

Post by wonnage » Sat, Sep 10, 2022, 4:44 PM UTC

laundermaf wrote: post #16

wonnage wrote: post #7

Nowadays it's probably better to just prompt the browser to preload CSS early with a link preload header. Any page complicated enough to need critical CSS extraction is probably also going to take 50-100ms to render and transfer to the user. Just send the headers before you render and the client will probably have finished downloading them by the time you're done. If clients are on a crappy network, critical css is e…

I don’t find the HTTP headers approach useful. Headers only appear a few bytes before the HTML so if you keep the regular link tag right at the top of the file you’re good to go; no need to mess with headers. Every HTML file should start with: doctype, html tag, head tag, charset meta tag, title, stylesheet link tag. A couple of those tags are even optional.

Post by cercatrova » Sat, Sep 10, 2022, 5:03 PM UTC

troysk wrote: post #13

dmix wrote: post #9

Earlier quoted context omitted.

> worthwhile to spend all this engineering effort manipulating, culling, tree shaking, modularizing our CSS? You don't have to ever think about this stuff if you use a component-driven frontend framework like Vue w/ Vite (or Webpack). The general design: you use one global .css file for your shared styles (app.css) and then each component has their own inline CSS. Vite will automatically extract each component JS and…

The way SPAs work is very performant but are also poor for indexing. Critical Path CSS is mostly used in user facing sites which one wants to get indexed by Google. As page speed is one of the factors considered in SEO, and rightly, one tries to optimize that. Vue, React, etc. are poor at SEO as they do not even try to do solve the problem as they are used to build apps and not sites.

Post by e12e » Sat, Sep 10, 2022, 5:29 PM UTC

dotancohen wrote: post #22

dpacmittal wrote: post #8

Earlier quoted context omitted.

This is the reason I love tailwind. There's no bloat, no headache of naming conflicts (in fact they completely did away with naming), no orphan css. CSS for a full blown website can be less than 5kb. It takes away the pain of thinking about CSS architecture, naming things, conflicts etc and you can just focus on styling.

Tell us a bit more about Tailwind. Last I looked at it a few years ago it seemed a conglomeration of antipatterns. Quick googling is not convincing. Assume that I know _nothing_ about Tailwind, sell it to me. I'd appreciate it. Thanks.

   ... class="block   shadow   rounded-md   border   border-green-400
       outline-none  px-3   py-2   mt-2   w-full " 

  ... class="input-field" via tailwind:


     .input-field {  @apply 

         block   shadow   rounded-md  
        border   border-green-400   outline-none 
         px-3   py-2   mt-2   w-full 

    }

Post by e12e » Sat, Sep 10, 2022, 5:33 PM UTC

ehnto wrote: post #43

vehemenz wrote: post #41

Earlier quoted context omitted.

How is a class with a single rule, that does exactly what it's supposed to, not "semantic?" What do you think "semantic" means, in this context? Maybe you mean classes organized with a high level of abstraction that have multiple rules and are meant to be related to the document structure in a specific way?

They might mean a system like BEM, where they are semantic in that they represent concepts tightly coupled to the HTML and what it's used for. ...etc BEM is a good example of what Tailwind is a counterpoint to.

Post by 7sidedmarble » Sat, Sep 10, 2022, 6:46 PM UTC

ehnto wrote: post #6

First up, agree with the author. Now if I may, a rant. It boggles the mind that we style bikeshed over CSS. Is it honestly, truly, and pragmatically worthwhile to spend all this engineering effort manipulating, culling, tree shaking, modularizing our CSS? Pre-load that, inline this, async-load that, and what have we got for it? A web full of wiggling content, slow CDNs, dozens of requests, and an experience of a mis-…