Task: Audit performance of 'Find Properties' page

CodeForPhilly / clean-and-green-philly

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

https://www.cleanandgreenphilly.org/

MIT License

32 stars 64 forks source link

Task: Audit performance of 'Find Properties' page #734

Closed CodeWritingCow closed 3 months ago

CodeWritingCow commented 4 months ago

Describe the task

Audit performance of Clean and Green Philly's Find Properties webpage 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

zheyichn commented 4 months ago

Hi! can I be assigned this issue pls?

Also, I have one question - when generating the reports, should I open the website in an incognito window to simulate first time users? I have tried this, and the performances are significantly different (i.e. 12 points) between first time viewers versus frequent visitors (my regular Chrome browser with some cached content).

CodeWritingCow commented 4 months ago

Hi @zheyichn this issue is yours!

Good question — yes, let's open it in an incognito window. I did the same thing because my browser has a bunch of dev-tool plugins, and they were affecting the performance score.

zheyichn commented 4 months ago

Lighthouse report for mobile devices

Performance score was 58/100. Score took a hit due to the page's Largest Contenful Paint taking 6.3 seconds.
Accessiblity score was 89/100. Score affected by:
1. misusing aria- attirbute.
2. buttons not having an accesible name.

Screenshots

zheyichn commented 4 months ago

Lighthouse report for desktop devices

Performance score was 60/100, mainly impacted by Largest Contentful Paint (3.2 seconds), and Cumulative Layout Shift (score 0.397, a good CLS score should be within 0.1).
Accessibility score was 97/100. The only concern is that lists containing elements other than <li> and script-supporting elements can disrupt screen readers navigating the list.

Screenshoots

find-desktop-1

find-desktop-2

find-desktop-3

find-desktop-4

zheyichn commented 4 months ago

Summary

Performance is hindered by long image loading times. Accessiblity is acceptable on desktop, but needs further adjustments for mobile devices.

Improvement recommendations

For mobile devices

Reduce largest contentful paint time by loading images faster. (Performance)
Check usage of aria-* attribute. (Accessibility)
Give button proper accessible names. (Accessibility)

For desktop devices

Reduce largest contentful paint time by loading images faster. (Performance)
Double check if we can make lists contain only <li>, <script>, <template>. (Accessibility)

zheyichn commented 4 months ago

Hi @CodeWritingCow Can you take a look when you get a sec? Let me know if anything needs to be added. Thanks!

CodeWritingCow commented 4 months ago

Hi @CodeWritingCow Can you take a look when you get a sec? Let me know if anything needs to be added. Thanks!

Hi @zheyichn this is great — your audit was extremely detailed and included good recommendations for improvement. Thank you.

Since the "Find Properties" page is the heart of our web application, I will create issues for improving its performance based on your recommendations.

This page uses many images. Did Lighthouse identify any specific images that are causing the large contentful paint time? If there are specific images that are causing this problem, then we can focus on them.

CodeWritingCow commented 4 months ago

By the way, @bacitracin is testing our site for accessibility compliance on mobile. To avoid duplicating Tracy's work, I won't be creating a11y issues for this page for now. However, do feel free to share your a11y findings with her.

zheyichn commented 4 months ago

Hi @CodeWritingCow Can you take a look when you get a sec? Let me know if anything needs to be added. Thanks!

Hi @zheyichn this is great — your audit was extremely detailed and included good recommendations for improvement. Thank you.

Since the "Find Properties" page is the heart of our web application, I will create issues for improving its performance based on your recommendations.

This page uses many images. Did Lighthouse identify any specific images that are causing the large contentful paint time? If there are specific images that are causing this problem, then we can focus on them.

Hi @CodeWritingCow, It is the logo image as below causing the delay. While I generated reports for other pages, they also complained about this logo image.

CodeWritingCow commented 4 months ago

@zheyichn Since this logo image is part of the header UI, it appears on every page. If we fix the problem with this image, then we'll probably improve the performance score for other pages, too.