elementor / modules / image-loading-optimization / module.php

module.php in Elementor Website Builder – more than just a page builder 3.17.1, at modules/image-loading-optimization/module.php

384 lines 11.7 KB

Raw Download Zip

1	<?php
2	namespace Elementor\Modules\ImageLoadingOptimization;
3
4	use Elementor\Core\Base\Module as BaseModule;
5	use Elementor\Core\Experiments\Manager as Experiments_Manager;
6
7	if ( ! defined( 'ABSPATH' ) ) {
8	exit; // Exit if accessed directly
9	}
10
11	class Module extends BaseModule {
12	/**
13	* @var string The experiment name.
14	*/
15	const EXPERIMENT_NAME = 'e_image_loading_optimization';
16
17	/**
18	* @var int Minimum square-pixels threshold.
19	*/
20	private $min_priority_img_pixels = 50000;
21
22	/**
23	* @var int The number of content media elements to not lazy-load.
24	*/
25	private $omit_threshold = 3;
26
27	/**
28	* @var array Keep a track of images for which loading optimization strategy were computed.
29	*/
30	private static $image_visited = [];
31
32	/**
33	* Get Module name.
34	*/
35	public function get_name() {
36	return 'image-loading-optimization';
37	}
38
39	/**
40	* Get experimental data.
41	*
42	* @return array Experimental settings.
43	*/
44	public static function get_experimental_data() {
45	return [
46	'name' => static::EXPERIMENT_NAME,
47	'title' => esc_html__( 'Optimize Image Loading', 'elementor' ),
48	'tag' => esc_html__( 'Performance', 'elementor' ),
49	'description' => sprintf(
50	/* translators: 1: fetchpriority attribute, 2: lazy loading attribute. */
51	esc_html__( 'Applying %1$s on LCP image and %2$s on images below the fold to improve performance scores.', 'elementor' ),
52	'<code>fetchpriority="high"</code>',
53	'<code>loading="lazy"</code>'
54	),
55	'new_site' => [
56	'default_active' => true,
57	'minimum_installation_version' => '3.17.0',
58	],
59	'generator_tag' => true,
60	'release_status' => Experiments_Manager::RELEASE_STATUS_BETA,
61	'default' => Experiments_Manager::STATE_INACTIVE,
62	];
63	}
64
65	/**
66	* Constructor.
67	*/
68	public function __construct() {
69	parent::__construct();
70
71	// Stop wp core logic.
72	add_action( 'init', [ $this, 'stop_core_fetchpriority_high_logic' ] );
73	add_filter( 'wp_lazy_loading_enabled', '__return_false' );
74
75	// Run optimization logic on header.
76	add_action( 'get_header', [ $this, 'set_buffer' ] );
77
78	// Ensure buffer is flushed (if any) before the content logic.
79	add_filter( 'the_content', [ $this, 'flush_header_buffer' ], 0 );
80
81	// Run optimization logic on content.
82	add_filter( 'wp_content_img_tag', [ $this, 'loading_optimization_image' ] );
83
84	// Run optimization logic on footer. Flushing of footer buffer will be handled by PHP script end default logic.
85	add_action( 'get_footer', [ $this, 'set_buffer' ] );
86	}
87
88	/**
89	* Stop WordPress core fetchpriority logic by setting the wp_high_priority_element_flag flag to false.
90	*/
91	public function stop_core_fetchpriority_high_logic() {
92	// wp_high_priority_element_flag was only introduced in 6.3.0
93	if ( function_exists( 'wp_high_priority_element_flag' ) ) {
94	wp_high_priority_element_flag( false );
95	}
96	}
97
98	/**
99	* Set buffer to handle header and footer content.
100	*/
101	public function set_buffer() {
102	ob_start( [ $this, 'handle_buffer_content' ] );
103	}
104
105	/**
106	* This function ensure that buffer if any is flushed before the content is called.
107	* This function behaves more like an action than a filter.
108	*
109	* @param string $content the content.
110	* @return string We simply return the content from parameter.
111	*/
112	public function flush_header_buffer( $content ) {
113	$buffer_status = ob_get_status();
114
115	if ( ! empty( $buffer_status ) &&
116	1 === $buffer_status['type'] &&
117	get_class( $this ) . '::handle_buffer_content' === $buffer_status['name'] ) {
118	ob_end_flush();
119	}
120
121	return $content;
122	}
123
124	/**
125	* Callback to handle image optimization logic on buffered content.
126	*
127	* @param string $buffer Buffered content.
128	* @return string Content with optimized images.
129	*/
130	public function handle_buffer_content( $buffer ) {
131	return $this->filter_images( $buffer );
132	}
133
134	/**
135	* Check for image in the content provided and apply optimization logic on them.
136	*
137	* @param string $content Content to be analyzed.
138	* @return string Content with optimized images.
139	*/
140	private function filter_images( $content ) {
141	return preg_replace_callback(
142	'/<img\s[^>]+>/',
143	function ( $matches ) {
144	return $this->loading_optimization_image( $matches[0] );
145	},
146	$content
147	);
148	}
149
150	/**
151	* Apply loading optimization logic on the image.
152	*
153	* @param mixed $image Original image tag.
154	* @return string Optimized image.
155	*/
156	public function loading_optimization_image( $image ) {
157	if ( isset( self::$image_visited[ $image ] ) ) {
158	return self::$image_visited[ $image ];
159	}
160
161	$optimized_image = $this->add_loading_optimization_attrs( $image );
162	self::$image_visited[ $image ] = $optimized_image;
163
164	return $optimized_image;
165	}
166
167	/**
168	* Adds optimization attributes to an `img` HTML tag.
169	*
170	* @param string $image The HTML `img` tag where the attribute should be added.
171	* @return string Converted `img` tag with optimization attributes added.
172	*/
173	private function add_loading_optimization_attrs( $image ) {
174	$width = preg_match( '/ width=["\']([0-9]+)["\']/', $image, $match_width ) ? (int) $match_width[1] : null;
175	$height = preg_match( '/ height=["\']([0-9]+)["\']/', $image, $match_height ) ? (int) $match_height[1] : null;
176	$loading_val = preg_match( '/ loading=["\']([A-Za-z]+)["\']/', $image, $match_loading ) ? $match_loading[1] : null;
177	$fetchpriority_val = preg_match( '/ fetchpriority=["\']([A-Za-z]+)["\']/', $image, $match_fetchpriority ) ? $match_fetchpriority[1] : null;
178
179	// Images should have height and dimension width for the loading optimization attributes to be added.
180	if ( ! str_contains( $image, ' width="' ) \|\| ! str_contains( $image, ' height="' ) ) {
181	return $image;
182	}
183
184	$optimization_attrs = $this->get_loading_optimization_attributes(
185	[
186	'width' => $width,
187	'height' => $height,
188	'loading' => $loading_val,
189	'fetchpriority' => $fetchpriority_val,
190	]
191	);
192
193	if ( ! empty( $optimization_attrs['fetchpriority'] ) ) {
194	$image = str_replace( '<img', '<img fetchpriority="' . esc_attr( $optimization_attrs['fetchpriority'] ) . '"', $image );
195	}
196
197	if ( ! empty( $optimization_attrs['loading'] ) ) {
198	$image = str_replace( '<img', '<img loading="' . esc_attr( $optimization_attrs['loading'] ) . '"', $image );
199	}
200
201	return $image;
202	}
203
204	/**
205	* Return loading Loading optimization attributes for a image with give attribute.
206	*
207	* @param array $attr Existing image attributes.
208	* @return array Loading optimization attributes.
209	*/
210	private function get_loading_optimization_attributes( $attr ) {
211	$loading_attrs = [];
212
213	// For any resources, width and height must be provided, to avoid layout shifts.
214	if ( ! isset( $attr['width'], $attr['height'] ) ) {
215	return $loading_attrs;
216	}
217
218	/*
219	* The key function logic starts here.
220	*/
221	$maybe_in_viewport = null;
222	$increase_count = false;
223	$maybe_increase_count = false;
224
225	/*
226	* Logic to handle a `loading` attribute that is already provided.
227	*
228	* Copied from `wp_get_loading_optimization_attributes()`.
229	*/
230	if ( isset( $attr['loading'] ) ) {
231	/*
232	* Interpret "lazy" as not in viewport. Any other value can be
233	* interpreted as in viewport (realistically only "eager" or `false`
234	* to force-omit the attribute are other potential values).
235	*/
236	if ( 'lazy' === $attr['loading'] ) {
237	$maybe_in_viewport = false;
238	} else {
239	$maybe_in_viewport = true;
240	}
241	}
242
243	// Logic to handle a `fetchpriority` attribute that is already provided.
244	$has_fetchpriority_high_attr = ( isset( $attr['fetchpriority'] ) && 'high' === $attr['fetchpriority'] );
245
246	/*
247	* Handle cases where a `fetchpriority="high"` has already been set.
248	*
249	* Copied from `wp_get_loading_optimization_attributes()`.
250	*/
251	if ( $has_fetchpriority_high_attr ) {
252	/*
253	* If the image was already determined to not be in the viewport (e.g.
254	* from an already provided `loading` attribute), trigger a warning.
255	* Otherwise, the value can be interpreted as in viewport, since only
256	* the most important in-viewport image should have `fetchpriority` set
257	* to "high".
258	*/
259	if ( false === $maybe_in_viewport ) {
260	_doing_it_wrong(
261	__FUNCTION__,
262	esc_html__( 'An image should not be lazy-loaded and marked as high priority at the same time.', 'elementor' ),
263	''
264	);
265	/*
266	* Set `fetchpriority` here for backward-compatibility as we should
267	* not override what a developer decided, even though it seems
268	* incorrect.
269	*/
270	$loading_attrs['fetchpriority'] = 'high';
271	} else {
272	$maybe_in_viewport = true;
273	}
274	}
275
276	if ( null === $maybe_in_viewport && ! is_admin() ) {
277	$content_media_count = $this->increase_content_media_count( 0 );
278	$increase_count = true;
279	if ( $content_media_count < $this->omit_threshold ) {
280	$maybe_in_viewport = true;
281	} else {
282	$maybe_in_viewport = false;
283	}
284	}
285
286	if ( $maybe_in_viewport ) {
287	$loading_attrs = $this->maybe_add_fetchpriority_high_attr( $loading_attrs, $attr );
288	} else {
289	$loading_attrs['loading'] = 'lazy';
290	}
291
292	if ( $increase_count ) {
293	$this->increase_content_media_count();
294	} elseif ( $maybe_increase_count ) {
295	if ( $this->get_min_priority_img_pixels() <= $attr['width'] * $attr['height'] ) {
296	$this->increase_content_media_count();
297	}
298	}
299
300	return $loading_attrs;
301	}
302
303	/**
304	* Helper to get the minimum threshold for number of pixels an image needs to have to be considered "priority".
305	*
306	* @return int The minimum number of pixels (width * height). Default is 50000.
307	*/
308	private function get_min_priority_img_pixels() {
309	/**
310	* Filter the minimum pixel threshold used to determine if an image should have fetchpriority="high" applied.
311	*
312	* @see https://developer.wordpress.org/reference/hooks/wp_min_priority_img_pixels/
313	*
314	* @param int $pixels The minimum number of pixels (with * height).
315	* @return int The filtered value.
316	*/
317	return apply_filters( 'elementor/image-loading-optimization/min_priority_img_pixels', $this->min_priority_img_pixels );
318	}
319
320	/**
321	* Keeps a count of media image.
322	*
323	* @param int $amount Amount by which count must be increased.
324	* @return int current image count.
325	*/
326	private function increase_content_media_count( $amount = 1 ) {
327	static $content_media_count = 0;
328
329	$content_media_count += $amount;
330
331	return $content_media_count;
332	}
333
334	/**
335	* Determines whether to add `fetchpriority='high'` to loading attributes.
336	*
337	* @param array $loading_attrs Array of the loading optimization attributes for the element.
338	* @param array $attr Array of the attributes for the element.
339	* @return array Updated loading optimization attributes for the element.
340	*/
341	private function maybe_add_fetchpriority_high_attr( $loading_attrs, $attr ) {
342	if ( isset( $attr['fetchpriority'] ) ) {
343	if ( 'high' === $attr['fetchpriority'] ) {
344	$loading_attrs['fetchpriority'] = 'high';
345	$this->high_priority_element_flag( false );
346	}
347
348	return $loading_attrs;
349	}
350
351	// Lazy-loading and `fetchpriority="high"` are mutually exclusive.
352	if ( isset( $loading_attrs['loading'] ) && 'lazy' === $loading_attrs['loading'] ) {
353	return $loading_attrs;
354	}
355
356	if ( ! $this->high_priority_element_flag() ) {
357	return $loading_attrs;
358	}
359
360	if ( $this->get_min_priority_img_pixels() <= $attr['width'] * $attr['height'] ) {
361	$loading_attrs['fetchpriority'] = 'high';
362	$this->high_priority_element_flag( false );
363	}
364
365	return $loading_attrs;
366	}
367
368	/**
369	* Accesses a flag that indicates if an element is a possible candidate for `fetchpriority='high'`.
370	*
371	* @param bool $value Optional. Used to change the static variable. Default null.
372	* @return bool Returns true if high-priority element was marked already, otherwise false.
373	*/
374	private function high_priority_element_flag( $value = null ) {
375	static $high_priority_element = true;
376
377	if ( is_bool( $value ) ) {
378	$high_priority_element = $value;
379	}
380
381	return $high_priority_element;
382	}
383	}
384