Review Page Speed Insights for action items

[mariacha]

https://pagespeed.web.dev/analysis/https-wri-org/wwe8mjq8kk?form_factor=mobile

Sort by easy things to do and provide recommendations

Dev tasks

• Disable the svg map on mobile.
• Osana is now set to deferred on their side
• Maria or Joe to research Webp with S3

QA tasks

• Review the homepage on mobile. The map should not load.
• Also review /our-work -- same thing, but the page should be readable
• Review the image sources -- they should be loading as webp now, and they should load successfully.

[mariacha]

Immediate thoughts for me -- the homepage hero image has loading type "eager" -- We can make that lazy loading and see if it helps.

[mariacha]

@komejo Can you take a look at the results from pagespeed and see if there's anything else obvious we could fix? I definitely see some things that would be hard but possible to work on, but I'm not sure if there are easy wins (I did add the lazy loading of the home page image).

[komejo]

@mariacha Will do - FYI the homepage image lazy load actually hurts page speed b/c it's above the fold, so having lazy-load can impact layout shift.

[komejo]

Three quick suggestions:

1. Update the big homepage SVG to use an optimized version, cutting the 1M size in half.
   

Also, pass the link to https://jakearchibald.github.io/svgomg/ over to WRI so they can optimize things before uploading them. >>> YES

2. Don't load the SVG map on mobile - it's kinda useless there anyway. >>> YES

3. Add the WebP module - it should reduce all file sizes by ~30-50%. (Not sure if it plays nice with the CDN)

[komejo]

https://cmp.osano.com is a pretty big render-blocking script - ~1.6 seconds. It would definitely help if that could be defer or async.

[monicapatel21]

• Check analytics for how much it's used (on mobile; where it's not that useful without labels)
• Christian M helped is with wn Osano setting too

[komejo]

Flagship PR: https://github.com/wri/wriflagship/pull/1256
wri_sites PR: #338

Note: This should work with S3 after running drush image:flush --all. That takes a long time to run on WRI due to the volume of images, but the perf boost should be pretty decent (as well as the SEO boost). @mariacha Wasn't sure if I should be adding the new module / patch in wri_sites?

[mariacha]

I had some initial questions without digging in to this much yet.

[mariacha]

This is ready for QA now on develop:
https://develop-wriflagship.pantheonsite.io/

VR tests show images are looking good so far, and the map is now being lazy loaded to avoid high initial page load.

I'm comparing tests between the live site and develop in Lighthouse, and it's looking better, but of course the content is not identical:

The top issue there is "Layout shift" which will not be true once the donate links in the top are disabled.