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

111–120 of 124 posts

Re: Critical CSS

#111

Post by stevenpotts »

indeyets wrote: post #23
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 :)

it's based on penthouse, honestly, the most "difficult" part of this was setting up CloudRun with docker to get puppeteer to work and be able to wait whatever amount of time the user needed and netlify functions, I tried using tools like https://criticalcss.com/generate but they just didn't work because of the lack 'waiting' I guess

Re: Critical CSS

#112

Post by stevenpotts »

lxe wrote: post #64

This is a footgun. You'll get a very consistent flash of unstyled content. It's not just an aesthetics issue -- when layout shifts in the middle of a page load, as your "non-critical" styles are applied, and user is interacting with something, it will kill your usability.

Yeap, I had to change some styles after applying this but managed to get CLS to 0 for the websites, I know this isn't useful for everyone but it was really useful for me as I have been using templates for clients with limited budgets that have tons of libraries, I'm sure there are other use cases where this is useful

Re: Critical CSS

#113

Post by stevenpotts »

cAtte_ wrote: post #8
promiseofbeans wrote: post #4

Earlier quoted context omitted.

Is the code somewhere? This seems like it'd be really useful as a Vite/Astro plugin

yeah, doing this manual copy-paste process every time you change something would count as cruel and unusual punishment

hehe, I know... I should think about that, I got tons of visits but unsure this is worthwhile since it appears it's not that useful for most people?

Re: Critical CSS

#114

Post by stevenpotts »

bawolff wrote: post #67

I guess this just assumes that this is the first view of your page and no user has css resources cached? Or maybe they are saying this would always be worth it? I assume it'd be a trade off between a number of factors. How many returning vs new visitors? Is css served with proper cache-control headers, 103 early hints and in a cdn? How big is your critical css, and how much of your critical html does it push out of t…

Yes, for first view page and it is a trade off, best approach is writing all the styles and code yourself, not use libraries, etc.

Re: Critical CSS

#115

Post by stevenpotts »

GavinAnderegg wrote: post #41

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.pro…

Will check this case, thanks!

Re: Critical CSS

#116

Post by stevenpotts »

weo3dev wrote: post #70

Not a fan. I'm waiting for the day developers realize the fallacy of sticking with pixels as their measurement for Things on the Internet. With a deeper understanding of CSS, one would recognize that simply parsing it out for only the components "above the fold" (which, why are pixels being used here in such an assumptive manner?), completely misses what is being used in modern CSS today - global variables, content-c…

Yes, this is for specific use cases, I don't have a use for this for sites where I coded everything myself, this has been useful for static sites where I downloaded a template that uses libraries, probably useful for people with similar cases

Re: Critical CSS

#117

Post by stevenpotts »

jer0me wrote: post #7

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

hehe I didn't use this tool for Kigo's site since I built it from scratch, the loader is used because of the BG videos, I wanted the videos to load completely before showing the page, do you think there is a better approach? def would be really cool to read some advice

Re: Critical CSS

#118

Post by stevenpotts »

chrismorgan wrote: post #39
Manfred wrote: post #24

Earlier quoted context omitted.

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…

Hey Chris! you're talking about kigo.studio, right? can you tell me which version of firefox you are using? I tested it on my mac firefox 135.0.1 (aarch64) and it works fine

I don't mess with the scroll, well, I do disable it before the video is loaded but I'd still love to hear your comments, would be really useful

Re: Critical CSS

#119

Post by stevenpotts »

aligundogdu wrote: post #53

Is there any limit etc. It gives an error on my first try. {"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)"}

not really, I think it just wasn't able to read a css file, I saw some other comments, will check this error, maybe give me visual feedback to the user

Re: Critical CSS

#120

Post by stevenpotts »

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.

I used it on a pure html, js and css static site with bootstrap, it was useful there to me
Post reply on HN