Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: 816 feed detail performance #822

Merged
merged 2 commits into from
Nov 14, 2024

Conversation

Alessandro100
Copy link
Contributor

closes #816

Summary:

  • Removed unused packages / barely used packages
  • Optimized the load of the google fonts
  • Improved the general loading component of the App
  • Feed detail page now waits on datasets to load before showing content
  • Added Skeleton loading to the feed detail page
  • removed feedFeatureFlag (TODO: clean up everywhere else)

Got to 79 performance on localhost, in QA / PROD this should improve due to javascript bundling
Further improvements to the Feed Detail page would be a lot of effort. Areas that could improve

  • Optimizing the map on the page
  • BroadcastChannel prevents the page from being cached
    I don't think it's worth exploring these at this time

Biggest improvement and things to note going forward
The biggest issue on the Feed Detail Page is that as the page loads, there were many moving elements which makes for a bad user experience. Bad user experience = performance because performance is what users perceive not always speed. This measure is known as Cumulative Layout Shift (CLS) and we were getting really bad scores in it.
With the addition of the skeleton loading and waiting for the dataset data, the page became much more stable in terms of content display

Expected behavior:

When going to the feed detail page (gtfs or gtfs_rt) there should be a skeleton loading elements before the real content shows up. Also when the content shows up, it should all be there (no bounding box coming late)

Testing tips:

Play around with the feed detail pages, go from page to page, refresh, go back etc

Please make sure these boxes are checked before submitting your pull request - thanks!

  • Run the unit tests with ./scripts/api-tests.sh to make sure you didn't break anything
  • Add or update any needed documentation to the repo
  • Format the title like "feat: [new feature short description]". Title must follow the Conventional Commit Specification(https://www.conventionalcommits.org/en/v1.0.0/).
  • Linked all relevant issues
  • Include screenshot(s) showing how this pull request works and fixes the issue(s)

Before changes (localhost)
Performance

After changes (localhost)
Performance

Skeleton Loading (feed detail page)
Screenshot 2024-11-13 at 15 59 47

General Loader (to iterate on)
image

@Alessandro100 Alessandro100 self-assigned this Nov 13, 2024
Copy link

Preview Firebase Hosting URL: https://mobility-feeds-dev--pr-822-0oh7u9m4.web.app

Copy link
Member

@davidgamez davidgamez left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks fantastic! 🥇

@Alessandro100 Alessandro100 merged commit adcae57 into main Nov 14, 2024
4 checks passed
@Alessandro100 Alessandro100 deleted the feat/816-feed-detail-performance branch November 14, 2024 12:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve Lighthouse performance of Feed Detail Page
2 participants