Task: Improve performance of Find Properties page

[CodeWritingCow]

Describe the task

Clean and Green Philly's Find Properties page has a Google Lighthouse performance score of 58/100 on mobile devices, and 60/100 on desktop devices. The page's Largest Contenful Paint is taking 6.3 seconds, and the website's logo (https://www.cleanandgreenphilly.org/logo.svg) appears to be causing this.

Reduce this page's image loading time and Improve the score to high 80s or low-to-mid 90s.

Acceptance Criteria

• Reduce largest contentful paint time by loading images faster
• Generate Lighthouse report for mobile devices, showing improvement in performance score
• Post screenshots of results in this issue's comments section

Additional context

• See Task: Audit performance of 'Find Properties' page #734 for details
• For instructions on using Lighthouse, see https://developer.chrome.com/docs/lighthouse/overview

[AZBL]

Can I be assigned this please.

[bacitracin]

assigned!

[AZBL]

@CodeWritingCow

I minified the logo svg, but it didn't much improve performance. Interestingly, when I ran the lighthouse report (which I did in an incognito browser with Chrome as well) I got significantly different results compared to #734. The largest contentful paint wasn't that slow to begin with for me, but the total blocking time was much worse, mostly due to main-thread-work, particularly script evaluation. Do you have suggestions for what to try next? For the record I only included screenshots of the report after minifying the logo (using vecta.io) because there was not much of a difference in the scores.

Find Properties Desktop Lighthouse Report

Desktop Main Thread Work Details

Find Properties Mobile Lighthouse Report

Mobile Main Thread Work Details

[AZBL]

@CodeWritingCow
I just realized I was doing that all on my local host as opposed to the production site. I ran it again on the production site and the largest contentful paint was again slower, and the total blocking time was improved but still slow. Of course this is not including the minified logo svg, so I'm not sure how to go about comparing here.

[CodeWritingCow]

Hi @AZBL, what is your minified SVG's file size vs the current SVG on the production site? If there's a significant reduction without loss of image quality, can you open a PR to replace the SVG in prod with your minified version? Thanks!

We can run a Lighthouse audit and check if we'd improve performance by using the minified file in prod.