Switch header and overlay images to more efficient webp

[willingc]

The overlay image is impacting performance esp on mobile. Let's see if switching to webp images will improve the user experience.

[lwasser]

hey there @willingc do you think that we can close this? i do think the best longer term solution will be for me to invest some time in someone redoing the website with a modern theme - and likely bootstrap. (and possibly hugo). let me know what you think.

[sneakers-the-rat]

i was curious so i went and checked out some stuff that was contributing to page perf probz.

we start here-ish:

transcoding the images did help a bit, i was able to go from 568k -> 49k and have it still look ok with this

magick header-mentored-sprints-smaller.png -quality 50 -resize 75% -define webp:image-hint=photo,method=6 ./header-mentored-sprints-smaller.webp

other things roughly in order of impact, i was not being scientific

• turning off all the css animations: the major thing that's causing the largest contentful paint to be so slow is that there are several reflows of the page, and when the animations all have a delay to them that sometimes coincides with when the image is ready to render, then it has to do another reflow it looks like. idk didn't look too close
• removing the filter on the header image had a surprisingly large effect on fcp - we should just apply that filter to the image itself since it's just dimming it
• make all the images that aren't the header do loading="lazy"

and it seems like the last remaining stuff is just from not having the rendering path optimized from stuff flying in without fixed sizes and causing reflows. the thing that happens right before the LCP looks like it's triggered by matomo tracking. so i would put that in the footer and maybe even wait until the page is fully loaded to fire.

also i bet if we set more fixed heights to the major structural elements with position relative i bet we could speed that up a bit too

anyway i ended up here which is not great but sort of ok