refactor(lib-content): reduce home and about page load times #6255
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
eatyourgreens
force-pushed
the
lite-youtube-embed
branch
from
bdcfcc1 to
ebd61ab
Compare
eatyourgreens
changed the title
eatyourgreens
force-pushed
the
lite-youtube-embed
branch
2 times, most recently
from
bce80b9 to
a83b45f
Compare
Use `YouTubeEmbed`, from `@next/third-parties/google`, for video embeds on the home page. This should reduce the JS download size by ~2.5MB per video.
eatyourgreens
force-pushed
the
lite-youtube-embed
branch
from
a83b45f to
19c0f47
Compare
eatyourgreens
changed the title
This was referenced Sep 12, 2024
- use `lite-youtube-embed`. - lazy load offscreen images.
eatyourgreens
changed the title
goplayoutside3
approved these changes
Sep 16, 2024
| fit='cover' | ||
| src={imageSrc} | ||
| alt={title} | ||
| loading='lazy' |
There was a problem hiding this comment.
Not listed in Grommet's docs but does get passed on to the html element (loading) 👍
| allowfullscreen | ||
| width='100%' | ||
| videoid='F-B8gXJyMHc' | ||
| title='A Brief Introduction to the Zooniverse' |
There was a problem hiding this comment.
This page has a translations dictionary. I'll add this string to it.
| allowFullScreen | ||
| width='100%' | ||
| videoid='F-B8gXJyMHc' | ||
| title='A Brief Introduction to the Zooniverse' |
There was a problem hiding this comment.
Same here, I'll put this in the translations dictionary.
Comment on lines
+66
to
+68
| ['CaTNIoJy4Dg', 'Around the Zoo – Planet Hunters TESS'], | ||
| ['8lZiZoBcMjE', 'Around the Zoo – Wildcam Gorongosa'], | ||
| ['B6diEbpEblQ', 'Around the Zoo – Backyard Worlds'], |
There was a problem hiding this comment.
Not going to include these in the translations dictionary because it's a uniquely named series with Zooniverse project titles.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Use
YouTubeEmbed, from@next/third-parties/google, for video embeds on the home and about pages. This should reduce the JS download size by ~2.5MB per video.Lazy-load offscreen images, for faster page performance.
Please request review from
@zooniverse/frontendteam or an individual member of that team.Package
Linked Issue and/or Talk Post
How to Review
The YouTube videos should still appear on the home page, but the overall page weight should be much smaller. I've given each video an accessible title too.
Lighthouse scores, in Chrome, should be a lot better here (although a local server on your laptop will always serve pages faster than a Node server running in the cloud.) Lighthouse should report a total network payload of ~5MB here, compared to ~15MB for https://fe-root.preview.zooniverse.org.
Here's the Lighthouse performance report for this branch running on an M3 MacBook Pro:
Here's the Lighthouse report for https://fe-root.preview.zooniverse.org on the same MacBook:
Incidentally, SEO scores are low because 8 links have the generic 'Read more' as the link text.
Checklist
PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.
General
yarn panic && yarn bootstrapordocker-compose up --buildand FEM works as expectedGeneral UX
Example Staging Project: i-fancy-cats
Refactoring