Set up automatic image optimization pipeline #5779
Merged
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
|
Visit the preview URL for this PR (updated for commit 7aca287): |
|
@parlough : I see no reason not to make this change, but I'm not seeing any benefit. Both the staged version and live version of https://dart.dev/web/debugging and https://dart.dev/tools/pub/automated-publishing, Lighthouse scores were 97 for all. Current Staged |
|
@atsansone You'll see increased improvements for a mobile report or with a lot more images. Another benefit of this change is the much improved caching, as the plugin adds hashes to the image URLs, allowing us to extend the cache time of images greatly. As another metric for those pages without any caching benefits, visiting the automated publishing page with simulated slow 3g, dropped load time from 28s->21s. |
parlough
changed the title
atsansone
added
st.RFM.%
atsansone
approved these changes
May 29, 2024
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 11ty's first-party image transformation plugin to automatically optimize images, convert them to
png,webp, andavif, and then transform the site HTML to use the<picture>element to select the best one for the user. This only runs in production deploy builds to reduce serving time. Also applies lazy loading and async decoding to all images, even when serving without optimizations. The transform also adds a hash of the image, allowing us to expand caching for images in Firebase hosting.To account for the transformed HTML structure, some minor HTML and CSS changes were needed as well.
Overall, this reduces page load time on pages that use images, and reduces unnecessary downloads that were due to a relatively short cache time for images. On a page with just a few images, such as https://dart.dev/tools/pub/automated-publishing, the lighthouse perf score increases around 10-15 points.
Fixes #4473
Fixes #3124