Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Critical CSS

critical-css-extractor.kigo.studio

Post reply on HN
Print view View original

81–90 of 124 posts

Re: Critical CSS

#81

Post by youngtaff »

lelandfe wrote: post #6

Nice one. Would be cool if this also handled responsiveness. The need to dedupe responsive critical styles has made me resort to manually editing all critical stylesheets I've ever made. I also see that this brings in CSS variable definitions (sorry, ~ custom properties ~) and things like that. Since critical CSS's size matters so much, it might be worth giving an option to compile all of that down. > Place your orig…

I wouldn’t use the JS hack to load CSS…

When the stylesheet loads and is applied to the CSSOM it’s going to trigger layout and style calculations for the elements it’s applied to maybe even the whole page

Browsers are pretty eager at fetching stylesheets even those at the bottom of the page

Re: Critical CSS

#82

Post by youngtaff »

rtsil wrote: post #72
lxe wrote: post #71

Earlier quoted context omitted.

Unless you're sure that your the "non-critical" css doesn't cause layout shifts (aka, it doesn't overload any "critical" styles), you're gonna see layout shifts even on fast connections if you load some styles at the top of the document and then do a link rel at the bottom.

The critical css should cover everything above the fold to avoid that visible reflow.

Where’s the fold in a world of 000’s of viewports?

Re: Critical CSS

#84

Post by lelandfe »

youngtaff wrote: post #81
lelandfe wrote: post #6

Nice one. Would be cool if this also handled responsiveness. The need to dedupe responsive critical styles has made me resort to manually editing all critical stylesheets I've ever made. I also see that this brings in CSS variable definitions (sorry, ~ custom properties ~) and things like that. Since critical CSS's size matters so much, it might be worth giving an option to compile all of that down. > Place your orig…

I wouldn’t use the JS hack to load CSS… When the stylesheet loads and is applied to the CSSOM it’s going to trigger layout and style calculations for the elements it’s applied to maybe even the whole page Browsers are pretty eager at fetching stylesheets even those at the bottom of the page

That stylesheet application was going to happen anyway, the difference now is that FCP will occur before it.

> Browsers are pretty eager at fetching stylesheets even those at the bottom of the page

Browsers begin fetching resources as they discover them. For a big enough document, that will mean low placed resources will suffer.

Re: Critical CSS

#85

Post by rglover »

dimmke wrote: post #66
oneeyedpigeon wrote: post #32

Feels like premature optimisation to me. Are there really cases where the CSS is so complex or the page loads so many resources that this effort is worthwhile? Maybe with the most complex web apps, I guess, but for almost all cases, I would have thought writing clean CSS, HTML, and JavaScript would render this unnecessary or even counterproductive.

Seriously. When I look at the modern state of front-end development, it's actually fucking bonkers to me. Stuff like Lighthouse has caused people to reach for optimizations that are completely absurd. This might make an arbitrary number go up in test suites, at the cost of massively increasing build complexity and reducing ease of working on the project all for very minimal if any improvement for the hypothetical end…

Yup. Give people a number or stat to obsess over and they'll obsess over it (while ignoring the more meaningful work like stability and fixing real, user-facing bugs).

Over-obsession with KPIs/arbitrary numbers is one of the side-effects of managerial culture that badly needs to die.

Re: Critical CSS

#86

Post by RadiozRadioz »

I prefer a different approach: write your HTML in such a way that the page makes sense and is usable without CSS. It's also a good guiding star for your page's complexity; if your document markup is simple, sensible and meaningful, you're probably not overcomplicating your layout.

Re: Critical CSS

#87

Post by chipsrafferty »

RadiozRadioz wrote: post #86

I prefer a different approach: write your HTML in such a way that the page makes sense and is usable without CSS. It's also a good guiding star for your page's complexity; if your document markup is simple, sensible and meaningful, you're probably not overcomplicating your layout.

This doesn't really work for sites where reading text left to right, top to bottom is not the primary focus.

Re: Critical CSS

#88

Post by crazygringo »

I don't really understand the point of this.

Most of the CSS that gets used below the fold on a single page on most pages, gets used above it too. Especially when considering it needs to handle large desktop monitors, and responsiveness. And then remaining part (e.g. styling a footer) is tiny.

The CSS "bloat" that you might want to delay loading is CSS for the rest of the entire site, including all sorts of legacy stuff that might not even be used anymore.

There are lots of strategies for how to load CSS used only by the page, as opposed to the site, which involve various tradeoffs, but can be worth it.

But loading CSS for part of a page seems almost nonsensical. It's not like lazy-loading large images, where we're sometimes talking about megabytes. The CSS used on any single page is usually pretty small to begin with, and even smaller zipped.

Re: Critical CSS

#89

Post by chipsrafferty »

worthless-trash wrote: post #13

Why worry about this when companies pakage 10mb of javascript. Is this really where the problem is ?

If a candy or soda can go from 50g sugar to 40g without a significant change in flavor, they definitely want to. They don't have to get to 5g for it to be worthwhile.

Re: Critical CSS

#90

Post by Klonoar »

optimog wrote: post #22
n3storm wrote: post #16

Wordpress plugins and builders like Divi and Elementor has been inserting all css for every page part or component anywhere in the body for years. I hate it. But, thas this critical css means they have beeing doing it right all along?

No, having an external file makes it cacheable locally. If every new page loads some of the same css again and again, it's a waste of bandwith. You should already have the stylesheet on your computer by then.

I often wonder if this bandwidth is as big a deal as people make it out to be.

On a very high traffic site, sure. Anything smaller and I’d argue you should just shove everything down the pipe in one request if you can.

If the bandwidth bothers you, delete an image. You likely don’t have anywhere near that amount in CSS to make up.

Post reply on HN