Добавление атрибутов defer и async к WordPress скриптам
Опубликовано: 06.09.2018
Разработчики WordPress очень часто неправильно ставили в очередь свои скрипты, это, зачастую, было связано с тем, что у WordPress раньше не было простого способа добавлять атрибуты async и defer.
Начиная с версии 4.1, был представлен новый фильтр script_loader_tag, который, предоставляет простой способ добавить атрибуты async/defer без ковыряний в заднем проходе.
Как использовать
Добавьте предложеный код в functions.php :
Getting Your PageSpeed Score Up
function mihdan_add_async_attribute( $tag, $handle ) { if ( 'my-js-handle' !== $handle ) { return $tag; } return str_replace( ' src', ' async="async" src', $tag ); } add_filter( 'script_loader_tag', 'mihdan_add_async_attribute', 10, 2 );
Если вы хотите использовать атрибут defer, то просто замените в сниппете async="async на defer="defer".
Где взять идентификатор обработчика my-js-handle? Его вы можете подсмотреть в коде подключения скриптов внутри темы или плагина при помощи функции wp_register_script() и wp_enqueue_script() (первый аргумент):
wp_register_script( 'my-js-handle', $src, $deps, $ver, $in_footer );Добавления к нескольким скриптам сразу
Что делать, если надо добавить атрибут defer сразу к нескольким скриптам? Собрать все идентификаторы обработчиков в массив и пройтись по ним циклом в том же хуке:
function mihdan_add_defer_attribute( $tag, $handle ) { $handles = array( 'my-js-handle', 'another-handle', ); foreach( $handles as $defer_script) { if ( $defer_script === $handle ) { return str_replace( ' src', ' defer="defer" src', $tag ); } } return $tag; } add_filter( 'script_loader_tag', 'mihdan_add_defer_attribute', 10, 2 );Для атрибута async код будет выглядеть аналогично, за исключением девятой строки, где надо просто заменить defer="defer" на async="async.