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

21–30 of 124 posts

Re: Critical CSS

#21

Post by kijin »

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.

Re: Critical CSS

#22

Post by optimog »

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.

Re: Critical CSS

#23

Post by indeyets »

stevenpotts wrote: post #2

I searched online for tools to extract the critical css of a website for one of my clients, I couldn't find one that did the job so I did so after using Puppeteer locally and then decided to share the solution I used that let's you specify how long to wait after page load to extract the styles; even found a paid one but requested refund after it didn't work. Feedback welcome, it's free for now.

Is it the UI for penthouse lib? Settings look very similar :)

Re: Critical CSS

#24

Post by Manfred »

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.

Re: Critical CSS

#25

Post by kqr »

Hm. When I tried this on my site it retained a debugging element that is decidedly not required, but adds a lot of bytes to the CSS:

    body::after{display:none;content:"";background-image:url("data:image/svg+xml;utf8,");position:absolute;top:23px;left:0px;z-index:9998;opacity:1;width:1425px;height:3693px;background-size:auto 1.414rem;background-position-y:0.6rem}
(It lets me uncheck the "display: none" rule in the developer tools to get a baseline grid overlaid on the site to make sure things line up. They don't anymore because I forgot I had that in there until I saw it now!)

Re: Critical CSS

#26

Post by lenkite »

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.

Re: Critical CSS

#27

Post by pjc50 »

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?

Re: Critical CSS

#28

Post by austin-cheney »

When I was doing performance examinations from localhost I found that CSS was mostly inconsequential if written at least vaguely efficiently and requested as early as possible from the HTML. By completely removing CSS I might be able to save up to 7ms of load time, but that was extremely hard to tell because that was well within the variance between test intervals.

https://github.com/prettydiff/wisdom/blob/master/performance...

Re: Critical CSS

#29

Post by gitroom »

the amount of tiny tweaks that stack up in css is kinda nuts tbh - always felt like chasing performance can be endless, makes me wonder if any dev really feels satisfied with their setup or if it's just a bunch of tradeoffs

Re: Critical CSS

#30

Post by aitchnyu »

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.

Yup, whereever we deviated from straightforward asset downloads to optimize something, we always end up slower or buggy. Like manually downloading display images or using websockets to upload stuff. Turns out servers and browsers have spent more person-years optimizing it better than me.
Post reply on HN