← All changes | includes/modules/Lazy/LazyModule.php +215 -15 1.0.4 → 1.3.7 View file →

		@@ -25,8 +25,10 @@
25	25	declare(strict_types=1);
26	26
27	27	namespace XSpeed\Modules\Lazy;
28	28
	29	+defined( 'ABSPATH' ) || exit;
	30	+
29	31	use XSpeed\Lazy_Loader;
30	32	use XSpeed\Module;
31	33
32	34	final class LazyModule extends Module {
		@@ -36,11 +38,18 @@
36	38	public const VERSION = '1.0.0';
37	39
38	40	public function ui_metadata(): array {
39	41	return array(
40		- 'label' => 'Lazy Load',
41		- 'icon' => 'Image',
42		- 'description' => 'Defer images / iframes / videos until they scroll into view, and auto-add missing dimensions to prevent CLS.',
	42	+ 'label' => __( 'Media Optimization', 'xspeed' ),
	43	+ 'tab_label' => __( 'Lazy Loading', 'xspeed' ), // its own tab on the Media Optimization page
	44	+ 'icon' => 'Image',
	45	+ 'description' => __( 'Loads images, videos and embeds only when visitors scroll to them.', 'xspeed' ),
	46	+ 'group' => 'performance',
	47	+ // Host page: Lazy Loading (this module) + Image Optimization (Pro)
	48	+ // + AI Suggestions (Pro) as tabs — everything a page loads on one
	49	+ // page instead of separate rows (FBS-83633). Fonts is NOT here: it
	50	+ // has its own Optimization card (#86).
	51	+ 'custom_panel' => 'MediaPanel',
43	52	);
44	53	}
45	54
46	55	public function settings_schema(): array {
		@@ -47,43 +56,64 @@
47	56	return array(
48	57	'lazy_images' => array(
49	58	'type' => 'bool',
50	59	'default' => true,
51		- 'label' => 'Lazy-load Images',
52		- 'description' => 'Add loading="lazy" + decoding="async" to <img> tags in post content. The first images on the page get loading="eager" so the LCP image is not deferred.',
	60	+ 'label' => __( 'Lazy-load images', 'xspeed' ),
	61	+ 'description' => __( 'Images load when the visitor scrolls near them. The first image on the page still loads right away.', 'xspeed' ),
53	62	),
54	63	'lazy_iframes' => array(
55	64	'type' => 'bool',
56	65	'default' => true,
57		- 'label' => 'Lazy-load Iframes',
58		- 'description' => 'Add loading="lazy" to <iframe> tags. Useful for YouTube / Vimeo embeds + map widgets that pull a lot of bytes.',
	66	+ 'label' => __( 'Lazy-load embeds', 'xspeed' ),
	67	+ 'description' => __( 'Embedded content such as YouTube videos and maps loads when the visitor scrolls near it.', 'xspeed' ),
59	68	),
	69	+ 'video_facade' => array(
	70	+ 'type' => 'bool',
	71	+ 'default' => false,
	72	+ 'label' => __( 'Click-to-play videos', 'xspeed' ),
	73	+ 'description' => __( 'Shows a preview image with a play button in place of YouTube, Vimeo and your own videos that have a poster image. The video loads only when clicked. Autoplaying videos are left alone.', 'xspeed' ),
	74	+ ),
60	75	'lazy_videos' => array(
61	76	'type' => 'bool',
62	77	'default' => true,
63		- 'label' => 'Lazy-load HTML5 Videos',
64		- 'description' => 'Set preload="none" on self-hosted <video> tags. Browsers do not yet support loading="lazy" on video; preload="none" is the closest equivalent.',
	78	+ 'label' => __( 'Lazy-load your own videos', 'xspeed' ),
	79	+ 'description' => __( 'Videos uploaded to your site download only when played. Autoplaying videos are left alone.', 'xspeed' ),
65	80	),
	81	+ 'lazy_background_images' => array(
	82	+ 'type' => 'bool',
	83	+ 'default' => false,
	84	+ 'label' => __( 'Lazy-load background images', 'xspeed' ),
	85	+ 'description' => __( 'Hold back background images set in an element\'s inline style (a Cover or Group block, a page-builder section) until the element is near the screen. Uses a small script; visitors without JavaScript get every background as usual. The first N backgrounds on the page load straight away, like images. Backgrounds set in a stylesheet are not affected.', 'xspeed' ),
	86	+ ),
66	87	'eager_first_n' => array(
67	88	'type' => 'int',
68	89	'default' => 1,
69	90	'min' => 0,
70	91	'max' => 10,
71		- 'label' => 'Eager-load First N Images',
72		- 'description' => 'How many images at the top of the post get loading="eager". 1 is usually right (the LCP hero image). 0 to lazy-load everything.',
	92	+ 'label' => __( 'Images to load right away', 'xspeed' ),
	93	+ 'description' => __( 'How many images at the top of the page skip lazy loading. Only the first of them also loads at high priority, and images in hidden or closed sections are not counted. Lazy-loaded background images use the same number. 1 suits most sites; 0 lazy-loads every image.', 'xspeed' ),
	94	+ 'advanced' => true,
	95	+ // Both counters read this number (class-lazy-loader.php), so it
	96	+ // shows while either kind of lazy loading is on.
	97	+ 'dependsOn' => array(
	98	+ 'any' => array(
	99	+ array( 'field' => 'lazy_images' ),
	100	+ array( 'field' => 'lazy_background_images' ),
	101	+ ),
	102	+ ),
73	103	),
74	104	'add_missing_dimensions' => array(
75	105	'type' => 'bool',
76	106	'default' => true,
77		- 'label' => 'Add Missing Image Dimensions',
78		- 'description' => 'When an <img class="wp-image-N"> has no width/height, look the values up from the media library and inject them. Prevents the page-layout shift that hurts CLS scores.',
	107	+ 'label' => __( 'Add missing image sizes', 'xspeed' ),
	108	+ 'description' => __( 'Adds width and height to images that lack them, using the media library. This stops the page from jumping as images load.', 'xspeed' ),
79	109	),
80	110	'excluded_images' => array(
81	111	'type' => 'list',
82	112	'default' => array(),
83	113	'item_type' => 'string',
84		- 'label' => 'Excluded Images',
85		- 'description' => 'Substring patterns that, if found anywhere in the <img> / <iframe> tag (typically a class or filename), exempt that element from lazy-loading. Useful for hero / logo / sprite images. Or add data-skip-lazy to the tag directly.',
	114	+ 'label' => __( 'Excluded images', 'xspeed' ),
	115	+ 'description' => __( 'Images and embeds whose tag contains a line here, such as a class or file name, are never lazy-loaded. Useful for logos and hero images.', 'xspeed' ),
86	116	),
87	117	);
88	118	}
89	119
		@@ -104,8 +134,27 @@
104	134	);
105	135	}
106	136
107	137	public function boot(): void {
	138	+ /*
	139	+ * Deferred to `init`. This module reads its own settings to decide
	140	+ * what to hook, and reading settings builds settings_schema(), whose
	141	+ * labels are declared through __(). boot() runs on `plugins_loaded`,
	142	+ * before `after_setup_theme` — the point WordPress 6.7+ treats as the
	143	+ * earliest safe moment to translate — so doing that here fires
	144	+ * _load_textdomain_just_in_time on every request AND resolves the
	145	+ * labels against a domain that is not loaded yet.
	146	+ *
	147	+ * Everything below hooks actions that fire after `init`, so running
	148	+ * one hook later is equivalent.
	149	+ */
	150	+ add_action( 'init', array( $this, 'boot_on_init' ) );
	151	+ }
	152	+
	153	+ /**
	154	+ * The real boot body — see boot() for why it runs on `init`.
	155	+ */
	156	+ public function boot_on_init(): void {
108	157	// Bail entirely on admin / feed / cron / REST — same scope as
109	158	// Minifier. Lazy-loading rendered HTML only matters on real
110	159	// frontend page renders.
111	160	if ( is_admin() || ( defined( 'DOING_AJAX' ) && DOING_AJAX ) || ( defined( 'DOING_CRON' ) && DOING_CRON ) || ( defined( 'REST_REQUEST' ) && REST_REQUEST ) ) {
		@@ -111,17 +160,31 @@
111	160	if ( is_admin() || ( defined( 'DOING_AJAX' ) && DOING_AJAX ) || ( defined( 'DOING_CRON' ) && DOING_CRON ) || ( defined( 'REST_REQUEST' ) && REST_REQUEST ) ) {
112	161	return;
113	162	}
114	163
	164	+ // Never lazy-load inside a builder editor: the builder measures and
	165	+ // positions elements it expects to be loaded. (#281)
	166	+ if ( \XSpeed\Builder_Editor::is_active() ) {
	167	+ return;
	168	+ }
	169	+
115	170	$opts = $this->get_settings();
116	171	$any_enabled = ! empty( $opts['lazy_images'] )
117	172	|| ! empty( $opts['lazy_iframes'] )
118	173	|| ! empty( $opts['lazy_videos'] )
	174	+ || ! empty( $opts['video_facade'] )
	175	+ || ! empty( $opts['lazy_background_images'] )
119	176	|| ! empty( $opts['add_missing_dimensions'] );
120	177	if ( ! $any_enabled ) {
121	178	return;
122	179	}
123	180
	181	+ // Reset the eager-load budget once per page render, before any
	182	+ // content filter runs, so the "first N images eager" budget is
	183	+ // shared across the featured image + content + avatars rather than
	184	+ // restarting on every filter pass. (FBS-82172 Bug 1)
	185	+ add_action( 'template_redirect', array( Lazy_Loader::class, 'reset_state' ) );
	186	+
124	187	// Late priority so the_content runs after every other filter
125	188	// (shortcodes, do_blocks, embeds). Avoids rewriting tags that
126	189	// haven't been generated yet.
127	190	add_filter( 'the_content', array( Lazy_Loader::class, 'process_html' ), 999 );
		@@ -127,10 +190,138 @@
127	190	add_filter( 'the_content', array( Lazy_Loader::class, 'process_html' ), 999 );
128	191	add_filter( 'post_thumbnail_html', array( Lazy_Loader::class, 'process_html' ), 999 );
129	192	add_filter( 'get_avatar', array( Lazy_Loader::class, 'process_html' ), 999 );
130	193	add_filter( 'widget_text_content', array( Lazy_Loader::class, 'process_html' ), 999 );
	194	+
	195	+ // The facade's click handler is printed only on pages that actually
	196	+ // rendered a facade — a page with no embeds should not carry the
	197	+ // script that reveals them.
	198	+ if ( ! empty( $opts['video_facade'] ) ) {
	199	+ add_action( 'wp_footer', array( $this, 'print_facade_script' ), 99 );
	200	+ // The layout rule goes in the HEAD, unconditionally, while the
	201	+ // handler stays conditional in the footer. Whether a facade
	202	+ // renders isn't known until the content filter has run — long
	203	+ // after wp_head — and a layout rule that arrives in the footer
	204	+ // fixes the gap only after the visitor has already seen it.
	205	+ add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_facade_style' ) );
	206	+ // Embeds that never touch the HTML: a builder widget builds its
	207	+ // YouTube iframe from script, so the buffer pass has nothing to
	208	+ // rewrite. Head, priority 1, for the same reason as the autoplay
	209	+ // restorer below — it must be listening before the widget's
	210	+ // script sets a src and commits the fetch.
	211	+ add_action( 'wp_head', array( $this, 'print_observer_script' ), 1 );
	212	+ }
	213	+
	214	+ // Head, because the rule that holds a background back has to apply
	215	+ // before first paint, or the browser has already requested it.
	216	+ if ( ! empty( $opts['lazy_background_images'] ) ) {
	217	+ add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_background_style' ) );
	218	+ add_action( 'wp_head', array( $this, 'print_background_script' ), 1 );
	219	+ }
	220	+
	221	+ // Same conditional-footer treatment for the autoplay restorer: it is
	222	+ // only printed on a response that actually deferred one.
	223	+ if ( ! empty( $opts['lazy_videos'] ) ) {
	224	+ /*
	225	+ * HEAD, not footer — and as early as anything can run.
	226	+ *
	227	+ * A page-builder video block creates its <video> from its own
	228	+ * script. Ours has to be listening BEFORE that happens: printed
	229	+ * in the footer it loaded after the block's script had already
	230	+ * built the player and started the fetch, so the bytes were
	231	+ * committed before we could defer them. Measured on a live page,
	232	+ * our restorer sat ~17KB after the first block script in the
	233	+ * document, and the videos still downloaded on load.
	234	+ *
	235	+ * It costs ~1KB inline and installs only observers, so running it
	236	+ * early is cheap; a MutationObserver on documentElement catches
	237	+ * every <video> the moment it is inserted, whichever script did
	238	+ * the inserting.
	239	+ */
	240	+ add_action( 'wp_head', array( $this, 'print_autoplay_script' ), 1 );
	241	+ }
131	242	}
132	243
	244	+ /**
	245	+ * Register the facade's layout rule as an inline style on a
	246	+ * dependency-free handle — ~150 bytes, so a separate file would cost
	247	+ * more than the CSS.
	248	+ */
	249	+ public function enqueue_facade_style(): void {
	250	+ wp_register_style( 'xspeed-video-facade', false, array(), XSPEED_VERSION );
	251	+ wp_enqueue_style( 'xspeed-video-facade' );
	252	+ wp_add_inline_style( 'xspeed-video-facade', \XSpeed\Video_Facade::facade_style() );
	253	+ }
	254	+
	255	+ public function enqueue_background_style(): void {
	256	+ wp_register_style( 'xspeed-lazy-bg', false, array(), XSPEED_VERSION );
	257	+ wp_enqueue_style( 'xspeed-lazy-bg' );
	258	+ wp_add_inline_style( 'xspeed-lazy-bg', Lazy_Loader::background_style() );
	259	+ }
	260	+
	261	+ /**
	262	+ * data-xs-nodelay: Delay JS would otherwise hold this back until the
	263	+ * first interaction, and every held background would stay blank.
	264	+ */
	265	+ public function print_background_script(): void {
	266	+ wp_print_inline_script_tag(
	267	+ Lazy_Loader::background_script(),
	268	+ array(
	269	+ 'id' => 'xspeed-lazy-bg',
	270	+ 'data-xs-nodelay' => true,
	271	+ )
	272	+ );
	273	+ }
	274	+
	275	+ /**
	276	+ * Emit the click-to-play handler inline. Inline (not enqueued) because
	277	+ * it is ~400 bytes — a separate request would cost more than the code.
	278	+ */
	279	+ public function print_facade_script(): void {
	280	+ // No longer gated on facade_used(): the observer script can build a
	281	+ // facade for a JS-injected embed on a page where the server pass
	282	+ // rendered none, and a facade without its click handler is a play
	283	+ // button that plays nothing. ~400 bytes on facade-less pages is the
	284	+ // cost of never shipping that.
	285	+ wp_print_inline_script_tag( \XSpeed\Video_Facade::facade_script(), array( 'id' => 'xspeed-video-facade' ) );
	286	+ }
	287	+
	288	+ /**
	289	+ * Emit the interceptor for JS-injected embeds (see
	290	+ * Video_Facade::observer_script() for the mechanism and why the
	291	+ * footer is too late).
	292	+ */
	293	+ public function print_observer_script(): void {
	294	+ wp_print_inline_script_tag( \XSpeed\Video_Facade::observer_script(), array( 'id' => 'xspeed-video-facade-observer' ) );
	295	+ }
	296	+
	297	+ /**
	298	+ * Emit the viewport restorer for deferred AUTOPLAY videos.
	299	+ *
	300	+ * Separate from the facade script because the two are independent: a
	301	+ * page can defer an autoplay hero without any click-to-play facade on
	302	+ * it, and vice versa. Both are gated on having actually rewritten
	303	+ * something, so a page with no video ships neither.
	304	+ */
	305	+ public function print_autoplay_script(): void {
	306	+ /*
	307	+ * Deliberately NOT gated on needs_autoplay_script().
	308	+ *
	309	+ * That flag is only meaningful after the content filter has run, and
	310	+ * this prints in wp_head — long before. The facade script above can
	311	+ * afford to be conditional because it only has to be present by the
	312	+ * time a human clicks; this one has to be listening before another
	313	+ * plugin's script builds a <video> and starts fetching it, which
	314	+ * happens well before wp_footer.
	315	+ *
	316	+ * The cost of being unconditional is ~1KB inline on pages with no
	317	+ * video, and the script installs observers only — it does no work
	318	+ * and touches nothing when it finds no autoplay video. That is a
	319	+ * better trade than missing the one case the feature exists for.
	320	+ */
	321	+ wp_print_inline_script_tag( Lazy_Loader::autoplay_script(), array( 'id' => 'xspeed-lazy-autoplay' ) );
	322	+ }
	323	+
133	324	public function cli_commands(): array {
134	325	return array(
135	326	array(
136	327	'name' => 'xspeed lazy',
		@@ -135,8 +326,9 @@
135	326	array(
136	327	'name' => 'xspeed lazy',
137	328	'callback' => array( $this, 'cli_handler' ),
138	329	'shortdesc' => 'Show which lazy-load toggles are active.',
	330	+ 'ai_hint' => 'Which lazy-loading and image optimizations are on (images, iframes, missing width/height)? Use for questions about images loading too early, layout shift (CLS), or offscreen images flagged by PageSpeed.',
139	331	'synopsis' => array(),
140	332	),
141	333	);
142	334	}
		@@ -149,6 +341,14 @@
149	341	$display = (string) $value;
150	342	}
151	343	\WP_CLI::log( sprintf( '%-30s %s', $key, $display ) );
152	344	}
	345	+ }
	346	+
	347	+ /**
	348	+ * Lazy has no master switch -- it is on when any of lazy_images /
	349	+ * lazy_iframes / video_facade / lazy_videos is set. (#363)
	350	+ */
	351	+ public function is_active(): ?bool {
	352	+ return $this->any_bool_flag_on();
153	353	}
154	354	}