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.

Sign up for GitHub

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

Jump to bottom

Improve image format/sizing and caching #6487

Closed
3 tasks done
guidezpl opened this issue Nov 18, 2021 · 2 comments · Fixed by #10391
Closed
3 tasks done

Improve image format/sizing and caching #6487

guidezpl opened this issue Nov 18, 2021 · 2 comments · Fixed by #10391
Assignees
@parlough
Labels
a.marketing Relates to the main flutter.dev website. Transfer to flutter/website-cms e2-days Effort: < 5 days infra.design Relates to the design of docs.flutter.dev infra.structure Relates to the tools that create docs.flutter.dev p2-medium Necessary but not urgent concern. Resolve when possible. st.triage.ltw Indicates Lead Tech Writer has triaged

Comments

@guidezpl
Copy link
Member

guidezpl commented Nov 18, 2021 •
edited by parlough

Describe the problem

The only major performance issue highlighted by Lighthouse regards images. Estimated savings for serving images in next-gen formats, efficiently encoding images, and properly sizing them are ~1.9s

Assets also all have a 1h cache policy, which seems quite short for static content.

Expected fix

  • use a better image format
  • optimize/resize images
  • increase cache policy for assets

Additional context

No response
@guidezpl guidezpl added the infra.structure Relates to the tools that create docs.flutter.dev label Nov 18, 2021
@danagbemava-nc
Copy link
Member

danagbemava-nc commented Nov 19, 2021 •
edited

Screenshots of Lighthouse report for context.

screenshots
mobile

Screenshot 2021-11-19 at 10 57 23

Screenshot 2021-11-19 at 10 58 14

desktop

Screenshot 2021-11-19 at 11 06 23

Screenshot 2021-11-19 at 11 06 34

@danagbemava-nc danagbemava-nc added e2-days Effort: < 5 days p2-medium Necessary but not urgent concern. Resolve when possible. a.marketing Relates to the main flutter.dev website. Transfer to flutter/website-cms labels Nov 19, 2021
@parlough parlough mentioned this issue Jan 4, 2023
Closed
2 tasks
@jmagman jmagman mentioned this issue Feb 16, 2023
Merged
3 tasks
@guidezpl
Copy link
Member Author

guidezpl commented Jul 8, 2023

@parlough I believe I saw PRs from you that fixed this?

@parlough parlough added the st.triage.ltw Indicates Lead Tech Writer has triaged label Aug 2, 2023
@parlough parlough self-assigned this Aug 2, 2023
@atsansone atsansone added the infra.design Relates to the design of docs.flutter.dev label Aug 25, 2023
@atsansone atsansone mentioned this issue Aug 25, 2023
Closed
@parlough parlough mentioned this issue Apr 9, 2024
Merged
parlough added a commit that referenced this issue Jun 5, 2024
@parlough
Optimize images as part of production builds (#10391)
551ffcc 
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 a few images, I saw lighthouse perf
score increases from 5-15 points.

Closes #6487
Closes #9527 as this plugin
also validates `alt` is always specified
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@parlough parlough

Labels
a.marketing Relates to the main flutter.dev website. Transfer to flutter/website-cms e2-days Effort: < 5 days infra.design Relates to the design of docs.flutter.dev infra.structure Relates to the tools that create docs.flutter.dev p2-medium Necessary but not urgent concern. Resolve when possible. st.triage.ltw Indicates Lead Tech Writer has triaged
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Optimize images as part of production builds flutter/website
4 participants
@atsansone @guidezpl @parlough @danagbemava-nc