| @@ -76,8 +76,14 @@ | ||
| 76 | 76 | 'default' => true, |
| 77 | 77 | 'label' => __( 'Lazy-load HTML5 Videos', 'xspeed' ), |
| 78 | 78 | 'description' => __( 'Set preload="none" on self-hosted <video> tags, overriding a player\'s own preload="auto"/"metadata". Autoplaying videos are left alone — they need their bytes regardless. Browsers do not yet support loading="lazy" on video; preload="none" is the closest equivalent.', 'xspeed' ), |
| 79 | 79 | ), |
| 80 | + 'lazy_background_images' => array( | |
| 81 | + 'type' => 'bool', | |
| 82 | + 'default' => false, | |
| 83 | + 'label' => __( 'Lazy-load Background Images', 'xspeed' ), | |
| 84 | + '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' ), | |
| 85 | + ), | |
| 80 | 86 | 'eager_first_n' => array( |
| 81 | 87 | 'type' => 'int', |
| 82 | 88 | 'default' => 1, |
| 83 | 89 | 'min' => 0, |
| @@ -82,9 +88,9 @@ | ||
| 82 | 88 | 'default' => 1, |
| 83 | 89 | 'min' => 0, |
| 84 | 90 | 'max' => 10, |
| 85 | 91 | 'label' => __( 'Eager-load First N Images', 'xspeed' ), |
| 86 | - '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.', 'xspeed' ), | |
| 92 | + '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. Lazy-loaded background images use the same number.', 'xspeed' ), | |
| 87 | 93 | ), |
| 88 | 94 | 'add_missing_dimensions' => array( |
| 89 | 95 | 'type' => 'bool', |
| 90 | 96 | 'default' => true, |
| @@ -155,8 +161,9 @@ | ||
| 155 | 161 | $any_enabled = ! empty( $opts['lazy_images'] ) |
| 156 | 162 | || ! empty( $opts['lazy_iframes'] ) |
| 157 | 163 | || ! empty( $opts['lazy_videos'] ) |
| 158 | 164 | || ! empty( $opts['video_facade'] ) |
| 165 | + || ! empty( $opts['lazy_background_images'] ) | |
| 159 | 166 | || ! empty( $opts['add_missing_dimensions'] ); |
| 160 | 167 | if ( ! $any_enabled ) { |
| 161 | 168 | return; |
| 162 | 169 | } |
| @@ -193,8 +200,15 @@ | ||
| 193 | 200 | // script sets a src and commits the fetch. |
| 194 | 201 | add_action( 'wp_head', array( $this, 'print_observer_script' ), 1 ); |
| 195 | 202 | } |
| 196 | 203 | |
| 204 | + // Head, because the rule that holds a background back has to apply | |
| 205 | + // before first paint, or the browser has already requested it. | |
| 206 | + if ( ! empty( $opts['lazy_background_images'] ) ) { | |
| 207 | + add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_background_style' ) ); | |
| 208 | + add_action( 'wp_head', array( $this, 'print_background_script' ), 1 ); | |
| 209 | + } | |
| 210 | + | |
| 197 | 211 | // Same conditional-footer treatment for the autoplay restorer: it is |
| 198 | 212 | // only printed on a response that actually deferred one. |
| 199 | 213 | if ( ! empty( $opts['lazy_videos'] ) ) { |
| 200 | 214 | /* |
| @@ -225,8 +239,28 @@ | ||
| 225 | 239 | public function enqueue_facade_style(): void { |
| 226 | 240 | wp_register_style( 'xspeed-video-facade', false, array(), XSPEED_VERSION ); |
| 227 | 241 | wp_enqueue_style( 'xspeed-video-facade' ); |
| 228 | 242 | wp_add_inline_style( 'xspeed-video-facade', \XSpeed\Video_Facade::facade_style() ); |
| 243 | + } | |
| 244 | + | |
| 245 | + public function enqueue_background_style(): void { | |
| 246 | + wp_register_style( 'xspeed-lazy-bg', false, array(), XSPEED_VERSION ); | |
| 247 | + wp_enqueue_style( 'xspeed-lazy-bg' ); | |
| 248 | + wp_add_inline_style( 'xspeed-lazy-bg', Lazy_Loader::background_style() ); | |
| 249 | + } | |
| 250 | + | |
| 251 | + /** | |
| 252 | + * data-xs-nodelay: Delay JS would otherwise hold this back until the | |
| 253 | + * first interaction, and every held background would stay blank. | |
| 254 | + */ | |
| 255 | + public function print_background_script(): void { | |
| 256 | + wp_print_inline_script_tag( | |
| 257 | + Lazy_Loader::background_script(), | |
| 258 | + array( | |
| 259 | + 'id' => 'xspeed-lazy-bg', | |
| 260 | + 'data-xs-nodelay' => true, | |
| 261 | + ) | |
| 262 | + ); | |
| 229 | 263 | } |
| 230 | 264 | |
| 231 | 265 | /** |
| 232 | 266 | * Emit the click-to-play handler inline. Inline (not enqueued) because |
