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

41–50 of 124 posts

Re: Critical CSS

#41

Post by GavinAnderegg »

Neat idea. I tried it on my site (https://anderegg.ca/) which already inlines its CSS, and got an error from the underlying library (https://www.npmjs.com/package/penthouse):

    {"error":true,"name":"Error","message":"css should not be empty","stack":"Error: css should not be empty\n at module.exports (/usr/src/app/node_modules/penthouse/lib/index.js:206:14)\n at file:///usr/src/app/server.js:153:31\n at process.processTicksAndRejections (node:internal/process/task_queues:95:5)"}

Re: Critical CSS

#42

Post by a_gray »

Brajeshwar wrote: post #5

I’ve been away for quite a while, so just a loud thinking. With tools such as PostCSS, and servers serving zipped styles across CDN, maintaining a single request to the styles; does it really benefit from breaking up the styles these days? Also, I’m going to assume, besides the core styles that run a website, anything that is loaded later can come in with its specific styles as part of the HTML/JS. For the critical C…

> serving zipped styles across CDN

CDNs haven't been cached across domains for years. I.e. using a CDN is no faster than a server serving it itself (usually slower because of DNS lookups, but sometimes slightly faster if the geolocation is closer if the DNS was already looked up).

Re: Critical CSS

#43

Post by robotfelix »

jefozabuss wrote: post #11
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.

What was the problem with something like https://www.npmjs.com/package/penthouse ?

It's worth noting that penthouse's last release is a few weeks shy of 3 years ago (https://github.com/pocketjoso/penthouse/releases/tag/v.2.3.3).

Given there seem to be few other Critical CSS tools out there, its utility in driving web performance, and the fact Google's web.dev recommended tool (https://github.com/addyosmani/critical) uses penthouse under the hood, I'm surprised there isn't more effort and/or sponsorship going into helping maintain it.

Re: Critical CSS

#44

Post by worble »

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…
Wouldn't this be blocked by a CSP that doesn't allow unsafe-inline?

Re: Critical CSS

#45

Post by robotfelix »

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…

It's worth noting that including Critical CSS in every page load isn't the only way to use it.

A lot of unnecessary bloat can be avoided by only including it when it looks like a user is visiting for the first time (and likely hasn't got the CSS files cached already) or only using the Critical CSS technique for pages that commonly come at the start of a session.

Re: Critical CSS

#46

Post by manbitesdog »

This is a great idea even for a building step in web projects. You set a list of viewports you want to optimize for in your package.json, import critical-css as a dev dependency, configure it in your vite.config.js or equivalent, and way to go

Re: Critical CSS

#48

Post by throwaway290 »

hombre_fatal wrote: post #38
pjc50 wrote: post #27

Earlier quoted context omitted.

> 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?

If only this was about UGC. Most of it can have nothing to do with actual users. Think stuff like ads or other injects like a dependency of dependency of dependency of your frontend app compromised by a north korean hacker.
Post reply on HN