Code Coverage
 
Lines
Functions and Methods
Classes and Traits
Total
63.93%
78 / 122
14.29%
1 / 7
 CRAP
0.00%
0 / 1
LCP_Optimize_Bg_Image
63.93%
78 / 122
14.29%
1 / 7
 140.00
0.00%
0 / 1
 init
0.00%
0 / 7
0.00%
0 / 1
 12
 __construct
100.00%
1 / 1
100.00%
1 / 1
 1
 preload_background_images
83.33%
10 / 12
0.00%
0 / 1
 5.12
 print_preload_links
9.09%
1 / 11
0.00%
0 / 1
 9.76
 add_bg_style_override
45.45%
15 / 33
0.00%
0 / 1
 22.15
 get_responsive_image_rules
87.80%
36 / 41
0.00%
0 / 1
 20.73
 get_image_set
88.24%
15 / 17
0.00%
0 / 1
 4.03
1<?php
2
3namespace Automattic\Jetpack_Boost\Modules\Optimizations\Lcp;
4
5use Automattic\Jetpack\Image_CDN\Image_CDN_Core;
6
7class LCP_Optimize_Bg_Image {
8    /**
9     * The LCP data for optimizing the current page.
10     *
11     * @var array
12     */
13    private $lcp_data;
14
15    public static function init( $lcp_data ) {
16        if ( LCP_Optimization_Util::should_skip_optimization() ) {
17            return;
18        }
19
20        if ( empty( $lcp_data ) ) {
21            return;
22        }
23
24        $instance = new self( $lcp_data );
25
26        // Preload the background image as early as possible.
27        add_action( 'wp_head', array( $instance, 'preload_background_images' ), 1 );
28
29        // Add the background image styling as late as possible.
30        add_action( 'wp_body_open', array( $instance, 'add_bg_style_override' ), 999999 );
31    }
32
33    public function __construct( $lcp_data ) {
34        $this->lcp_data = $lcp_data;
35    }
36
37    public function preload_background_images() {
38        $selectors = array();
39
40        foreach ( $this->lcp_data as $lcp_data ) {
41            $lcp_optimizer = new LCP_Optimization_Util( $lcp_data );
42            if ( ! $lcp_optimizer->can_optimize() ) {
43                continue;
44            }
45
46            // The field is optional, and an undefined key here is a warning on wp_head.
47            if ( ! isset( $lcp_data['selector'] ) ) {
48                continue;
49            }
50
51            if ( in_array( $lcp_data['selector'], $selectors, true ) ) {
52                // If we already printed the styling for this element, skip it.
53                continue;
54            }
55            $selectors[] = $lcp_data['selector'];
56
57            $responsive_image_rules = $this->get_responsive_image_rules( $lcp_data );
58            $this->print_preload_links( $responsive_image_rules );
59        }
60    }
61
62    private function print_preload_links( $responsive_image_rules ) {
63        foreach ( $responsive_image_rules as $breakpoint ) {
64            $image_set = array();
65            foreach ( $breakpoint['image_set'] as $image ) {
66                $image_set[] = sprintf( '%s %sx', $image['url'], $image['dpr'] );
67            }
68
69            $image_set_string = implode( ', ', $image_set );
70
71            printf(
72                '<link rel="preload" href="%s" as="image" fetchpriority="high" media="%s" imagesrcset="%s" />' . PHP_EOL,
73                esc_url( Image_CDN_Core::cdn_url( $breakpoint['base_image'] ) ),
74                esc_attr( $breakpoint['media_query'] ),
75                esc_attr( $image_set_string )
76            );
77        }
78    }
79
80    public function add_bg_style_override() {
81        $selectors = array();
82
83        foreach ( $this->lcp_data as $lcp_data ) {
84            $lcp_optimizer = new LCP_Optimization_Util( $lcp_data );
85            if ( ! $lcp_optimizer->can_optimize() ) {
86                continue;
87            }
88
89            // The field is optional, and an undefined key here is a warning on wp_head.
90            if ( ! isset( $lcp_data['selector'] ) ) {
91                continue;
92            }
93
94            if ( in_array( $lcp_data['selector'], $selectors, true ) ) {
95                // If we already printed the styling for this element, skip it.
96                continue;
97            }
98            $selectors[] = $lcp_data['selector'];
99
100            $image_url = $lcp_optimizer->get_lcp_image_url();
101            if ( empty( $image_url ) ) {
102                continue;
103            }
104
105            $styles                 = array();
106            $responsive_image_rules = $this->get_responsive_image_rules( $lcp_data );
107
108            // Add responsive image styling.
109            foreach ( $responsive_image_rules as $breakpoint ) {
110                $image_set = array();
111                foreach ( $breakpoint['image_set'] as $image ) {
112                    $image_set[] = sprintf( 'url(%s) %sx', $image['url'], $image['dpr'] );
113                }
114
115                $image_set_string = implode( ', ', $image_set );
116
117                $styles[] = sprintf(
118                    '@media %1$s { %2$s { background-image: url(%3$s) !important; background-image: -webkit-image-set(%4$s) !important; background-image: image-set(%4$s) !important; } }',
119                    $breakpoint['media_query'],
120                    $lcp_data['selector'],
121                    $breakpoint['base_image'],
122                    $image_set_string
123                );
124            }
125
126            // Skip outputting empty style block when cssOverride is disabled.
127            if ( empty( $styles ) ) {
128                continue;
129            }
130
131            $bg_styling = PHP_EOL . '<style id="jetpack-boost-lcp-background-image">' . PHP_EOL;
132            // Ensure no </style> tag (or any HTML tags) in output.
133            $bg_styling .= wp_strip_all_tags( implode( PHP_EOL, $styles ) ) . PHP_EOL;
134            $bg_styling .= '</style>' . PHP_EOL;
135
136            // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
137            echo $bg_styling;
138        }
139    }
140
141    private function get_responsive_image_rules( $lcp_data ) {
142        // is_array() as well as empty(): empty( 'not-an-array' ) is false, so a string
143        // breakpoints field would reach array_reverse() as a TypeError on wp_head.
144        if ( $lcp_data['type'] !== LCP::TYPE_BACKGROUND_IMAGE || empty( $lcp_data['breakpoints'] ) || ! is_array( $lcp_data['breakpoints'] ) ) {
145            return array();
146        }
147
148        // Check optimizations object from cloud.
149        // If cssOverride is false, skip all background-image optimizations (preload, !important CSS, resize URLs).
150        // This handles responsive backgrounds and custom focal points - the cloud determines what's safe.
151        // If no optimizations object exists (old cloud response), default to applying all optimizations.
152        if ( ! LCP_Optimization_Util::should_apply_optimization( $lcp_data, 'cssOverride' ) ) {
153            return array();
154        }
155
156        $lcp_optimizer = new LCP_Optimization_Util( $lcp_data );
157        $image_url     = $lcp_optimizer->get_lcp_image_url();
158
159        if ( empty( $image_url ) ) {
160            return array();
161        }
162
163        $styles = array();
164        // Reverse the array to go from smallest to largest.
165        foreach ( array_reverse( $lcp_data['breakpoints'] ) as $breakpoint ) {
166            if ( empty( $breakpoint ) ) {
167                continue;
168            }
169            if ( ! isset( $breakpoint['widthValue'] ) ) {
170                continue;
171            }
172
173            // The Cloud should always return a fixed pixel width for background images, so catering for that is easy peasy.
174            if ( empty( $breakpoint['imageDimensions'] ) || ! is_array( $breakpoint['imageDimensions'] ) ) {
175                continue;
176            }
177
178            // Non-empty and an array does not mean it has an index 0.
179            // @phan-suppress-next-line PhanTypeMismatchDimFetch -- The isset() is the check phan asks for.
180            if ( ! isset( $breakpoint['imageDimensions'][0] ) || ! is_array( $breakpoint['imageDimensions'][0] ) ) {
181                continue;
182            }
183
184            $image_dimensions = $breakpoint['imageDimensions'][0];
185
186            if ( ! isset( $image_dimensions['width'] ) || ! is_numeric( $image_dimensions['width'] ) ) {
187                continue;
188            }
189
190            if ( ! isset( $image_dimensions['height'] ) || ! is_numeric( $image_dimensions['height'] ) ) {
191                continue;
192            }
193
194            // The width and height should already be an integer, but just in case.
195            $image_width  = (int) $image_dimensions['width'];
196            $image_height = (int) $image_dimensions['height'];
197
198            $media_query = array();
199            if ( isset( $breakpoint['minWidth'] ) ) {
200                $media_query[] = sprintf( '(min-width: %spx)', $breakpoint['minWidth'] );
201            }
202            if ( isset( $breakpoint['maxWidth'] ) ) {
203                $media_query[] = sprintf( '(max-width: %spx)', $breakpoint['maxWidth'] );
204            }
205
206            $styles[] = array(
207                'media_query' => empty( $media_query ) ? 'all' : implode( ' and ', $media_query ),
208                'image_set'   => $this->get_image_set( $image_url, $image_width, $image_height ),
209                'base_image'  => Image_CDN_Core::cdn_url(
210                    $image_url,
211                    array(
212                        'resize' => array( $image_width, $image_height ),
213                    )
214                ),
215            );
216        }
217        return $styles;
218    }
219
220    private function get_image_set( $url, $width, $height ) {
221        $dprs = array( 1, 2 );
222
223        // Mobile devices usually have a DPR of 3 which is not common for desktop.
224        if ( $width <= 480 ) {
225            $dprs[] = 3;
226        }
227
228        // Accurately reflect the performance improvement in lighthouse by including a 1.75x DPR image for the Moto G Power.
229        if ( $width === 412 ) {
230            $dprs[] = 1.75;
231        }
232
233        $image_set = array();
234        foreach ( $dprs as $dpr ) {
235            $image_set[] = array(
236                'url' => Image_CDN_Core::cdn_url(
237                    $url,
238                    array(
239                        'resize' => array( $width * $dpr, $height * $dpr ),
240                    )
241                ),
242                'dpr' => $dpr,
243            );
244        }
245        return $image_set;
246    }
247}