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

31–40 of 124 posts

Re: Critical CSS

#31

Post by larodi »

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…

the prefetch attribute and other HTTP header hints, combined with proper CDN setups does almost the same. and would not require critical CSS to be nonstop rebuilt as the page develops. a properly configured CF is insanely fast.

Re: Critical CSS

#32

Post by oneeyedpigeon »

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.

Re: Critical CSS

#33

Post by Gabrys1 »

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.

I would pay good money for this tool ~12 years ago. We had a site with enormous amounts of CSS that accumulated over the years and it was really unclear which rules are and which aren't critical

Re: Critical CSS

#34

Post by Gabrys1 »

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…

+1 on responsiveness

Re: Critical CSS

#35

Post by DecoySalamander »

lenkite wrote: post #26

Assuming you are using an atomic CSS based framework like tailwind, this would be unnecessary right ? Since all the CSS class names are anyways in-lined with the element.

Your page would still need the full CSS sheet loaded to render properly - tailwing classes do nothing on their own.

Re: Critical CSS

#36

Post by todotask2 »

kijin wrote: post #21
todotask2 wrote: post #17

When I tested mine, I got the following: Built on Astro web framework HTML: 27.52KB uncompressed (6.10KB compressed) JS: Critical CSS: 57KB uncompressed (7KB compressed) — tested using this site for performance analysis. In comparison, many similar sites range from 100KB (uncompressed) to as much as 1MB. The thing is, I can build clean HTML with no inline CSS or JavaScript. I also added resource hints (not Early Hint…

Yeah, it's a neat trick but kinda pointless. In a world with CDNs and HTTP/2, all this does is waste bandwidth in order to look slightly better in artificial benchmarks. It might improve time to first paint by 10-20ms, but this is a webpage, not a first-person shooter. Besides, subsequent page loads will be slower.

And Critical CSS requires reducing the CSP (Content Security Policy), which I have already hardened almost entirely along with Permissions Policy.

Re: Critical CSS

#37

Post by hombre_fatal »

DecoySalamander wrote: post #35
lenkite wrote: post #26

Assuming you are using an atomic CSS based framework like tailwind, this would be unnecessary right ? Since all the CSS class names are anyways in-lined with the element.

Your page would still need the full CSS sheet loaded to render properly - tailwing classes do nothing on their own.

That said, if all of your css is referenced by html classes, it would be trivial to look at the html that's above the fold and derive which css you need to load first which could be kinda cool.

Re: Critical CSS

#38

Post by hombre_fatal »

pjc50 wrote: post #27
sublinear wrote: post #12

Non-starter for all but hobby websites since it's incompatible with any content security policy disallowing inline style tags. Edit regarding replies to this comment: I'm sure many will get a kick out of your workarounds and they're all worth posting in the spirit of HN, however I am talking about CSPs that disallow shenanigans. Carry on though :^)

> content security policy disallowing inline style tags Wait, why on earth is this a thing?

I guess the main case is if user-generated content has an escape bug that lets the user inject a tag?

Re: Critical CSS

#39

Post by chrismorgan »

Manfred wrote: post #24
jer0me wrote: post #7

Kind of funny that the agency that made this has a loader on their site.

It would only be ironic if they released a tool to get rid of loading on a page. > Critical CSS refers to the minimal set of CSS rules required to render the visible portion of a webpage (above the fold). In reality the tool is aimed to style most of the page without loading additional assets so you don't get a jarring repaint when visiting the site.

I prepared a comment about how the whole thing should be well under 5KB uncompressed, plus four small images and a background video that I couldn’t quite figure out, and about how the loader made no sense and made things worse. But then I checked in Chromium before stopping, and discovered that apparently the website is just completely broken in Firefox for some reason, so that you only get to see the above-the-fold content. But it still definitely hasn’t earned the loader. And also demonstrates why messing with scrolling is a bad idea.

Re: Critical CSS

#40

Post by todotask2 »

larodi wrote: post #31
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…

the prefetch attribute and other HTTP header hints, combined with proper CDN setups does almost the same. and would not require critical CSS to be nonstop rebuilt as the page develops. a properly configured CF is insanely fast.

> HTTP header hints

Assume it's either 103 Early Hints or Resource Hints in HTTP/1.1 and 2.0.

Post reply on HN