Как отложить синтаксический анализ JavaScript в WordPress

Независимо от того, используете ли вы веб-сайт WordPress или любой другой веб-сайт, вы должны знать, что критическим показателем производительности вашего веб-сайта является скорость страницы.

Если вы используете какие-либо инструменты тестирования производительности сайта, такие как GTmetrix или Google PageSpeed ​​Insights, вам может быть предложено отложить синтаксический анализ JavaScript.

Эта фраза может сбивать с толку, но она играет важную роль в увеличении времени загрузки вашего сайта.

Итак, что имеется в виду под отложенным разбором JavaScript?

Что ж, об этом мы поговорим позже подробно. Короче говоря, отложенный синтаксический анализ JavaScript позволяет браузеру сначала загрузить содержимое веб-сайта, не дожидаясь окончания загрузки скриптов.

Этот процесс необходим, поскольку браузеры отображают и загружают JavaScript с сервера перед загрузкой любого другого содержимого веб-сайта. Это вредит скорости вашего сайта и прерывает время загрузки страницы.

К счастью, отложить синтаксический анализ JavaScript — лучший способ смягчить проблему.

В этой статье я объяснил пять проверенных способов отложить синтаксический анализ JavaScript в WordPress. Но перед этим давайте лучше разберемся, что означает эта фраза, и узнаем, нужно ли вам отложить синтаксический анализ Javascript.

Давайте приступим!

Что вы подразумеваете под отложенным анализом JavaScript в WordPress?

Прежде чем вы поймете технику отложенного синтаксического анализа JavaScript, вы должны знать, как веб-браузер отображает веб-страницу.

Начнем с того, что когда ваш браузер отправляет запрос на ваш веб-сервер, он получает страницу, которая загружается в виде HTML-документа. Этот документ HTML включает текст, код, отображающий различные элементы DOM, и различные ресурсы, такие как изображения, таблицы стилей и сценарии.

По умолчанию браузер загружает эти ресурсы последовательно. Отрисовка веб-страницы возобновляется только после загрузки всех ресурсов. Кроме того, большие ресурсы отрицательно сказываются на времени загрузки вашей веб-страницы.

Всякий раз, когда ваш браузер просматривает код для отображения вашего веб-сайта, он прекращает отображение, если находит какой-либо JavaScript. Процесс останавливается до тех пор, пока он не сможет получить и проанализировать файл JavaScript. Это негативно влияет на скорость вашего сайта.

К счастью, процесс отсрочки разбора JavaScript уведомляет браузер о том, что нужно подождать загрузки и анализа файла JavaScript до тех пор, пока не завершится загрузка основного контента вашего веб-сайта. К этому моменту ваши посетители могут взаимодействовать с вашим веб-сайтом, чтобы время, необходимое для загрузки и анализа JavaScript, больше не ставило под угрозу время загрузки вашего сайта.

Как узнать, что вам нужно отложить синтаксический анализ JavaScript?

Как мы уже говорили ранее, инструменты тестирования производительности сайта, такие как GTmetrix, Google PageSpeed ​​Insights или WP Engine Speed ​​Tool, часто предлагают вам отложить синтаксический анализ JavaScript при анализе вашего сайта.

GTmetrix, в частности, предоставляет вам оценку и перечисляет конкретные сценарии, которые необходимо отложить, чтобы повысить скорость загрузки вашей страницы.

Вы можете просто ввести URL-адрес своего веб-сайта и подождать, пока инструмент оценит его. Когда он завершит оценку, перейдите на вкладку PageSpeed ​​и разверните раздел Отложить синтаксический анализ JavaScript.

Этот раздел предлагает вам список второстепенных скриптов, которые загружаются в процессе рендеринга, как показано в примере ниже:

Асинхронные и отложенные атрибуты

Крайне важно убедиться, что загрузка скрипта не мешает отображению веб-страницы. Есть два способа сделать это:

• Асинхронный
• Отложить

Вы можете включить атрибут async в тег script как:

 <script src= “path/to/script” async> </script>

Это говорит вашему браузеру загружать скрипт асинхронно. Чтобы быть точным, браузер загружает ресурс, как только встречает его в коде, но продолжает анализировать HTML, пока ресурс все еще загружается.

С другой стороны, вы можете добавить атрибут defer к тегу script следующим образом:

 <script src= “path/to/script” defer> </script>

Это говорит вашему браузеру не загружать ресурсы, пока он не завершит синтаксический анализ веб-страницы. После завершения синтаксического анализа и рендеринга он загружает список отложенных сценариев, с которыми столкнулся ранее.

Основное различие между атрибутами async и defer заключается в том, когда загружаются ресурсы.

Если у вас компактное веб-приложение, рекомендуется использовать отсрочку, чтобы убедиться, что взаимозависимости удовлетворены. Кроме того, если у вас всего несколько скриптов в пути рендеринга, вы не будете возражать против разницы между использованием обоих этих атрибутов.

Вот пример, чтобы понять атрибуты async и defer:

Допустим, у вас есть два скрипта JS1 и JS2.

Условие состоит в том, что JS2 появляется в коде после JS1, JS2 имеет зависимость от JS1, но JS1 больше, чем JS2.

Теперь, если вы используете async , возможно, что JS2 завершит загрузку до того, как JS1 будет полностью загружен. Это приводит к ошибке, поскольку JS2 выполняется в отсутствие JS1.

С другой стороны, если вы используете defer , JS1 и JS2 загружаются последовательно, что гарантирует отсутствие ошибок.

Почему вам нужно отложить синтаксический анализ JavaScript?

Мы упоминали ранее, что скорость страницы является наиболее важным аспектом, который влияет на производительность вашего сайта. Поскольку файлы JavaScript довольно большие и их загрузка занимает больше времени, задержка их выполнения на некоторое время оказывается удобной для повышения скорости вашего сайта.

Ниже приведены некоторые из причин, по которым вам нужно отложить синтаксический анализ JavaScript в WordPress:

1. Чтобы повысить рейтинг в поиске:

Когда Google или любые другие поисковые системы оценивают ваш веб-сайт для ранжирования в поисковых системах, они принимают скорость страницы в качестве критической точки измерения. Если ваш сайт загружается быстрее, он обязательно появится на первой странице результатов поиска.

Согласно исследованиям, 1 из 2 человек ожидает, что страница загрузится менее чем за 2 секунды. Если ваш сайт не загружается должным образом в течение 2 секунд, Google отдаст предпочтение вашему конкуренту, а не вам. Следовательно, это может негативно повлиять на ваш поисковый рейтинг.

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

Если вы ищете дополнительные возможности для ускорения вашего веб-сайта WordPress, ознакомьтесь с этими 7 методами SEO на странице, которые удвоят ваш поисковый трафик.

2. Чтобы повысить коэффициент конверсии:

Если ваш сайт загружается медленнее, ваши посетители обязательно покинут его и будут искать другие варианты получше. Поскольку ваши пользователи часто ищут быструю и достоверную информацию на вашем веб-сайте, медленная загрузка страницы может быть убийцей настроения.

Точно так же, если вы запускаете партнерский сайт и продаете товары через свой веб-сайт, вы ожидаете, что ваши пользователи предпримут больше действий на нем. Однако более медленная веб-страница может отбить у ваших посетителей охоту предпринимать какие-либо действия.

Исследование, представленное на HubSpot, показывает, что задержка загрузки сайта даже на одну секунду снижает коэффициент конверсии на 7% . Вот как важно увеличить время загрузки вашего сайта и повысить коэффициент конверсии.

Техника отсрочки разбора JavaScript помогает повысить скорость вашего веб-сайта и улучшить его коэффициент конверсии.

3. Чтобы обеспечить лучший пользовательский опыт:

