wp_img_tag_add_decoding_attr() │ WP 6.1.0

Добавляет атрибут decoding="async" ко всем картинкам (тегу <img>) в переданном тексте.

Атрибут decoding позволяет указать, как браузер должен декодировать изображение:

async - вне основного потока.
sync - в основном потоке.
auto - по логике самого браузера.

В версии 6.1 WordPress добавляет decoding="async" ко всем изображениям. Текущая функция вызывается в функции wp_filter_content_tags(), которая форсировано висит на хуках:

add_filter( 'the_content', 'wp_filter_content_tags' );
add_filter( 'the_excerpt', 'wp_filter_content_tags' );
add_filter( 'widget_text_content', 'wp_filter_content_tags' );
add_filter( 'widget_block_content', 'wp_filter_content_tags' );

decoding и lazy load - это разные вещи. decoding связан с тем, как браузер декодирует данные картинки, а не когда он их загружает. Т.е. картинка сначала загружается (в кодированом виде), потом декодируется, и только потом отображается. По умолчанию декодирование происходит в основном потоке, а это может мешать другим процессам происходящем на странице.

Атрибут decoding и его значение async

С помощью decoding=async вы сообщаете браузеру, что изображение может быть интерпретировано асинхронно, т.е. декодировано в параллельном потоке, и не должно влиять на основной поток рендера страницы.

Важно: в процессе загрузки браузер проскакивает область изображения, не зная, какого размера нужно оставить место для него, и рендерит то, что идет ниже. Одновременно с этим в параллельном потоке он подгружает картинку, узнает о ее размерах и вписывает ее в страницу. И когда изображение подгружается, верстка может скакать.

Характеристика CLS (Cumulative Layout Shift)

До последнего апдейта эти сдвиги в контенте при загрузке изображений Google специалистов не волновали. Но сейчас появилась новая характеристика - CLS - измеряет сдвиг контента в процессе загрузки.

Поэтому сейчас нужно проконтролировать, чтобы люди, отвечающие за верстку, правильно резервировали область под изображение, точно указывая размеры или пропорции изображения. Чтобы в момент загрузки картинки, не произошло дергание этого контента вверх-вниз.

Не качество изображений и не их объем влияет на ваши баллы в pagespeed. А то, какую нагрузку они создают. И эту нагрузку можно нивелировать, вписав: decoding=async.

Источник: https://www.seonews.ru/analytics/kak-zanyat-top-pri-pomoshchi-odnogo-izobrazheniya/

Для изменения значения атрибута decoding используйте хук: wp_img_tag_add_decoding_attr.

Полезные ссылки по теме:

1 раз — 0.0000272 сек (очень быстро) | 50000 раз — 0.10 сек (скорость света) | PHP 7.4.33, WP 6.1.1

Хуки из функции

wp_img_tag_add_decoding_attr

Возвращает

Строку. Текст в котором к img добавлен атрибут decoding.

Использование

wp_img_tag_add_decoding_attr( $image, $context );

$image(строка) (обязательный): Текст в котором есть <img> теги, к которым нужно добавить decoding атрибут.
$context(строка) (обязательный): Контекст из которого срабатывает фукнцию, передается в хук-фильтр.

Примеры

#1 Демо

$html = <<<HTML
<p>Some text</p>
<img width="442" height="129" class="foo" src="/image-759980.png" alt="">
<p>Some text</p>
HTML;

$html = wp_img_tag_add_decoding_attr( $html, 'custom' );

echo $html;

/*
<p>Some text</p>
<img decoding="async" width="442" height="129" class="foo" src="/image-759980.png" alt="">
<p>Some text</p>
*/

#2 Отключить атрибута `decoding="async"`

Чтобы удалить атрибут decoding="async" у всех изображений, используйте следующий код:

remove_filter( 'the_content', 'wp_filter_content_tags' );
remove_filter( 'the_excerpt', 'wp_filter_content_tags' );
remove_filter( 'widget_text_content', 'wp_filter_content_tags' );
remove_filter( 'widget_block_content', 'wp_filter_content_tags' );

ИЛИ можно изменить его значение, например на auto:

add_filter( 'wp_img_tag_add_decoding_attr', 'wp_kama_img_tag_add_decoding_attr_filter', 10, 3 );

function wp_kama_img_tag_add_decoding_attr_filter( $value, $image, $context ){
	return 'auto';
}

ПС. Код нужно вставлять в плагин или файл темы functions.php.

Список изменений

С версии 6.1.0

Введена.

Код `wp_img_tag_add_decoding_attr() wp img tag add decoding attr` ^{WP 6.3.1}

wp-includes/media.php

function wp_img_tag_add_decoding_attr( $image, $context ) {
	/*
	 * Only apply the decoding attribute to images that have a src attribute that
	 * starts with a double quote, ensuring escaped JSON is also excluded.
	 */
	if ( ! str_contains( $image, ' src="' ) ) {
		return $image;
	}

	/**
	 * Filters the `decoding` attribute value to add to an image. Default `async`.
	 *
	 * Returning a falsey value will omit the attribute.
	 *
	 * @since 6.1.0
	 *
	 * @param string|false|null $value   The `decoding` attribute value. Returning a falsey value
	 *                                   will result in the attribute being omitted for the image.
	 *                                   Otherwise, it may be: 'async' (default), 'sync', or 'auto'.
	 * @param string            $image   The HTML `img` tag to be filtered.
	 * @param string            $context Additional context about how the function was called
	 *                                   or where the img tag is.
	 */
	$value = apply_filters( 'wp_img_tag_add_decoding_attr', 'async', $image, $context );

	if ( in_array( $value, array( 'async', 'sync', 'auto' ), true ) ) {
		$image = str_replace( '<img ', '<img decoding="' . esc_attr( $value ) . '" ', $image );
	}

	return $image;
}