Improve performance of homepage images: Write updated guidance

[mejiaj]

Based on Lighthouse's mobile scan recommendations

Serve images in next-gen formats

Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more.

Let's convert these into AVIF format with the original images as a fallback to improve speeds.

Images:

Image	Size	Potential savings
feature-image.png	119KiB	84.4KiB
seedfund.jpg	185KiB	72KiB
plainlangauage.jpg	81KiB	38KiB
pubmed.jpg	82KiB	37KiB
nasa.jpg	87KiB	36KiB
va-healthcare.jpg	68KiB	35KiB
vote.jpg	47KiB	26KiB

Image elements do not have explicit width and height

Set an explicit width and height on image elements to reduce layout shifts and improve CLS.

Add height/width attributes to

• showcase/vote.jpg
• showcase/va-healthcare.jpg
• showcase/nasa.jpg
• showcase/pubmed.jpg
• showcase/seedfund.jpg
• showcase/plainlanguage.jpg
• /img/gsa-logo.svg
• home/ui-component.svg
• home/design-tokens.svg
• home/utilities.svg
• home/page-templates.svg
• img/us_flag_small.png

Full report 06-16-22-lighthouse--mobile.pdf

[amyleadem]

Task: write up content for using next-gen image formats

Possible types to include: WebP, AVIF, JpegXL

[mejiaj]

There doesn't seem to be a clear place for this guidance to live. Some possible ideas:

1. Create a new page for Practical tips in Performance section
2. Re-purpose the HTTP/2 page since HTTP/3 was standardized this summer. Most of the guidance still applies, but you don't need to do anything special for HTTP/3. Do your servers and CDNs support HTTP/3 [smashingmagazine]