Новости
Статьи
Асинхронная загрузка JavaScript в WordPress
Опубликовано: 01.09.2018
Философия WordPress рекомендует оформлять загрузку JacaScript в файле functions.php вашей темы. Но предлагаемый кодексом код не учитывает атрибут асинхронной загрузки async .
Правила загрузки JavaScript
Для ускорения загрузки вашего сайта ссылки на файлы JavaScript лучше располагать в конце HTML документа перед закрывающим тегом BODY.
Чтобы браузер не ждал загрузки скриптов и продолжал обрабатывать содержимое вашей страницы файлы JavaScript нужно загружать асинхронно, указав параметр async .
AJAX-подгрузка постов в WordPress
Например так:
Ранее я писал как правильно подключать JavaScript к шаблону сайта на WordPress .
Если вы используете подобный метод, то обратили внимание, что WordPress не формирует параметр async для загружаемых скриптов.
Как добавить async для JavaScript в WordPress
Начиная с версии WordPress 4.1 был введен новый фильтр, который обеспечивает простой способ добавления параметра асинхронной загрузки файлов скриптов.
Чтобы реализовать асинхронную загрузку добавьте следующий код в файл functions.php вашей темы:
function add_async_attribute($tag, $handle) { // добавьте дескрипторы (названия) скриптов в массив ниже $scripts_to_async = array('myscript-1', 'myscript-2', 'myscript-3'); foreach($scripts_to_async as $async_script) { if ($async_script === $handle) { return str_replace(' src', ' async src', $tag); } } return $tag; } add_filter('script_loader_tag', 'add_async_attribute', 10, 2);Важное замечание. Замените myscript-1, myscript-2, myscript-3 на дескрипторы своих скриптов, которые необходимо загружать асинхронно.
То есть если вы загружаете скрипты следующим кодом:
то дискрипторами будут являться ‘jquery’ и ‘adsbygoogle’. И строка массива асинхронных скриптов будет выглядеть так:
$scripts_to_async = array('adsbygoogle', 'jquery');Полученный HTML код загрузки JavaScript будет выглядеть следующим образом:
Данный код асинхронной загрузки считаю лучшим, так как он позволяет избирательно добавлять атрибут async для некоторых файлов JavaScript.
Похожий вариант асинхронной загрузки скриптов в WordPress предложил Тимур Камаев — https://wp-kama.ru/hook/script_loader_tag .
Альтернативный код асинхронной загрузки скриптов в WordPress
Для асинхронной загрузки JavaScript в WordPress добавьте хеш-тег #asyncload к адресу загрузки скрипта, например:
wp_enqueue_script( 'adsbygoogle', '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js#asyncload', false, null, true );Код преобразования для асинхронной загрузки в таком случае будет выглядеть так (добавьте его в файл functions.php вашей темы):
function add_async_forscript($url) { if (strpos($url, '#asyncload')===false) return $url; else return str_replace('#asyncload', '', $url)."' async='async"; } add_filter('clean_url', 'add_async_forscript', 11, 1);Полученный HTML код загрузки JavaScript будет выглядеть следующим образом:
В данном примере вы с помощью хеш-тега указываете какой скрипт загружать асинхронно. А функция преобразования при нахождении его добавляет атрибут асинхронной загрузки.
Благодарности
При написании статьи были использованы следующие ресурсы:
https://matthewhorne.me/defer-async-wordpress-scripts/ https://stackoverflow.com/questions/18944027/how-do-i-defer-or-async-this-wordpress-javascript-snippet-to-load-lastly-for-fas/20672324#20672324Поделись этой страницей с друзьями!
