Optimize images as part of production builds #10391
Merged
+485
−48
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 77bd8a6): https://flutter-docs-prod--pr10391-feat-optimize-images-9kqzqpc9.web.app |
|
Parker, can we either land this or close? I really hate stinky PRs that hang around for weeks and weeks. |
|
@sfshaza2 Yep, sorry! I was waiting for the dart.dev equivalent to land to work out the kinks there first. It landed today with dart-lang/site-www@bcbff3e. I'll work on getting this updated and ready for review sometime this week. |
parlough
changed the title
parlough
requested review from
sfshaza2,
atsansone,
khanhnwin,
domesticmouse and
MaryaBelanger
as code owners
domesticmouse
approved these changes
May 31, 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 a few images, I saw lighthouse perf score increases from 5-15 points.
Closes #6487
Closes #9527 as this plugin also validates
altis always specified