clean-and-green-philly icon indicating copy to clipboard operation
clean-and-green-philly copied to clipboard
Published 2 months ago • verified publisher icon CodeForPhilly

Task: Audit performance of About page

Open CodeWritingCow opened this issue 1 year ago • 5 comments

Describe the task

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

Acceptance Criteria

  • [ ] Generate Lighthouse report for mobile devices
  • [ ] Generate Lighthouse report for desktop devices
  • [ ] Post screenshots of results in this issue's comments section
  • [ ] 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 avatar Jul 08 '24 23:07 CodeWritingCow

Hi, can I be assigned this issue pls?

zheyichn avatar Jul 11 '24 20:07 zheyichn

@zheyichn it's yours!

CodeWritingCow avatar Jul 11 '24 21:07 CodeWritingCow

Lighthouse report on mobile devices

  • Performance score was 70/100. Score took a bit hit because the loading of the map image took 7.1 seconds.
  • Accessibility score was 95/100 due to <nav> element shoudn't have aria-passed attribute as mentioned in #727.
  • SEO score was 82/100. Penalty comes from links do not have descriptive text & links not crawlable.

Screenshoots

about-mobile-1 about-mobile-2 about-mobile-3 about-mobile-3 1 about-mobile-4 about-mobile-5

zheyichn avatar Jul 12 '24 15:07 zheyichn

Lighthouse report for desktop devices

  • Performance score was 97/100. Large Contentful Paint took 1.3 seconds.
  • Accessibility score was 95/100 because of having aria-pressed attribute on <nav> elements.
  • SEO score was 82/100, since links do not have descriptive text & links being not crawlable.

Screenshoots

about-desk-1 about-desk-2 about-desk-3 about-desk-4 about-desk-5 about-desk-6

zheyichn avatar Jul 12 '24 21:07 zheyichn

Summary

  • Performance got penalty from long image loading time, mianly for mobile devices.
  • Accessibility was good on both devices. #727 provided context for why this page did not get full score.
  • SEO suggests links to be crawlable and have descriptive text.

Improvement recommendations

For mobile devices

  1. Explore ways to reduce the map image loading time. (Performance)
  2. Make links crawlable to search engine and add descriptive text. (SEO)

For desktop devices

  1. Make links crawlable to search engine and add descriptive text. (SEO)

zheyichn avatar Jul 12 '24 21:07 zheyichn

@CodeWritingCow please add to your list to review

nlebovits avatar Sep 25 '24 00:09 nlebovits