Around May I posted a critical CSS generator and it got some attention. I found a word-for-word copy that performs better in Google but has worse results IMO, recently received an email of a person who uses the tool often asking if the tool was being used to train AI and even shared the repo with some people that asked me.
Anyway, this tool appeared to be useful for many people so I moved it to my main site and made it work with Frontend Frameworks and inline CSS, so should work for everyone now.
I will take that into account, what you write makes sense! I had actually debated on how to handle the loader and prioritized UI over experience and just showing the content ASAP and yes, external resources have given me headaches, I appreciate your response, thanks again!
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
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
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
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
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
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
I know... to be fair, I did test this for my use cases on older phones with throttled slower connections and it did improve the UX but I get what you're saying, I think it also depends on your target audience, who cares if your site is poorly graded by Lighthouse if your user base has high end devices in places with great internet? not even google cares since the Core Web Vitals show up in green
Oh, writing clean css, html and js is THE WAY TO GO but you might inherit a messy project, download a template or even work on a project you coded poorly
There are definitely better ways, however, for some scenarios and time constraint, this tool was really useful, e.g., I used a template, since the budget was tight and it had 10,000 of lines of CSS and I had to do something quickly to improve UX and Lighthouse results, the template had bootstrap, revolution, etc.
you are right, I will add this option, probably replace the 'before body' option, the 'DOMCONTENTLOADED' option has worked wonders for me, even tested it on old phones and slower connections, it's good enough for UX and Lighthousr
Anyway, this tool appeared to be useful for many people so I moved it to my main site and made it work with Frontend Frameworks and inline CSS, so should work for everyone now.