Optimize frontend image handling (#2839)

* Use large images for cards * Improve LCP by eagerly loading the first 3 card images * Use smaller fallback image
WordPress · Aug 13, 2024 · 82f8a22 · 82f8a22
1 parent d962660
commit 82f8a22
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 7 deletions.
diff --git a/wp-content/themes/pub/wporg-learn-2024/functions.php b/wp-content/themes/pub/wporg-learn-2024/functions.php
@@ -27,6 +27,7 @@
  * Actions and filters.
  */
 add_action( 'after_setup_theme', __NAMESPACE__ . '\setup' );
+add_filter( 'wp_get_attachment_image_attributes', __NAMESPACE__ . '\eager_load_first_card_row_images', 10, 3 );
 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_assets' );
 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\maybe_enqueue_sensei_assets', 100 );
 
@@ -137,6 +138,29 @@ function enqueue_assets() {
 	}
 }
 
+/**
+ * Eagerly load the images for the first row of cards, for performance (LCP metric).
+ *
+ * @param array   $attr       The image attributes.
+ * @param WP_Post $attachment The attachment post object.
+ * @param string  $size       The image size.
+ * @return array The modified image attributes.
+ */
+function eager_load_first_card_row_images( $attr, $attachment, $size ) {
+	static $image_count = 0;
+
+	if ( is_front_page() || is_archive() || is_search() || is_page( 'my-courses' ) ) {
+		$image_count++;
+
+		if ( $image_count <= 3 ) {
+			$attr['loading'] = 'eager';
+			$attr['fetchpriority'] = 'high';
+		}
+	}
+
+	return $attr;
+}
+
 /**
  * Sensei doesn't enqueue learning mode styles for Lessons which are not part of a course.
  * Enqueue the styles and add the required body class if needed.
@@ -364,7 +388,7 @@ function set_site_breadcrumbs( $breadcrumbs ) {
  */
 function set_default_featured_image( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
 	if ( ! $html ) {
-		return '<img src="https://s.w.org/images/learn-thumbnail-fallback.jpg?v=4" alt="' . esc_attr( get_the_title( $post_id ) ) . '" />';
+		return '<img src="https://s.w.org/images/learn-thumbnail-fallback.jpg?v=5" alt="' . esc_attr( get_the_title( $post_id ) ) . '" />';
 	}
 
 	return $html;

diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-course-h3.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-course-h3.html
@@ -1,7 +1,7 @@
 <!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
 <div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
 
-	<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
+	<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","sizeSlug":"large","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
 
 	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"},"blockGap":"0"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
 	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">

diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-course.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-course.html
@@ -1,7 +1,7 @@
 <!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
 <div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
 
-	<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
+	<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","sizeSlug":"large","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
 
 	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"},"blockGap":"0"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
 	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">

diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html
@@ -1,7 +1,7 @@
 <!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
 <div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
 
-	<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
+	<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","sizeSlug":"large","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
 
 	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"},"blockGap":"0"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
 	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">

diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html
@@ -1,7 +1,7 @@
 <!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
 <div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
 
-	<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
+	<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","sizeSlug":"large","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
 
 	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"},"blockGap":"0"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
 	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">

diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card.html b/wp-content/themes/pub/wporg-learn-2024/parts/card.html
@@ -1,7 +1,7 @@
 <!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
 <div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
 
-	<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
+	<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","sizeSlug":"large","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
 
 	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"},"blockGap":"0"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
 	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">

diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/page-my-courses-content.php b/wp-content/themes/pub/wporg-learn-2024/patterns/page-my-courses-content.php
@@ -37,7 +37,7 @@
 		<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
 		<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
 
-			<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
+			<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","sizeSlug":"large","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
 
 			<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"},"blockGap":"var:preset|spacing|10"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
 			<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">