Optimize lazy-loading of IMG elements in Image Prioritizer #1261

westonruter · 2024-05-30T19:51:43Z

This implements optimization of lazy-loading based on the intersectionRatio of each image captured in the URL metrics. In particular, if an image is visible in the initial viewport for any viewport size, then loading=lazy should be omitted. In contrast, if an image is not visible in any viewport, then loading=lazy should be added.

This PR also improves setting the data-od- meta attributes by automatically setting them when calling OD_HTML_Tag_Walker::set_attribute() and OD_HTML_Tag_Walker::remove_attribute(). These attributes provide a window into what operations were performed to optimize the page. Additionally, an OD_HTML_Tag_Walker::set_meta_attribute() method is added which allows you to set any data-od--prefixed attribute for additional diagnostics.

This also takes an initial stab at writing the readme for Image Prioritizer, and updating the readme for Optimization Detective to account for the new dependent plugin.

plugins/image-prioritizer/class-ip-img-tag-visitor.php

plugins/optimization-detective/class-od-url-metrics-group-collection.php

westonruter · 2024-06-01T00:40:59Z

plugins/image-prioritizer/class-ip-img-tag-visitor.php

+				$walker->set_attribute( 'loading', 'lazy' );
+			}
+		}
+		// TODO: If an image is the LCP element for one breakpoint but not another, add loading=lazy. This won't hurt performance since the image is being preloaded.


That is, if the image is not the LCP element for all breakpoints and the image is not in the initial viewport.

westonruter · 2024-06-01T00:41:26Z

plugins/image-prioritizer/class-ip-img-tag-visitor.php

 			$walker->remove_attribute( 'fetchpriority' );
 		}

-		// TODO: If the image is visible (intersectionRatio!=0) in any of the URL metrics, remove loading=lazy.
-		// TODO: Conversely, if an image is the LCP element for one breakpoint but not another, add loading=lazy. This won't hurt performance since the image is being preloaded.
+		// TODO: Also if the element isLCPCandidate it should never by lazy-loaded.


But in this case, clearly the intersectionRatio will be non-zero. So this is redundant.

…^3) operation

westonruter · 2024-06-03T20:27:49Z

plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php

 			} else {
 				$walker->set_attribute( 'fetchpriority', 'high' );
-				$walker->set_attribute( 'data-od-added-fetchpriority', true );


This data-od- meta attribute is now added automatically when calling set_attribute on the walker instance.

westonruter · 2024-06-03T20:28:32Z

plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php

-			// Never include loading=lazy on the LCP image common across all breakpoints.
-			if ( 'lazy' === $walker->get_attribute( 'loading' ) ) {
-				$walker->set_attribute( 'data-od-removed-loading', $walker->get_attribute( 'loading' ) );
-				$walker->remove_attribute( 'loading' );
 			}


This code is obsolete because the loading attribute is now removed for any element which has an non-zero intersectionRatio in any viewport group.

westonruter · 2024-06-03T20:30:21Z

plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php

+				$walker->set_attribute( 'loading', 'lazy' );
+			}
+		}
+		// TODO: If an image is visible in one breakpoint but not another, add loading=lazy AND add a regular-priority preload link with media queries (unless LCP in which case it should already have a fetchpriority=high link) so that the image won't be eagerly-loaded for viewports on which it is not shown.


I'll be filing an issue for this. It may be a bit confusing when looking at the markup because they may well see an LCP img element which has loading=lazy, but it will still get prioritized via the high-fetchpriority preload link (with a media query). The Lighthouse audit will need to be updated to account for this case.

In my testing at #117 (comment) I found that adding loading=lazy to the LCP image does not degrade performance if there is a preload link with fetchpriority=high.

I've opened this as #1270

westonruter · 2024-06-03T20:56:09Z

plugins/image-prioritizer/tests/test-helper.php

-							<img data-od-removed-fetchpriority="high" src="https://example.com/bar.jpg" alt="Bar" width="10" height="10" loading="lazy" >
+							<p>Pretend this is a super long paragraph that pushes the next image mostly out of the initial viewport.</p>
+							<img data-od-removed-fetchpriority="high" data-od-removed-loading="lazy" src="https://example.com/bar.jpg" alt="Bar" width="10" height="10"  >
+							<p>Now the following image is definitely outside the initial viewport.</p>
+							<img data-od-added-loading data-od-removed-fetchpriority="high" loading="lazy" src="https://example.com/baz.jpg" alt="Baz" width="10" height="10" >
+							<img data-od-removed-fetchpriority="high" data-od-replaced-loading="eager" src="https://example.com/qux.jpg" alt="Qux" width="10" height="10"  loading="lazy">
+							<img src="https://example.com/quux.jpg" alt="Quux" width="10" height="10" loading="lazy"><!-- This one is all good. -->


This is the key test showing how the new functionality is optimizing lazy-loading. Compare this markup with the input markup above.

westonruter · 2024-06-03T20:57:00Z

plugins/image-prioritizer/tests/test-helper.php

@@ -553,6 +579,7 @@ static function () use ( $mobile_breakpoint, $tablet_breakpoint ): array {
 				',
 			),

