Lazy load background images added via inline style attributes #1708

ShyamGadde · 2024-11-28T22:33:01Z

Summary

Fixes #1035

Relevant technical choices

Applies only to background images defined inline using style attributes.
Excludes elements in the initial viewport from lazy loading.
Lazy loading for background images is enabled only when URL Metrics are available for both mobile and desktop.

… are available

ShyamGadde · 2024-11-28T22:37:39Z

TODO

Add Unit test cases

github-actions · 2024-11-28T22:41:15Z

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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @rcwd.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: rcwd.

Co-authored-by: ShyamGadde <[email protected]>
Co-authored-by: westonruter <[email protected]>
Co-authored-by: erikyo <[email protected]>

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

westonruter · 2024-11-29T00:31:34Z

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

+			$processor->append_head_html(
+				'<style>
+					@media (scripting: enabled) {
+						.has-background.od-lazy-bg-image {


Where is this has-background class coming from? I don't think we should depend on that being there as any element that has the inline style attribute with the background image is eligible for this lazy loading.

In Gutenberg, the has-background class is typically added to blocks when a background image or color is applied. However, you're right that this might not be consistent, especially with custom blocks or themes.

Done in ce351c2.

…mages

westonruter

This is looking great. I want to do some benchmarking to see the impact on load time performance to see if reducing network contention improves LCP.

Please also add some test cases for the new logic.

westonruter · 2024-11-29T01:41:52Z

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

+
+		if ( ! $this->added_lazy_styles ) {
+			$processor->append_head_html(
+				'<style>


Maybe this should be pulled in from a CSS file like we're doing for the lazy script? In this way we can use the minified version when not in SCRIPT_DEBUG mode.

Currently, the Webpack setup doesn't minify CSS files the same way it handles JavaScript, as the TerserPlugin (used by CopyWebpackPlugin) is specifically for JavaScript minification. I'll explore other approaches to address this.

I guess wp-scripts should have some way of doing this? I don't have a lot of experience with setting this up.

While wp-scripts does handle CSS minification as part of its default build pipeline when importing CSS in JavaScript, it doesn't offer a direct solution for standalone CSS files like these, especially when the goal is to output them in the same directory as the source files.

I think it would be better to use a minifier like cssnano—which is also used by the postcss-loader in the Webpack configuration provided by wp-scripts—through a Webpack plugin like CssMinimizerPlugin, with identical minimizerOptions as in wp-scripts to ensure consistency with the wp-scripts build process.

Done in a21dec4.

ShyamGadde · 2024-11-30T02:31:52Z

@westonruter

While working on the Webpack configuration, I noticed that most plugin setups (except those copying library files from node_modules) primarily handle JavaScript and CSS minification on a per-plugin basis. This requires updating CopyWebpackPlugin patterns whenever new assets are added or renamed.

To streamline this, I thought we could create a separate, generalized Webpack configuration that automates asset minification across all plugins. This approach would:

Automatically detect .js and .css files in plugin directories, excluding build directory and already minified files.
Minify and save the output alongside the source files (e.g., .js -> .min.js).
Eliminate the need for manual updates (for patterns defined in CopyWebpackPlugin) when adding or renaming assets.

Here's a potential implementation:

/**
 * Webpack Config: Minify Plugin Assets
 *
 * @return {Object} Webpack configuration
 */
const minifyPluginAssets = () => {
	return {
		...sharedConfig,
		name: 'minify-plugin-assets',
		plugins: [
			new CopyWebpackPlugin({
				patterns: [
					{
						from: `plugins/**/*.js`,
						to: ({ absoluteFilename }) =>
							absoluteFilename.replace(/\.js$/, '.min.js'),
						globOptions: {
							ignore: ['**/build/**', '**/*.min.js'],
						},
					},
					{
						from: `plugins/**/*.css`,
						to: ({ absoluteFilename }) =>
							absoluteFilename.replace(/\.css$/, '.min.css'),
						transform: {
							transformer: cssMinifyTransformer,
							cache: false,
						},
						globOptions: {
							ignore: ['**/build/**', '**/*.min.css'],
						},
					},
				],
			}),
			new WebpackBar({
				name: 'Minifying Plugin Assets',
				color: '#2196f3',
			}),
		],
	};
};

Would this approach be worth considering for a future enhancement or perhaps as a replacement for some of the existing configurations? It could reduce maintenance overhead and improve consistency.

PS: The configuration could also be adjusted to target assets for only the plugin being built during production builds if that aligns better with the workflow.

westonruter · 2024-11-30T05:10:41Z

Would this approach be worth considering for a future enhancement or perhaps as a replacement for some of the existing configurations? It could reduce maintenance overhead and improve consistency.

@ShyamGadde That sounds good! Please do open a new enhancement issue for that.

westonruter · 2024-11-30T05:29:12Z

I did some Web Vitals benchmarking. I tested with a page that had a featured image set so that it is the LCP element, and then far down the page I added a Cover block with a parallax background image and a Group block also with a different assigned background image. I did not see a consistent improvement to LCP over testing hundreds of iterations, which is largely to be expected. I did, however, see a large reduction in the initial page weight. Since there is no srcset for background images, their full (scaled) sizes are the ones that get downloaded. So whereas before I had:

IMG which downloaded a 174KB bison1-1024x668.jpg (downsized thanks to srcset)
background-image which downloaded a 1.3MB bison2-scaled.jpg
background-image which downloaded a 708KB bison3-scaled.jpg

After only the IMG is initially downloaded and the two background-images were not initially loaded. So that's a ~90% reduction in bytes initially transferred.

westonruter

Great work!

westonruter · 2024-11-30T01:41:51Z

plugins/image-prioritizer/tests/test-cases/images-located-above-or-along-initial-viewport.php

-		$outside_viewport_rect = array_merge(
-			$test_case->get_sample_dom_rect(),
-			array(
-				'top' => 100000,
-			)
-		);


westonruter · 2024-11-30T01:42:26Z

plugins/image-prioritizer/tests/test-cases/no-url-metrics-with-non-background-image-style.php

@@ -12,7 +12,7 @@
 			</body>
 		</html>
 	',
-	// There should be no data-od-xpath added to the DIV because it is using a data: URL for the background-image.
+	// There should be no data-od-xpath added to the DIV because it is using a background-color style.


ShyamGadde added 5 commits November 28, 2024 11:40

Disable loading of bg images not in initial viewport

6191153

Lazy load background images

41fe3c3

Refactor lazy-loading styles to inline implementation

e29cb55

Lazy load bg images only when URL metrics for both mobile and desktop…

5b8b109

… are available

Merge branch 'trunk' into add/lazy-load-bg-images

3a50808

ShyamGadde marked this pull request as ready for review November 28, 2024 22:41

ShyamGadde requested review from westonruter and felixarntz as code owners November 28, 2024 22:41

westonruter reviewed Nov 29, 2024

View reviewed changes

ShyamGadde added 2 commits November 29, 2024 06:14

Avoid relying on has-background class for lazy-loading background i…

ce351c2

…mages

Simplify conditional check for viewport

66e9404

ShyamGadde requested a review from westonruter November 29, 2024 01:00

westonruter reviewed Nov 29, 2024

View reviewed changes

ShyamGadde added 3 commits November 29, 2024 21:29

Move inline CSS to separate file

7943980

Update Webpack config to minify CSS files

a21dec4

Update .gitignore to ignore minified CSS files

12a268d

westonruter added [Type] Enhancement A suggestion for improvement of an existing feature [Plugin] Image Prioritizer Issues for the Image Prioritizer plugin (dependent on Optimization Detective) labels Nov 29, 2024

westonruter added this to the image-prioritizer n.e.x.t milestone Nov 29, 2024

ShyamGadde added 4 commits November 30, 2024 06:34

Fix typo in comment for test case

6608a4e

Improve formatting of inline style tag

c9eb29f

Remove unused variable in test case

e466d58

Add test cases for lazy loading background images

d02fc27

ShyamGadde requested a review from westonruter November 30, 2024 01:10

westonruter added 4 commits November 29, 2024 17:34

Move image_prioritizer_get_lazy_load_script to helper.php

d9b3b66

Combine script and style addition

2b75add

Rename previous lazy-load code now to be for video specifically

4d70ad0

Add missing tests for lazy-load script/style functions

c1491ad

Remove logic made obsolete by WordPress#1658

8ca87d3

westonruter requested a review from adamsilverstein as a code owner November 30, 2024 03:52

Update README with new lazy bgimage feature

4cd8a5e

westonruter approved these changes Nov 30, 2024

View reviewed changes

westonruter changed the title ~~Lazy load background images~~ Lazy load background images added via inline style attributes Nov 30, 2024

westonruter merged commit d7bd6fa into WordPress:trunk Nov 30, 2024
19 checks passed

westonruter mentioned this pull request Dec 2, 2024

Preload image URLs for LCP elements with external background images #1697

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Lazy load background images added via inline style attributes #1708

Lazy load background images added via inline style attributes #1708

ShyamGadde commented Nov 28, 2024

ShyamGadde commented Nov 28, 2024 •

edited

Loading

github-actions bot commented Nov 28, 2024 •

edited

Loading

westonruter Nov 29, 2024

ShyamGadde Nov 29, 2024

ShyamGadde Nov 29, 2024

westonruter left a comment

westonruter Nov 29, 2024

ShyamGadde Nov 29, 2024

westonruter Nov 29, 2024

ShyamGadde Nov 29, 2024

ShyamGadde Nov 29, 2024

ShyamGadde commented Nov 30, 2024

westonruter commented Nov 30, 2024

westonruter commented Nov 30, 2024

westonruter left a comment

westonruter Nov 30, 2024

westonruter Nov 30, 2024

Lazy load background images added via inline style attributes #1708

Lazy load background images added via inline style attributes #1708

Conversation

ShyamGadde commented Nov 28, 2024

Summary

Relevant technical choices

ShyamGadde commented Nov 28, 2024 • edited Loading

TODO

github-actions bot commented Nov 28, 2024 • edited Loading

Unlinked Accounts

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westonruter left a 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

ShyamGadde commented Nov 30, 2024

westonruter commented Nov 30, 2024

westonruter commented Nov 30, 2024

westonruter left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ShyamGadde commented Nov 28, 2024 •

edited

Loading

github-actions bot commented Nov 28, 2024 •

edited

Loading