отложенная загрузка скриптов wordpress
Включаем асинхронную загрузку JavaScript на WordPress
Сейчас я расскажу Вам об интересном способе, который поможет вам ускорить свой сайт на WordPress за счет параллельной загрузки скриптов.
Для чего это нужно?
Все очень просто. Современный сайт представляет из себя сборник самых разнообразных скриптов, тегов, сниппетов, стилей, шрифтов и всего прочего. Как вы понимаете, чем больше «плюшек», тем дольше грузится ваш сайт. Что касается JavaScript, тут отдельная песня. Замечали ли вы такой косяк, когда страница вроде бы загрузилась, но вкладка показывает, что страница все еще грузится? Так бывает, когда какой-то отдельный скрипт не прогрузился до конца. Ладно бы так, иногда страница вообще простаивает до тех пор, пока не загрузится тот самый, вроде бы и не совсем важный скрипт. А у ваших пользователей просто может не хватить терпения.
Асинхронная загрузка JavaScript
Данное понятие полностью противоположно синхронной загрузке, коей является обычный скрипт вида:
Асинхронный вызов скрипта выглядит так:
Всего лишь добавился соответствующий атрибут.
Теперь скрипты не будут заставлять ваших пользователей ждать своей полной загрузки, все будет проходить параллельно.
Как автоматизировать процесс?
Понятное дело, если скрипты вы подключаете вручную и их не много, то сделать это можно и ручками, просто дописав соответствующий атрибут к коду вызова. Но как это дело автоматизировать, если, например, у вас WordPress с кучей скриптов, которые, вдобавок, вызываются автоматически?
Находим уже знакомый нам файл functions.php вашей темы и вставляем туда (например в конец) следующий код:
Заключение
Что можно добавить в заключение. Данный скрипт, возможно, подойдет не всем, так-как, кто его знает, какие скрипты подключены именно у вас, поэтому, ставьте и экспериментируйте. Минуса у такого скрипта быть не может, разве что несовместимость с конкретным сайтом ввиду его специфики. Это был еще один маленький шаг по большой оптимизации вашего сайта.
Асинхронная загрузка JavaScript в WordPress
Философия WordPress рекомендует оформлять загрузку JacaScript в файле functions.php вашей темы. Но предлагаемый кодексом код не учитывает атрибут асинхронной загрузки async.
Правила загрузки JavaScript
Для ускорения загрузки вашего сайта ссылки на файлы JavaScript лучше располагать в конце HTML документа перед закрывающим тегом BODY.
Чтобы браузер не ждал загрузки скриптов и продолжал обрабатывать содержимое вашей страницы файлы JavaScript нужно загружать асинхронно, указав параметр async.
Если вы используете подобный метод, то обратили внимание, что WordPress не формирует параметр async для загружаемых скриптов.
Как добавить async для JavaScript в WordPress
Начиная с версии WordPress 4.1 был введен новый фильтр, который обеспечивает простой способ добавления параметра асинхронной загрузки файлов скриптов.
Чтобы реализовать асинхронную загрузку добавьте следующий код в файл functions.php вашей темы:
Важное замечание. Замените myscript-1, myscript-2, myscript-3 на дескрипторы своих скриптов, которые необходимо загружать асинхронно.
То есть если вы загружаете скрипты следующим кодом:
то дискрипторами будут являться ‘jquery’ и ‘adsbygoogle’. И строка массива асинхронных скриптов будет выглядеть так:
Полученный HTML код загрузки JavaScript будет выглядеть следующим образом:
Данный код асинхронной загрузки считаю лучшим, так как он позволяет избирательно добавлять атрибут async для некоторых файлов JavaScript.
Похожий вариант асинхронной загрузки скриптов в WordPress предложил Тимур Камаев — https://wp-kama.ru/hook/script_loader_tag.
Альтернативный код асинхронной загрузки скриптов в WordPress
Для асинхронной загрузки JavaScript в WordPress добавьте хеш-тег #asyncload к адресу загрузки скрипта, например:
Код преобразования для асинхронной загрузки в таком случае будет выглядеть так (добавьте его в файл functions.php вашей темы):
Полученный HTML код загрузки JavaScript будет выглядеть следующим образом:
В данном примере вы с помощью хеш-тега указываете какой скрипт загружать асинхронно. А функция преобразования при нахождении его добавляет атрибут асинхронной загрузки.
Благодарности
При написании статьи были использованы следующие ресурсы:
Как отложить или асинхронно этот фрагмент WordPress javascript для загрузки, наконец, для более быстрого времени загрузки страницы?
у меня есть различные javascripts, которые являются необходимыми плагинами в одном из моих доменов WordPress, и я знаю, откуда в файле php он вызывается.
Я принимаю все меры, которые я могу принять к ускорить время загрузки страницы, и каждый тестер скорости в интернете говорит, чтобы отложить javascripts, если это возможно.
Я читал о defer=’defer’ и асинхронные функции в javascript, и я думаю, что один из них выполнит то, что я пытаюсь достичь. Но я не понимаю, как это сделать в php-файле.
например, вот фрагмент из php-файла одного конкретного плагина, где вызывается файл javascript:
Я читал, что лучше всего сделать что-то подобное для более быстрого времени загрузки страницы:
но я не знаю, как это сделать в php-файле. Я хочу сделать это со всеми моими файлами javascript.
как бы я добиться отсрочки или asyncing этот фрагмент JavaScript для нагрузок в прошлом и ускоряет время загрузки страницы? Каков был бы идеальный способ увеличить время загрузки страницы во всех браузерах? Спасибо за любые рекомендации, которые кто-либо может предложить!
11 ответов
этой блоге ссылки на два плагина, представляющих интерес:
Асинхронный Javascript
повышение производительности загрузки страницы путем асинхронной загрузки javascript с помощью head.js
WP отложенные Javascripts
отложить загрузку всех javascripts, добавленных с помощью wp_enqueue_scripts, используя LABJS (асинхронный javascript библиотека.)
не тестировали их, но проверили код, и они делают довольно причудливые вещи с помощью процесса запроса скриптов WordPress.
или более универсальный способ:
таким образом, вы можете добавить async в любой скрипт без изменений кода, просто добавьте #asyncload в url скрипта как:
спасибо @MattKeys @crissoca за вдохновляющий мой ответ здесь.
другое решение с использованием другого фильтра, который может использоваться для целевого дескриптора конкретного скрипта:
обновление
вот моя измененная версия решения:
Я считаю, что это плохая практика откладывать / асинхронный WordPress jQuery. Лучшим решением было бы исключить jQuery из фильтра:
можно использовать defer вместо async
очень мало кода модификации Майк Kormendy, что позволяет добавлять сразу 2 атрибута:
правильный способ сделать это
Как “Отложить” Загрузку JavaScript на Сайте WordPress
Введение
Есть несколько причин для того, чтобы “отложить” (парсинг) загрузку JavaScript на сайте WordPress. Самой важной, станет скорость и производительность сайта. В основном JavaScript находится между тегами и когда сайт открывается, он загружает весь код, начиная с самого верха и донизу. Это означает, что большое количество скриптов или длинных строк увеличит время загрузки сайта и появления его контента, так как сначала ему необходимо полностью загрузить все JavaScript. Откладывая парсинг JavaScript, сайт не будет ждать загрузки JS кода, что выльется в более быстрое время загрузки сайта. В этом руководстве мы рассмотрим два способа для “откладывания” загрузки JavaScript в WordPress.
Что вам понадобится
Перед тем, как вы начнете это руководство, вам понадобится следующее:
Шаг 1 — Анализ сайта
Чтобы выяснить, необходимо ли вам применить это руководство, вы можете проанализировать ваш WordPress используя инструмент GTMetrix.
Средняя рекомендованная оценка в GTMetrix должна быть не менее 71%. Вот результаты тестового сайта на WordPress:
Шаг 2 — «Откладывание» загрузки JavaScript на сайте WordPress
На выбор есть несколько способов, которые помогут вам «отложить» загрузку JS на вашем сайте WordPress.
ВАЖНО! Убедитесь, что перед началом сделали резервное копирование сайта.
Вариант 1 – «Откладывание» загрузки JavaScript через плагины WordPress
Использование WordPress плагинов, таких как WP Deferred JavaScript, является одним из самых легких и быстрых путей для «откладывания» загрузки JS на сайте WordPress.
Еще один плагин который поможет вам в этом деле, это Speed Booster Pack. Помимо основного своего предназначения, он также предлагает вам несколько дополнительных методов оптимизации вашего WordPress.
После установки Speed Booster Pack вам необходимо перейти в раздел Settings (Настройки) плагина.
Отметить флажком Defer parsing of javascript files и нажать Save Changes (Сохранить изменения).
В случае если вы не знаете, как устанавливать плагины WordPress, вы можете найти детальное руководство по этому вопросу здесь.
Вариант 2 – «Откладывание» загрузки JavaScript через functions.php
Для этого, вы должны скопировать данный код в нижнюю часть вашего файла wp-includes/functions.php:
Шаг 3 — Проверка изменений
Используйте тот же инструмент для проверки работы сайта WordPress снова. Здесь представлены результаты после проведенных манипуляций:
Поздравляем, следуя этим простым шагам, вы улучшили производительность вашего сайта для более приятных ощущений от его просмотра.
Заключение
В этом кратком руководстве вы узнали, как улучшить скорость и производительность вашего сайта на WordPress с помощью откладывания загрузки JavaScript. Запомните, чем быстрее и плавнее ваш сайт, тем больше трафика и счастливых посетителей у вас будет!
Елена имеет профессиональное техническое образование в области информационных технологий и опыт программирования на разных языках под разные платформы и системы. Более 10 лет посвятила сфере веб, работая с разными CMS, такими как: Drupal, Joomla, Magento и конечно же наиболее популярной в наши дни системой управления контентом – WordPress. Её статьи всегда технически выверены и точны, будь то обзор для WordPress или инструкции по настройке вашего VPS сервера.
Contact From 7 – отложенная загрузка скриптов и стилей для ускорения WordPress
https://github.com/joeldbirch/lazy-cf7-assetsИ так, если Вы такой же “помешанный” на скорости администратор WordPress как и я, значит Вам будет полезно знать что в наших силах осуществить подключение скрипта scripts.js плагина CF7 в defer режиме. Для этого добавьте код ниже в файл темы function.php.
Добавляем в function.php
Официальный вариант подключения стилей и скриптов
Самый что ненаесть официальный вариант отложенного подключения, написанный из слов разработчиков плагина Contact Form 7.
В своих настройках по умолчанию Contact Form 7 загружает свою таблицу стилей и JavaScript на каждую страницу. Вы можете подумать, что это будет излишним или расточительным, и если Вы хотите загружать их только на те страницы, которые содержат контактные формы. Я понимаю это чувство, но плагин испытывает техническую трудность, так как не знает, содержит ли страница контактные формы или нет (при загрузке страницы). Тем не менее, я могу показать вам способ обойти это.
Шаг 1: Прекратить загрузку таблицы стилей JavaScript и CSS на всех страницах
Когда значение WPCF7_LOAD_JS = false (по умолчанию: true ), плагин не загружает JavaScript. Вы можете установить значение этой константы в вашем wp-config.php следующим образом:
Аналогично, вы можете контролировать загрузку таблицы стилей CSS с помощью WPCF7_LOAD_CSS. Контактная форма 7 не загружает таблицу стилей CSS, когда значение WPCF7_LOAD_CSS = false (по умолчанию: true ). Вы можете установить его в wp-config.php следующим образом:
Или вы также можете отключить загрузку JavaScript и CSS, добавив несколько строк кода в файл functions.php вашей темы, например так:
Теперь вам удалось остановить загрузку таблицы стилей JavaScript и CSS, но, к сожалению, вы также “убили” их на страницах, содержащих контактные формы, поэтому нам действительно нужно вернуть их на нужные страницы. Итак, следующий шаг – это то, что вам нужно сделать для загрузки файлов именно на те страницы, на которых они вам нужны.
Шаг 2: Загрузите файлы на страницах, которые содержат контактные формы
Например, предположим, у вас есть страница с именем «Контакты», и это единственная страница, которая содержит форму контакта. И предположим, что у вас есть файл шаблона для страницы «Контакты» с именем contact.php в папке вашей темы. Теперь вам нужно загрузить таблицу стилей JavaScript и CSS контактной формы 7 специально на странице «Контакты».
Для этого вы должны отредактировать файл шаблона contact.php и вставить в него следующие строки:
После отмены автоматического включения JavaScript, вы можете теперь настроить подключение файлов JavaScript плагина для динамической загрузки, импортировав Lazy CF7 Assets и инициализировав его из пакета JavaScript вашего сайта, например:
В качестве альтернативы, если ваши сценарии включены в head тег, а не в конец body тега, вы должны убедиться, что инициализация происходит после того, как все элементы страницы были отрисованы, таким образом:
Ознакомиться с дополнением CF7 можно по данной ссылке: