Как отложить JavaScript в WordPress для более быстрой загрузки
Хотите отложить использование Javascript на своем сайте?
Если вы сами не являетесь разработчиком, это может показаться непреодолимой задачей.
Отложить Javascript несложно, если вы создали сайт с нуля, но с WordPress у вас, вероятно, есть тема и 6-10 плагинов, загружающих свои собственные файлы Javascript.
Поиск «крючков», необходимых для изменения способа загрузки каждого JS-файла, займет целую вечность!
К счастью, есть более простой способ.
Все, что вам нужно, – это правильный инструмент.
Почему вам следует откладывать файлы JS
Убедимся, что мы на одной странице.
Браузеры обычно загружают файлы Javascript до того, как попытаются отобразить ваш сайт. Это означает, что посетители не смогут увидеть ваш сайт, пока все файлы Javascript (и CSS) не будут полностью загружены.
Если вы отложите файл Javascript, документ HTML может загрузиться до того, как файл Javascript завершит загрузку. Файл JS может загружаться одновременно, но он не будет выполняться, пока документ HTML не будет полностью загружен.
Другими словами, если вы отложите свои файлы Javascript, документ HTML загрузится раньше, а это значит, что ваш сайт будет виден раньше. Это заставляет ваш сайт быстрее отображаться для посетителей, что в конечном итоге является самым важным.
Разобравшись с этим, давайте перейдем к невероятно простому методу, доступному для откладывания Javascript на вашем сайте.
Как отложить файлы Javascript
Вместо того, чтобы пытаться вручную найти и отложить скрипты, вы можете использовать плагин, который сделает это автоматически за вас.
Я рекомендую два разных метода.
Отложить с помощью асинхронного JavaScript
Во-первых, есть бесплатный и простой в использовании плагин Async Javascript.
Простой и популярный, асинхронный Javascript – хороший выбор для откладывания сценариев JS.
Когда вы установите этот плагин производительности, вы обнаружите, что на ваш сайт добавлено следующее новое меню настроек:
Если вы хотите, чтобы все наладилось и работало быстро, вы можете асинхронно или отложить все свои файлы Javascript одновременно с одним из следующих параметров:
Вы можете применить метод отложенной загрузки ко всем файлам, не забудьте очистить кеш, а затем тщательно протестировать свой сайт. Есть вероятность, что некоторые функции вашего сайта могут выйти из строя, например, мобильное меню или интерактивные панели поиска.
Если вы заметили, что какие-либо функции на вашем сайте больше не работают, переключитесь на одну из версий, исключающих jQuery, и, скорее всего, это решит любые проблемы.
В противном случае вы можете вручную добавить скрипты в async или defer, что позволит вам тщательно тестировать по одному файлу за раз.
Единственная особенность этого подхода заключается в том, что вам понадобятся некоторые технические знания, чтобы найти дескрипторы скрипта, необходимые для определения того, какие файлы следует отложить.
В целом, Async Javascript – отличный плагин, и он бесплатный!
Если вам нужен такой же простой, но более надежный плагин для повышения производительности, продолжайте читать.
Как отложить JS с помощью WP Rocket
Плагин, который я использую на сайте comtethemes.com и рекомендую для большей оптимизации производительности, – это WP Rocket.
WP Rocket предоставляет простой интерфейс, полный функций оптимизации производительности. Вы можете щелкнуть переключателем, чтобы минимизировать и объединить файлы, включить расширенное кеширование, отложенную загрузку изображений и многое другое.
Хотя этот плагин сложен внутри, панель настроек не требует технических знаний. Это также относится и к отложенным файлам Javascript.
На панели инструментов WP Rocket вы найдете раздел оптимизации файлов.
Здесь есть много отличных инструментов для оптимизации, а функция отсрочки JS находится внизу страницы. Если вы включите отсрочку, появится второй флажок с автоматически включенной настройкой «Безопасный режим».
Как я уже упоминал, откладывание jQuery очень часто приводит к неработающим функциям на вашем сайте. Хотя вы можете попробовать отключить безопасный режим, вам, вероятно, не стоит.
И это все, что нужно сделать! Просто установите один флажок, и ваши файлы Javascript будут отложены.
Если вы хотите изучить еще несколько вариантов производительности, вы можете посетить WP Rocket здесь или просмотреть наше руководство по WP Rocket.
Javascript отложен
Если файлы Javascript отложены, HTML-документ вашего сайта загрузится раньше, и ваш сайт будет отображаться намного быстрее.
Для большинства сайтов WordPress это простой и значительный прирост производительности. Более того, это не требует каких-либо технических знаний для применения на вашем сайте.
Если у вас остались вопросы о том, как отложить использование Javascript с помощью WordPress, оставьте комментарий ниже.