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.

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

Возвращает

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

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

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

Примеры

1

#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>
*/

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

С версии 6.1.0 Введена.

Код wp_img_tag_add_decoding_attr() WP 6.1.1

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 ( false === strpos( $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;
}