#Help me fix high LCP and FCP

2 messages · Page 1 of 1 (latest)

warm widget
#

Hello!
I'm at a loss with my latest project. Lighthouse / pagespeed gives me a sub 80 on performance with high LCP and FCP.

The site: https://crossfitmazamet.netlify.app/
PageSpeed report attached

Audit points out:

  • LCP is the h1
  • high DOM size (I do have a lot of SVGs that create a lot of markup)

My other sites, hosted on Netlify as well (with a custom domain or not) do not have this issue, while I use the same starter kit.
What I've done:

  • preloaded fonts
  • removed images for hero and first section on mobile
  • all images use Astro Image or Picture, lazy-loaded (exceptdesktop hero)
  • resized and compressed all images
  • used @playform/compress to compress HTML, JS and SVGs. SHould try CSS too actually.

What's new compared to my other projects: the new responsive image feature. I've asked questions about it, if anyone has time there too.

What I'll consider next:

  • SVGs get inlined and some of them have quite large file sizes (the svg brush mask in the About section is 300+kb). I'm using the newish SVG component technique for those. What can I do to increase performance here? Edit: tried manually compressing those with https://svgomg.net/ with terrible results, svgs would not work as intended anymore. Used @playform/compress instead.

Thank you for your time.

image.png
warm widget
#

WOOHOO 🥳

Culprits were the SVGs. Some of the graphics were very heavy 300kb+ and created massive DOM size.

I first used this HTML size tool to realize it was the SVGs wreaking havoc.
Then, the SVG compressor I initially used did not yield good results at it broke the graphics.

I ended up using this other SVG compressor to compress then convert to PNG. I really wanted to get rid of massive DOM size. I painstakingly resized and recolored PNGs with Photoshop (where the previous SVG components were recolore on the fly with css fill, so useful), but the result was worth it!!

image.png