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.
Полезные ссылки по теме:
- https://www.chromestatus.com/feature/4897260684967936
- https://dexecure.com/blog/image-decoding/
- https://github.com/whatwg/html/issues/1920
- https://usefulangle.com/post/277/img-decoding-attribute
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding
- https://www.youtube.com/watch?v=F6KGcb6trXc&t=12411s
Хуки из функции
Возвращает
Строку
. Текст в котором к 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 6.5.2
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; }