Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch header and overlay images to more efficient webp #373

Closed
wants to merge 5 commits into from

Conversation

willingc
Copy link
Collaborator

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

@willingc willingc force-pushed the improve-pageload branch 2 times, most recently from b71bb90 to 459be4a Compare April 12, 2024 17:14
@lwasser
Copy link
Member

lwasser commented Jul 31, 2024

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
Copy link
Contributor

sneakers-the-rat commented Aug 1, 2024

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

we start here-ish:

Screenshot 2024-08-01 at 12 45 29 AM

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

Screenshot 2024-08-01 at 1 27 24 AM

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

Screenshot 2024-08-01 at 1 16 38 AM

@lwasser
Copy link
Member

lwasser commented Sep 24, 2024

@sneakers-the-rat i'm going to turn your comment into an issue. maybe we can knock some of these things out. for instance the imabe headers could just be overlay ready as you suggest.

@lwasser lwasser mentioned this pull request Sep 24, 2024
1 task
@willingc
Copy link
Collaborator Author

willingc commented Nov 4, 2024

closing this old pr since there is an issue reminding us to check it again.

@willingc willingc closed this Nov 4, 2024
@willingc willingc deleted the improve-pageload branch November 4, 2024 16:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants