Как “Отложить” Загрузку JavaScript на Сайте WordPress
access_time
hourglass_empty
person_outline

Как “Отложить” Загрузку JavaScript на Сайте WordPress

Введение

Есть несколько причин для того, чтобы “отложить” (парсинг) загрузку JavaScript на сайте WordPress. Самой важной, станет скорость и производительность сайта. В основном JavaScript находится между тегами <head> </head> и когда сайт открывается, он загружает весь код, начиная с самого верха и донизу. Это означает, что большое количество скриптов или длинных строк увеличит время загрузки сайта и появления его контента, так как сначала ему необходимо полностью загрузить все JavaScript. Откладывая парсинг JavaScript, сайт не будет ждать загрузки JS кода, что выльется в более быстрое время загрузки сайта. В этом руководстве мы рассмотрим два способа для “откладывания” загрузки JavaScript в WordPress.

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

Шаг 1 — Анализ сайта

Чтобы выяснить, необходимо ли вам применить это руководство, вы можете проанализировать ваш WordPress используя инструмент GTMetrix.

Средняя рекомендованная оценка в GTMetrix должна быть не менее 71%. Вот результаты тестового сайта на WordPress:

загрузка javascript результаты

Шаг 2 — «Откладывание» загрузки JavaScript на сайте WordPress

На выбор есть несколько способов, которые помогут вам «отложить» загрузку JS на вашем сайте WordPress.

ВАЖНО! Убедитесь, что перед началом сделали резервное копирование сайта.

Вариант 1 – «Откладывание» загрузки JavaScript через плагины WordPress

Использование WordPress плагинов, таких как WP Deferred JavaScript, является одним из самых легких и быстрых путей для «откладывания» загрузки JS на сайте WordPress.

Еще один плагин который поможет вам в этом деле, это Speed Booster Pack. Помимо основного своего предназначения, он также предлагает вам несколько дополнительных методов оптимизации вашего WordPress.

После установки Speed Booster Pack вам необходимо перейти в раздел Settings (Настройки) плагина.

speed boster pack

Отметить флажком Defer parsing of javascript files и нажать Save Changes (Сохранить изменения).

speed boster pack 2

В случае если вы не знаете, как устанавливать плагины WordPress, вы можете найти детальное руководство по этому вопросу здесь.

Вариант 2 – «Откладывание» загрузки JavaScript через functions.php

Для этого, вы должны скопировать данный код в нижнюю часть вашего файла wp-includes/functions.php:

function defer_parsing_of_js ( $url ) {

if ( FALSE === strpos( $url, '.js' ) ) return $url;

if ( strpos( $url, 'jquery.js' ) ) return $url;

return "$url' defer ";

}

add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

Шаг 3 — Проверка изменений

Используйте тот же инструмент для проверки работы сайта WordPress снова. Здесь представлены результаты после проведенных манипуляций:

defer js results2

Поздравляем, следуя этим простым шагам, вы улучшили производительность вашего сайта для более приятных ощущений от его просмотра.

Заключение

В этом кратком руководстве вы узнали, как улучшить скорость и производительность вашего сайта на WordPress с помощью откладывания загрузки JavaScript. Запомните, чем быстрее и плавнее ваш сайт, тем больше трафика и счастливых посетителей у вас будет!

Автор

Author

Elena B. / @elenababarika

Елена имеет профессиональное техническое образование в области информационных технологий и опыт программирования на разных языках под разные платформы и системы. Более 10 лет посвятила сфере веб, работая с разными CMS, такими как: Drupal, Joomla, Magento и конечно же наиболее популярной в наши дни системой управления контентом – WordPress. Её статьи всегда технически выверены и точны, будь то обзор для WordPress или инструкции по настройке вашего VPS сервера.

Похожие руководства

Author

Андрей Ответить

02 декабря 2019

На сайте поставил указанный код в functions.php. После этого в редакторе WordPress перестали отображаться страницы, просто чистый лист. Убрал код, всё стало нормально. Значит для WordPress 5.1.3 код не подходит?

Оставьте ответ

Комментарий*

Имя*

Email*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Присоединиться к Hostinger сейчас!