Dev Comms Lead at @Catchpoint, working on @RealWebPageTest™.
Toronto Web Performance, JAMstack TORONTO curator.
Conference speaker, consultant and organizer.
#DevsWhoRun.
Congrats! Always fun to read about personal audits/case studies!
📍 The first things I'd love to add so ppl who might read this remember: the quickest request is the one never made. So if you don't need it, don't load it. That said, you come in below 50 requests and more importantly under 1MB in resources, uncompressed, and i believe below 500kb compressed. Those are significant figures.
📍 I'd like to mention as well that you only have 1 image. This is also usually small, but again, if you don't need anything else, that's perfect. I'd mention 3 things re: the image. It does come in @ 50ish KB. I you wanted to go a few extra steps for fun, you could change formats. As is, your image w/ moderate quality edits would be 30KB as a WebP (supported everywhere), and 20kb as an AVIF (chrome, opera and FF desktop). Also, your image is 900kb per side. It sits in a 120px square container on mobile. reducing that image to say 300px per side for mobile would create a 9kb WebP and 7kb AVIF. This could be achieved w/ v little work. Last mention re: the image, it's req #15 in the load. Would love to see that image possibly preloaded and wonder if we could bump hat a little higher in the request chain. It could possibly improve your paint metrics, specifically the LCP. Esp if that image weight is small, this could come in pretty fast w/ a higher priority.
📍 req #4-#13 are all JS and wondering which of those could deferred instead of async'd? Are they needed to parse so early to display text and a single image?? Would be curious to see what comes of it. Are they critical resources is what I'm wondering.
📍 Curious how this would look hosting the fonts yourself, esp seeing that your LCP could see some improvement from it.
📍Your tag manager (req #19) seems to possibly be pushing the rest of the requests further out. Maybe that could be deferred as well.
Anyhow, these are super fun to read and thx for sharing your strategy here. 👏🏾👏🏾👏🏾. I love reading about these, and hearing how ppl work on it. As I mentioned last fall, perf is really investigative work. Not glamorous but fun!
When I see your comments about WebP and AVIF I immediately converted the image, thanks for that. By the way, right now I'm checking Next.js Image component to make that preloading thing possible. Due to lack of support, it was not possible back then.
For JS deferring, I don't think I can individually defer chucks but I'll look into it.
Any suggestion for self-hosted fonts? And, I definitely try to defer the tag manager.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Congrats! Always fun to read about personal audits/case studies!
📍 The first things I'd love to add so ppl who might read this remember: the quickest request is the one never made. So if you don't need it, don't load it. That said, you come in below 50 requests and more importantly under 1MB in resources, uncompressed, and i believe below 500kb compressed. Those are significant figures.
📍 I'd like to mention as well that you only have 1 image. This is also usually small, but again, if you don't need anything else, that's perfect. I'd mention 3 things re: the image. It does come in @ 50ish KB. I you wanted to go a few extra steps for fun, you could change formats. As is, your image w/ moderate quality edits would be 30KB as a WebP (supported everywhere), and 20kb as an AVIF (chrome, opera and FF desktop). Also, your image is 900kb per side. It sits in a 120px square container on mobile. reducing that image to say 300px per side for mobile would create a 9kb WebP and 7kb AVIF. This could be achieved w/ v little work. Last mention re: the image, it's req #15 in the load. Would love to see that image possibly preloaded and wonder if we could bump hat a little higher in the request chain. It could possibly improve your paint metrics, specifically the LCP. Esp if that image weight is small, this could come in pretty fast w/ a higher priority.
📍 req #4-#13 are all JS and wondering which of those could deferred instead of async'd? Are they needed to parse so early to display text and a single image?? Would be curious to see what comes of it. Are they critical resources is what I'm wondering.
📍 Curious how this would look hosting the fonts yourself, esp seeing that your LCP could see some improvement from it.
📍Your tag manager (req #19) seems to possibly be pushing the rest of the requests further out. Maybe that could be deferred as well.
Anyhow, these are super fun to read and thx for sharing your strategy here. 👏🏾👏🏾👏🏾. I love reading about these, and hearing how ppl work on it. As I mentioned last fall, perf is really investigative work. Not glamorous but fun!
When I see your comments about WebP and AVIF I immediately converted the image, thanks for that. By the way, right now I'm checking Next.js Image component to make that preloading thing possible. Due to lack of support, it was not possible back then.
For JS deferring, I don't think I can individually defer chucks but I'll look into it.
Any suggestion for self-hosted fonts? And, I definitely try to defer the tag manager.