0
427
2018-12-22

Как добавить атрибуты Defer & Async для скриптов WordPress в function.php

Добавьте атрибуты Defer и Async к скриптам подключаемым в WordPress через function.php, чтобы оптимизировать производительность ваших сайтов с помощью атрибутов асинхронности или отсрочки.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

При оптимизации и веб разработке сайта довольно часто возникает потребность реализовать отложенную или асинхронную загрузку скриптов. Раньше для того что бы отложить загрузку или осуществить его асинхронную загрузку необходимо было очень весело поплясать с "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/