wp_img_tag_add_decoding_attr()
Добавляет атрибут 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 Демо
$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 | Введена. |
| Устарела с 6.4.0 | Use wp_img_tag_add_loading_optimization_attrs() instead. |
Код wp_img_tag_add_decoding_attr() wp img tag add decoding attr WP 7.0
function wp_img_tag_add_decoding_attr( $image, $context ) {
_deprecated_function( __FUNCTION__, '6.4.0', 'wp_img_tag_add_loading_optimization_attrs()' );
/*
* 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;
}
/** This action is documented in wp-includes/media.php */
$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;
}