Task: Audit performance of homepage

CodeForPhilly / clean-and-green-philly

Dashboard to target Philly vacant properties for anti-gun violence interventions

https://www.cleanandgreenphilly.org/

MIT License

32 stars 58 forks source link

Task: Audit performance of homepage #733

Closed CodeWritingCow closed 1 month ago

CodeWritingCow commented 2 months ago

Describe the task

Audit performance of Clean and Green Philly's homepage using Google Lighthouse. Document audit results, including areas of improvement.

Acceptance Criteria

[x] Generate Lighthouse report for mobile devices
[x] Generate Lighthouse report for desktop devices
[x] Post screenshots of results in this issue's comments section
[x] Write brief summary of audit highlights, including Lighthouse's recommendations for improvement

Additional context

For instructions on using Lighthouse, see https://developer.chrome.com/docs/lighthouse/overview

CodeWritingCow commented 2 months ago

Lighthouse report for mobile devices

Performance score was 67/100. Score took a hit due to the page's blocking time of 4.24 seconds.

Screenshots

CodeWritingCow commented 2 months ago

Lighthouse report for desktop devices

Performance score was 61/100. Score took a hit due to the page's blocking time of 2.26 seconds.

Screenshots

CodeWritingCow commented 2 months ago

Unassigned myself from this issue so other contributors can work on it. I've posted screenshots of the audit reports. Only things missing are report summaries and recommendations for improvement.

zheyichn commented 2 months ago

Hi @CodeWritingCow, can I be assigned this pls?

CodeWritingCow commented 2 months ago

@zheyichn assigned! Thank you for taking this off my plate.

zheyichn commented 2 months ago

When I ran the Lighthouse report in my local incognito window, it displayed different results from the above screenshots. According to the screenshots above, the high total blocking time mainly penalized the performance score. However, I did not see total blocking time as a problem on my end. To provide improvement recommendations, I need to click in to see detailed information. Therefore, I have posted my screenshots below and will summarize based on these.

Lighthouse report for desktop devices

Performance score was 99/100, no blocking time detected.
Accessibility score was 92/100, due to misuse of aria-* attribute on nav element.

Screenshots

zheyichn commented 2 months ago

Lighthouse report for mobile devices

Performance score was 75/100, penalized due to the Largest Contentful Paint taking 6.45 seconds.

Screenshots

zheyichn commented 2 months ago

Summary of audit highlights.

Scores were good on desktop devices.
Performance score was 75/100 on mobile devices due to Largest Contentful Paint taking 6 seconds.

Improvement suggestions.

Investigate the cause of the image Load delay (59% of LCP) - The delta between Time to first byte and when the browser starts loading the LCP resource. (Performance)
Remove unused CSS - Splitting the global.css file into smaller files specific to different pages/components can help avoid loading unnecessary CSS. (Performance)
aria-pressed cannot be used on nav element. Relevant to #727.

CodeWritingCow commented 1 month ago

@zheyichn thanks for digging into this. It seems image load delay and unused CSs are common issues on the website.