Ежу понятно! Медленные веб-сайты создают ужасный пользовательский опыт. Если загрузка вашего веб-сайта занимает больше времени, чем обычно, вы можете ожидать, что ваши посетители покинут ваш веб-сайт, и, таким образом, увеличится показатель отказов.

Вам следует подумать об отсрочке синтаксического анализа JavaScript, чтобы файлы JS выполнялись только после загрузки содержимого вашей веб-страницы. Этот метод поможет вам ускорить работу вашего веб-сайта WordPress и предложить вашим пользователям отличный опыт.

Пять различных способов отложить синтаксический анализ JavaScript в WordPress

Чтобы отложить парсинг JavaScript, вы можете выбрать любой из трех основных маршрутов, в том числе:

• Плагин
• Метод Варви
• Файл functions.php

Используя эти маршруты, мы создали пять различных методов для отложенного разбора JavaScript в WordPress.

Способ 1: использование бесплатного плагина асинхронного JavaScript

Асинхронный JavaScript — это бесплатный плагин WordPress, который помогает устранить код JavaScript, блокирующий рендеринг, в содержимом верхней части страницы.

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

• Async загружает JavaScript, продолжая анализировать файлы HTML, но затем приостанавливает анализ HTML для выполнения файлов JavaScript.
• Defer загружает JavaScript во время синтаксического анализа HTML-файлов и ожидает его выполнения после завершения синтаксического анализа HTML.

Вот каждый шаг, чтобы отложить синтаксический анализ JavaScript в WordPress с помощью плагина Async JavaScript:

Во-первых, перенаправьте на «Плагины» -> «Добавить новый» с панели инструментов WordPress.

Теперь найдите плагин Async JavaScript в строке поиска, а затем установите и активируйте его.

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

Теперь установите флажок « Включить асинхронный JavaScript » и выберите « Отложить как метод асинхронного JavaScript», как показано на изображении ниже:

Чтобы просмотреть дополнительные параметры, вы можете прокрутить страницу вниз. Здесь вы можете включить сценарии, к которым хотите применить теги async и defer, а также добавить список сценариев для исключения.

Вы также можете перечислить плагины и темы, которые вы можете исключить из любых изменений, которые вносит плагин Async JavaScript.

После внесения необходимых изменений прокрутите страницу вниз и нажмите кнопку « Сохранить настройки ».

Способ 2: использование плагина WP Rocket

WP Rocket считается одним из самых мощных плагинов кэширования WordPress, который позволяет быстро загружать ваш сайт за несколько кликов. Плагин предлагает кэширование страниц, предварительную загрузку кеша, статическое сжатие файлов и многие другие интересные функции.

Помимо этого, WP Rocket также помогает вам отложить синтаксический анализ JavaScript на вкладке «Оптимизация файлов» на панели инструментов WP Rocket.

После того, как вы купите, установите и активируете плагин WP Rocket, перейдите к параметру «Настройки» и щелкните вкладку « Оптимизация файлов » в меню, чтобы начать.

После этого прокрутите вниз до раздела «Файлы JavaScript», установите флажок « Загрузить отложенный JavaScript » и включите безопасный режим для jQuery .

Когда вы завершите весь процесс, прокрутите страницу вниз до конца и нажмите кнопку « Сохранить изменения ».

Способ 3: использование плагина W3 Total Cache

W3 Total Cache — еще один важный плагин WordPress, который улучшает SEO и удобство вашего сайта для пользователей. Он повышает производительность вашего веб-сайта и сокращает время загрузки за счет интеграции с сетью доставки контента (CDN).

W3 Total Cache бесплатен и очень эффективен. Вы можете использовать этот плагин, чтобы отложить синтаксический анализ JavaScript на вашем веб-сайте WordPress.

Вот каждый шаг, чтобы отложить синтаксический анализ JavaScript в WordPress с помощью плагина W3 Total Cache:

Во-первых, перенаправьте на «Плагины» -> «Добавить новый» с панели управления WordPress.

Теперь найдите плагин W3 Total Cache в строке поиска, а затем установите и активируйте его.