+			// TODO: Eventually the images in this test should all be lazy-loaded, leaving the prioritization to the preload links.


Not to be done in this PR. See https://github.com/WordPress/performance/pull/1261/files#r1625015100

github-actions · 2024-06-03T21:21:40Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: swissspidy <swissspidy@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

plugins/image-prioritizer/readme.txt

plugins/image-prioritizer/load.php

swissspidy · 2024-06-03T21:49:21Z

plugins/optimization-detective/class-od-html-tag-walker.php

+	 * @param string|true $value Value.
+	 * @return bool Whether an attribute was set.
+	 */
+	public function set_meta_attribute( string $name, $value ): bool {


Not sure I love the term "meta" here, but can't think of a better term

Co-authored-by: Pascal Birchler <pascalb@google.com>

westonruter added [Type] Enhancement A suggestion for improvement of an existing feature [Plugin] Optimization Detective Issues for the Optimization Detective plugin labels May 30, 2024

westonruter added this to the image-prioritizer 0.1.0 milestone May 30, 2024

westonruter commented May 30, 2024

View reviewed changes

plugins/image-prioritizer/class-ip-img-tag-visitor.php Outdated Show resolved Hide resolved

westonruter force-pushed the add/img-lazy-loading-optimization branch 4 times, most recently from 35850bd to 7b781fb Compare May 31, 2024 23:39

westonruter commented Jun 1, 2024

View reviewed changes

plugins/optimization-detective/class-od-url-metrics-group-collection.php Show resolved Hide resolved

westonruter force-pushed the add/img-lazy-loading-optimization branch from 43403a5 to c0ed712 Compare June 1, 2024 00:37

westonruter commented Jun 1, 2024

View reviewed changes

westonruter force-pushed the add/img-lazy-loading-optimization branch from c0ed712 to 9527d38 Compare June 3, 2024 18:39

westonruter mentioned this pull request Jun 3, 2024

Add Image Prioritizer plugin #1235

Merged

Base automatically changed from add/image-prioritizer-plugin-for-reals to trunk June 3, 2024 20:25

westonruter added 6 commits June 3, 2024 13:26

Add/remove loading=lazy based on whether IMG is visible

f50fc6d

Introduce get_all_element_max_intersection_ratios method to cache O(n…

58df839

…^3) operation

Add test case and improve setting meta data attributes

f3fde87

Add test case and improve setting meta data attributes

e1c6b37

Update readmes, plugin URIs, and descriptions

7c015af

Update todos and remove obsolete code

9389a98

westonruter force-pushed the add/img-lazy-loading-optimization branch from 9527d38 to 9389a98 Compare June 3, 2024 20:26

westonruter commented Jun 3, 2024

View reviewed changes

Add tests for getting intersectionRatio

9808396

westonruter commented Jun 3, 2024

View reviewed changes

westonruter marked this pull request as ready for review June 3, 2024 21:21

westonruter requested a review from felixarntz as a code owner June 3, 2024 21:21

westonruter requested review from swissspidy and adamsilverstein June 3, 2024 21:21

swissspidy reviewed Jun 3, 2024

View reviewed changes

plugins/image-prioritizer/readme.txt Outdated Show resolved Hide resolved

swissspidy reviewed Jun 3, 2024

View reviewed changes

plugins/image-prioritizer/load.php Outdated Show resolved Hide resolved

swissspidy reviewed Jun 3, 2024

View reviewed changes

swissspidy approved these changes Jun 3, 2024

View reviewed changes

westonruter and others added 2 commits June 3, 2024 15:36

Add markup to plugin description

7ab405b

Co-authored-by: Pascal Birchler <pascalb@google.com>

Add backticks to directory description

8797919

Co-authored-by: Pascal Birchler <pascalb@google.com>

westonruter merged commit 229fa72 into trunk Jun 3, 2024
13 checks passed

westonruter deleted the add/img-lazy-loading-optimization branch June 3, 2024 23:17

westonruter added the [Plugin] Image Prioritizer Issues for the Image Prioritizer plugin (dependent on Optimization Detective) label Jun 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Optimize lazy-loading of IMG elements in Image Prioritizer #1261

Optimize lazy-loading of IMG elements in Image Prioritizer #1261

westonruter commented May 30, 2024 •

edited

Loading

westonruter Jun 1, 2024

westonruter Jun 1, 2024

westonruter Jun 3, 2024

westonruter Jun 3, 2024

westonruter Jun 3, 2024

westonruter Jun 3, 2024

westonruter Jun 3, 2024

westonruter Jun 3, 2024

westonruter Jun 3, 2024

github-actions bot commented Jun 3, 2024 •

edited

Loading

swissspidy Jun 3, 2024

Optimize lazy-loading of IMG elements in Image Prioritizer #1261

Optimize lazy-loading of IMG elements in Image Prioritizer #1261

Conversation

westonruter commented May 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jun 3, 2024 • edited Loading

Choose a reason for hiding this comment

westonruter commented May 30, 2024 •

edited

Loading

github-actions bot commented Jun 3, 2024 •

edited

Loading