Critical CSS

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.

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

Hmm. Last time I could reproduce it consistently; since then, I’ve upgraded my build of Firefox Nightly; today, I think I reproduced it the first time, but then opened the dev tools and haven’t managed to reproduce it since, even in new tabs or a fresh browser profile with only video autoplay blocked, so probably I misremembered, and maybe you fixed something?

I do have video autoplay turned off completely, but it looks like you’re at least partly handling .play() throwing an exception (and I can’t reproduce it any more anyway).

I baulk at blocking displaying the website on loading a couple of megabytes of ornaments. Even apart from the unnecessary delay, it’s just fragile. External resources are way less reliable than most people think, though first-party are by far the most reliable.

I also note how the loader doesn’t get out of the way as soon as it can, but first switches to 100%, wasting another half a second or something. (Starts at 7%, waits a couple of seconds, transitions to 100%, transitions to real content.)

Another tip, on your cursor circle thing: https://www.joshwcomeau.com/css/backdrop-filter/#the-issue-2