После завершения установки и активации плагина перейдите в « Производительность» -> «Общие настройки» на левой боковой панели WordPress, чтобы внести необходимые изменения.

После этого прокрутите вниз до раздела Minify и установите флажок « Включить ». Кроме того, выберите параметр « Вручную » в режиме «Минимизировать» и нажмите кнопку « Сохранить все настройки », чтобы продолжить.

Теперь перейдите на вкладку « Производительность» -> «Минимизировать » с левой боковой панели и прокрутите вниз до заголовка JS , где вы можете увидеть раздел «Операции в областях» с двумя HTML-тегами.

Выберите «Неблокирующий», используя опцию «отложить» в типе «Встроить» перед тегом </head> .

В том же разделе вы можете увидеть заголовок управления файлами JS, где вам нужно выбрать активную тему WordPress и нажать кнопку « Добавить скрипт », чтобы включить URI JavaScript, который вы хотите проанализировать.

Вы можете добавить столько URI, сколько хотите, нажав кнопку « Добавить скрипт ».

После внесения изменений нажмите кнопку « Сохранить настройки и очистить кэши» , чтобы продолжить.

После этого прокрутите вниз до раздела CSS . Затем вы можете нажать кнопку « Добавить таблицу стилей» под заголовком управления файлами CSS, чтобы вставить URI таблицы стилей CSS. Вы можете добавить более одного на основе предложений, предоставленных инструментами онлайн-мониторинга скорости.

После внесения изменений нажмите кнопку « Сохранить настройки и очистить кэши» , чтобы продолжить.

Способ 4: использование рекомендуемого метода Varvy

Другой метод, рекомендованный Патриком Секстоном из Varvy, использует сценарий для вызова внешнего файла JavaScript после завершения начальной загрузки страницы. Это означает, что браузер не будет загружать или выполнять какой-либо JavaScript, пока веб-страница не завершит загрузку.

Вы можете использовать этот метод, изменив фрагмент кода, который предоставляет Varvy, а затем добавив скрипт в файл темы непосредственно перед закрывающим тегом </body> .

Вот код, который нужно добавить в основную часть вашей темы, чтобы отложить синтаксический анализ JavaScript в WordPress:

 <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script>

Примечание. Убедитесь, что вы изменили defer.js на имя вашего внешнего файла JavaScript. После этого вы можете использовать хук wp_footer для внедрения кода через файл functions.php вашей дочерней темы.

При таком подходе вы можете обернуть код Varvy следующим образом:

 /** Defer parsing of JavaScript with code snippet from Varvy */ add_action( 'wp_footer', 'my_footer_scripts' ); function my_footer_scripts(){ ?> REPLACE_WITH_VARVY_SCRIPT <?php }

Вот каждый шаг этого метода, объясненный четкими изображениями:

Войдите в панель управления WordPress и перейдите в раздел « Внешний вид» -> «Редактор тем».

Теперь щелкните файл header.php в правой части экрана, а затем вставьте указанный выше код перед закрытием тега </body>.

После этого нажмите на кнопку « Обновить файл» .

Способ 5: Использование файла functions.php

Если у вас есть представление о разработке WordPress, вы должны быть знакомы с тем фактом, что не следует добавлять скрипты напрямую через HTML-разметку. Вместо этого вам нужно использовать встроенные функции WordPress для запроса ресурсов, а также при необходимости делать резервную копию вашего сайта.

