Содержание
Приветствую, дорогие читатели моего блога! При создании и оптимизации web-ресурса достаточно часто появляется необходимость сделать отложенную или асинхронную подгрузку каких-либо скриптов.
Ниже, мы узнаем как сделать асинхронную и отложенную загрузку JavaScript в WordPress. А также, попутно и подробно разберем что такое Defer & Async.
С танцами и бубном
Ранее, чтобы реализовать подобное в WordPress, нужно было довольно громко орать и радостно стучать в шаманский бубен.
Однако не так давно, начиная с версии движка 4.1 был добавлен новенький фильтр, который, наконец-то, осуществляет незамысловатый метод добавления в js сценарии необходимых атрибутов, а что самое главное без участия шамана.
apply_filters('script_loader_tag', string $tag, string $handle, string $src);Установка
function cmswp_add_async_attribute($tag, $handle) {
// Указываем название скрипта
if ( 'my-js-async' !== $handle )
return $tag;
return str_replace( ' src', ' defer="defer" src', $tag );
}
add_filter('script_loader_tag', 'cmswp_add_async_attribute', 10, 2);Если нужно применять async, просто заменяем defer на async. Добавляем этот код в файл functions.php
Не забудьте изменить «название скрипта», оно идет первым параметром, т.е. в примере выше это my-js-async.
Читайте также:
- Удаляем атрибуты Type у скриптов и стилей WordPress
- Переход на https или как установить ssl сертификат на сайт WordPress
- Функциональная html карта сайта WordPress без плагина
Разновидность
Какой тег в том или ином случаи использовать, полностью и напрямую зависит от «характера» самого js, для этого имеется три допустимых варианта.
Стандарт
Без применения каких либо атрибутов — обычная загрузка сценариев браузером.
Атрибут Defer
Останавливает выполнение js до того времени, пока HTML-парсер не закончит свои дела.
Атрибут Async
Начинает выполняться тогда, когда скрипт полностью готов и не обрывает разбор HTML кода.
Есть одно, но!
Нужно все проверять и тщательно тестировать, так как эти два атрибута могут поломать весь сайт.
Если появляются какие-то нюансы, артефакты или вовсе серьезные ошибки, связанные с каким-либо из этих атрибутов, то просто-напросто не применяйте их для какого то конкретного js.
Сразу нескольких сценариев
Для того, чтобы применить defer или async сразу к множеству скриптов, требуется сформировать массив, и после по нему выполнить цикл, добавляя атрибуты к каждому js сценарию.
Можно добавить любой из этих отрывков кода в свой шаблон, в файл functions.php, но не забудьте отредактировать этот код, указав в нем необходимые названия js скриптов.
Defer
function cmswp_add_defer_attribute($tag, $handle) {
// Перечисляем название скриптов через запятую
$scripts_to_defer = array('my-js-one', 'my-js-two');
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', 'cmswp_add_defer_attribute', 10, 2);Async
function cmswp_add_async_attribute($tag, $handle) {
// Перечисляем название скриптов через запятую
$scripts_to_async = array('my-js-one', 'my-js-two');
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', 'cmswp_add_async_attribute', 10, 2);Если что-то не получается или есть вопрос, дайте знать в комментариях, вместе решим задачу!
С вами был Дмитрий! А вам, самосвал $!
