Статьи

Асинхронная загрузка JavaScript в WordPress

Опубликовано: 01.09.2018

видео Асинхронная загрузка JavaScript в WordPress

Как увеличить скорость загрузки сайта (оптимизация фронтенда для Google PageSpeed)

Философия 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

Поделись этой страницей с друзьями!

2011.11.19
Карта
rss