Вы можете использовать атрибут defer для файлов Javascript, добавив фрагмент кода в файл functions.php .
Для этого вам нужно перейти в редактор тем с панели управления WordPress. После этого нажмите на functions.php и добавьте в него следующий код:

 function defer_parsing_of_js( $url ) { if ( is_user_logged_in() ) return $url; //don't break WP Admin if ( FALSE === strpos( $url, '.js' ) ) return $url; if ( strpos( $url, 'jquery.js' ) ) return $url; return str_replace( ' src', ' defer src', $url ); } add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

Этот фрагмент указывает WordPress добавить атрибут defer ко всем вашим файлам JavaScript, кроме JQuery.
Вы также можете легко добавить следующий код для использования атрибута async или defer в ваши файлы JavaScript через файл functions.php :

 add_filter('script_loader_tag', 'add_defer_tags_to_scripts'); function add_defer_tags_to_scripts($tag){ # List scripts to add attributes to $scripts_to_defer = array('script_a', 'script_b'); $scripts_to_async = array('script_c', 'script_d'); # add the defer tags to scripts_to_defer array foreach($scripts_to_defer as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' defer="defer" src', $tag); } # add the async tags to scripts_to_async array foreach($scripts_to_async as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' async="async" src', $tag); } return $tag; }

Что ж, не забывайте, что перед тем, как добавить атрибуты async и defer к тегам script, вам нужно поставить каждый скрипт в очередь, чтобы WordPress мог получить к нему доступ. Вот код для него:

 add_action('wp_enqueue_scripts', 'enqueue_custom_js'); function enqueue_custom_js() { wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js'); wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js'); wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js'); wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js'); }

Когда вы закончите добавлять код в файл functions.php, нажмите кнопку « Обновить файл» .

Вот каждый шаг этого метода, объясненный четкими изображениями:

Войдите в панель управления WordPress и перейдите в раздел « Внешний вид» -> «Редактор тем».

Теперь щелкните файл functions.php , расположенный в правой части экрана. Затем вы можете вставить код, упомянутый выше, и нажать кнопку « Обновить файл» , чтобы сохранить необходимые изменения.

Альтернативные плагины для отсрочки парсинга JavaScript в WordPress

Если вы ищете другие варианты, кроме плагинов Async JavaScript и WP Rocket, чтобы отложить синтаксический анализ JavaScript в WordPress, у вас их предостаточно. Некоторые из них включают:

1. Набор ускорителей скорости:

Это бесплатный плагин WordPress с простым в использовании интерфейсом, который поможет вам оптимизировать JavaScript и множество других методов оптимизации скорости.

Плюсы набора Speed ​​Booster:

• Очень простой и удобный в использовании и поставляется с интерактивным пользовательским интерфейсом
• Помогает с оптимизацией JavaScript, оптимизацией CSS, отложенной загрузкой и интеграцией сети доставки контента (CDN).
• Регулярно обновляется для исключительной производительности и устранения ошибок

Минусы Speed ​​Booster Pack:

• Существует риск, что включение этого плагина или любой из его функций может конфликтовать с другими плагинами на вашем веб-сайте.

2. Отложенные сценарии WP:

Этот плагин WordPress откладывает загрузку всех JavaScript-файлов, добавленных с помощью wp_enqueue_script(), используя LABJS. Результатом является правильная оптимизация времени загрузки.

Плюсы WP Deferred JavaScripts:

• Очень прост в использовании и является одним из самых популярных решений на рынке.
• Явно разработан для отсрочки синтаксического анализа JavaScript в WordPress, а не только как дополнительная функция.

Минусы WP Deferred JavaScripts:

• Нечастые обновления и, возможно, несовместимость с более новыми версиями WordPress.
• Может привести к поломке других плагинов на вашем сайте.

Часто задаваемые вопросы (часто задаваемые вопросы)

Вывод

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

Если вам сложно добавлять коды в файлы темы, мы настоятельно рекомендуем вам использовать плагины, упомянутые выше, чтобы отложить парсинг JavaScript. Плагины просты в использовании, и вы можете выполнить весь процесс за несколько кликов.

После завершения процесса обязательно запустите свой веб-сайт с помощью инструментов тестирования производительности сайта, таких как GTmetrix, чтобы убедиться, что ваш веб-сайт откладывает как можно больше сценариев.

У вас есть какие-либо проблемы и вопросы о том, как отложить синтаксический анализ JavaScript в WordPress? Стреляйте в них в разделе комментариев ниже!