Themes: Lazy load screenshots (#96961)

Defers the loading of the theme screenshots in the theme showcase until the user scrolls near them with a `loading='lazy'` attribute, effectively decreasing the initial data load from 35MB to 2.5MB (-92%).
Automattic · Dec 4, 2024 · ec77614 · ec77614
1 parent 5867a8e
commit ec77614
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 0 deletions.
diff --git a/client/components/theme/index.jsx b/client/components/theme/index.jsx
@@ -204,6 +204,7 @@ export class Theme extends Component {
 
 		return (
 			<img
+				loading="lazy"
 				alt={ isScreenshotLoaded ? decodeEntities( description ) : '' }
 				className="theme__img"
 				src={ themeImgSrc }

diff --git a/client/components/theme/test/__snapshots__/index.jsx.snap b/client/components/theme/test/__snapshots__/index.jsx.snap
@@ -19,6 +19,7 @@ exports[`Theme rendering should match snapshot 1`] = `
         <img
           alt=""
           class="theme__img"
+          loading="lazy"
           src="https://i0.wp.com/s0.wp.com/wp-content/themes/pub/twentyseventeen/screenshot.png?fit=479%2C360"
           srcset="https://i0.wp.com/s0.wp.com/wp-content/themes/pub/twentyseventeen/screenshot.png?fit=479%2C360&zoom=2 2x"
         />