Lazy load background images added via inline style attributes

plugins/image-prioritizer/class-image-prioritizer-background-image-styled-tag-visitor.php

@@ -19,6 +19,30 @@
  */
 final class Image_Prioritizer_Background_Image_Styled_Tag_Visitor extends Image_Prioritizer_Tag_Visitor {
 
+	/**
+	 * Class name used to indicate a background image which is lazy-loaded.
+	 *
+	 * @since n.e.x.t
+	 * @var string
+	 */
+	const LAZY_BG_IMAGE_CLASS_NAME = 'od-lazy-bg-image';
+
+	/**
+	 * Whether the lazy-loading styles have been added to the head.
+	 *
+	 * @since n.e.x.t
+	 * @var bool
+	 */
+	private $added_lazy_styles = false;
+
+	/**
+	 * Whether the lazy-loading script was added to the body.
+	 *
+	 * @since n.e.x.t
+	 * @var bool
+	 */
+	private $added_lazy_script = false;
+
 	/**
 	 * Visits a tag.
 	 *
@@ -71,6 +95,57 @@ public function __invoke( OD_Tag_Visitor_Context $context ): bool {
 			);
 		}
 
+		$this->lazy_load_bg_images( $context );
+
 		return true;
 	}
+
+	/**
+	 * Optimizes an element with a background image based on whether it is displayed in any initial viewport.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param OD_Tag_Visitor_Context $context Tag visitor context, with the cursor currently at block with a background image.
+	 */
+	private function lazy_load_bg_images( OD_Tag_Visitor_Context $context ): void {
+		$processor = $context->processor;
+
+		// Lazy-loading can only be done once there are URL Metrics collected for both mobile and desktop.
+		if (
+			$context->url_metric_group_collection->get_first_group()->count() === 0
+			||
+			$context->url_metric_group_collection->get_last_group()->count() === 0
+		) {
+			return;
+		}
+
+		$xpath = $processor->get_xpath();
+
+		$in_any_initial_viewport = $context->url_metric_group_collection->is_element_positioned_in_any_initial_viewport( $xpath );
+
+		// If the element is in the initial viewport, do not lazy load its background image.
+		if ( true === $in_any_initial_viewport || null === $in_any_initial_viewport ) {
+			return;
+		}
+
+		$processor->add_class( self::LAZY_BG_IMAGE_CLASS_NAME );
+
+		if ( ! $this->added_lazy_styles ) {
+			$processor->append_head_html(
+				'<style>
+					@media (scripting: enabled) {
+						.has-background.od-lazy-bg-image {
+							background-image: none !important;
+						}
+					}
+				</style>'
+			);
+			$this->added_lazy_styles = true;
+		}
+
+		if ( ! $this->added_lazy_script ) {
+			$processor->append_body_html( wp_get_inline_script_tag( image_prioritizer_get_lazy_load_bg_image_script(), array( 'type' => 'module' ) ) );
+			$this->added_lazy_script = true;
+		}
+	}
 }

plugins/image-prioritizer/helper.php

@@ -112,3 +112,21 @@ function image_prioritizer_get_asset_path( string $src_path, ?string $min_path =
 
 	return $min_path;
 }
+
+/**
+ * Gets the script to lazy-load background images.
+ *
+ * Load the background image when it approaches the viewport using an IntersectionObserver.
+ *
+ * @since n.e.x.t
+ */
+function image_prioritizer_get_lazy_load_bg_image_script(): string {
+	$path   = image_prioritizer_get_asset_path( 'lazy-load-bg-image.js' );
+	$script = file_get_contents( __DIR__ . '/' . $path ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- It's a local filesystem path not a remote request.
+
+	if ( false === $script ) {
+		return '';
+	}
+
+	return $script;
+}

plugins/image-prioritizer/lazy-load-bg-image.js

@@ -0,0 +1,24 @@
+const lazyBgImageObserver = new IntersectionObserver(
+	( entries ) => {
+		for ( const entry of entries ) {
+			if ( entry.isIntersecting ) {
+				const bgImageElement = /** @type {HTMLElement} */ entry.target;
+
+				bgImageElement.classList.remove( 'od-lazy-bg-image' );
+
+				lazyBgImageObserver.unobserve( bgImageElement );
+			}
+		}
+	},
+	{
+		rootMargin: '100% 0% 100% 0%',
+		threshold: 0,
+	}
+);
+
+const bgImageElements = document.querySelectorAll(
+	'.has-background.od-lazy-bg-image'
+);
+for ( const bgImageElement of bgImageElements ) {
+	lazyBgImageObserver.observe( bgImageElement );
+}

webpack.config.js

@@ -135,6 +135,10 @@ const imagePrioritizer = ( env ) => {
 						from: `${ pluginDir }/lazy-load.js`,
 						to: `${ pluginDir }/lazy-load.min.js`,
 					},
+					{
+						from: `${ pluginDir }/lazy-load-bg-image.js`,
+						to: `${ pluginDir }/lazy-load-bg-image.min.js`,
+					},
 				],
 			} ),
 			new WebpackBar( {