Как добавить атрибуты Defer & Async для скриптов WordPress в function.php
При оптимизации и веб разработке сайта довольно часто возникает потребность реализовать отложенную или асинхронную загрузку скриптов. Раньше для того что бы отложить загрузку или осуществить его асинхронную загрузку необходимо было очень весело поплясать с "WEB" бубном :).
Но слава Богу, начиная с WordPress версии 4.1 был представлен новый фильтр, который, наконец, предоставляет простой способ добавления атрибутов async / defer без использования WEBDEV танцев:
apply_filters('script_loader_tag', string $tag, string $handle, string $src);Использование
function 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', 'add_async_attribute', 10, 2);Если вы хотите использовать атрибут «defer», просто замените async = "async" на defer = "defer" .
Добавьте этоn код к вашему « functions.php ».
Вам нужно будет изменить дескриптор, который будет первым параметром метода enqueue.
wp_register_script('my-js-handle', $src, $deps, $ver, $in_footer);То, как вы выберете какой тег использовать, полностью зависит от природы самого скрипта, и есть три возможных варианта.
- Стандартный – это без атрибута async или defer, и это стандартное поведение для вашего браузера.
- Defer – задерживает выполнение скрипта до тех пор, пока HTML-парсер не завершит работу.
- Async – выполняется, когда скрипт готов и не прерывает разбор HTML.
Как всегда, вы должны проверить любые изменения, которые вы делаете. Если вы обнаружите, что у вас есть ошибки, связанные с каким-либо атрибутом, просто не используйте их для этого конкретного сценария.
Пример подключения google map api
Defer
//Допустим мы подключили скрипт вот так
wp_enqueue_script("google_map_api", "https://maps.googleapis.com/maps/api/js". $google_maps_get_string,array(),false,true);
function add_defer_attribute($tag, $handle) {
// add script handles to the array below
$scripts_to_defer = array('google_map_api');
foreach($scripts_to_defer as $defer_script) {
if ($defer_script === $handle) {
return str_replace(' src', ' defer="defer" src', $tag);
}
}
return $tag;
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);Async
//Допустим мы подключили скрипт вот так
wp_enqueue_script("google_map_api", "https://maps.googleapis.com/maps/api/js". $google_maps_get_string,array(),false,true);
function add_async_attribute($tag, $handle) {
// add script handles to the array below
$scripts_to_async = array('google_map_api');
foreach($scripts_to_async as $async_script) {
if ($async_script === $handle) {
return str_replace(' src', ' async="async" src', $tag);
}
}
return $tag;
}
add_filter('script_loader_tag', 'add_async_attribute', 10, 2);Что если вы хотите добавить асинхронный или отложенный атребут для нескольких скриптов?
Чтобы добавить тег async / defer к нескольким сценариям, нам нужно создать массив, а затем выполнить цикл по этому массиву и добавить тег async / defer к каждому сценарию.
Добавьте любой из этих фрагментов в свей темы « functions.php» и отредактируйте массив, включив в него дескрипторы сценариев.
Defer
function add_defer_attribute($tag, $handle) {
// add script handles to the array below
$scripts_to_defer = array('my-js-handle', 'another-handle');
foreach($scripts_to_defer as $defer_script) {
if ($defer_script === $handle) {
return str_replace(' src', ' defer="defer" src', $tag);
}
}
return $tag;
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);Async
function add_async_attribute($tag, $handle) {
// add script handles to the array below
$scripts_to_async = array('my-js-handle', 'another-handle');
foreach($scripts_to_async as $async_script) {
if ($async_script === $handle) {
return str_replace(' src', ' async="async" src', $tag);
}
}
return $tag;
}
add_filter('script_loader_tag', 'add_async_attribute', 10, 2);Дайте мне знать, если у вас есть какие-либо вопросы ниже.
ПС. Отдельное спасибо автору данной статьи: https://matthewhorne.me/defer-async-wordpress-scripts/