See also beasties ( https://github.com/danielroe/beasties ) formerly critters ( https://github.com/GoogleChromeLabs/critters ) which can be used to do this during SSR/SSG and is built into Nuxt and NextJS
cool! thanks! I actually really like Nuxt
Critical CSS
121–124 of 124 posts
Re: Critical CSS
#122Earlier quoted context omitted.
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
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
Re: Critical CSS
#123Earlier quoted context omitted.
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 lo…
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!
Re: Critical CSS
#124Earlier quoted context omitted.
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 lo…
Nice post about backdrop filter! I did change the trigger for the scroll so glad it works