-
Notifications
You must be signed in to change notification settings - Fork 705
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Set up automatic image optimization pipeline (#5779)
Use 11ty's first-party [image transformation plugin](https://www.11ty.dev/docs/plugins/image/) to automatically optimize images, convert them to `png`, `webp`, and `avif`, and then transform the site HTML to use the [`<picture>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) 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
- Loading branch information
Showing
14 changed files
with
427 additions
and
29 deletions.
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,6 @@ | ||
_cache/ | ||
_site/ | ||
.cache | ||
.*-cache | ||
.*-metadata | ||
.buildlog | ||
|
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
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
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
Oops, something went wrong.