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

Опубликовано: 2021-07-22

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

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

Итак, вы бродите так же? Что ж, если вы проверите свой сайт лично, вы можете получить сообщение «Отложить синтаксический анализ JavaScript в WordPress». Это кажется сложным и иногда непонятным, потому что вы не разбираетесь в технологиях.

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

Теперь вопрос в том, что означает отложенный анализ JavaScript в WordPress?

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

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

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

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

Итак, без лишних слов приступим!

Что означает отложенный анализ JavaScript в WordPress?

Вы знаете, как браузеры отображают веб-страницу? Если нет, то сначала нужно это понять.

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

Однако браузер загружает ресурсы последовательно. Но рендеринг страницы снова возобновляет все процессы и отрицательно влияет на время загрузки. Даже это иногда тормозит процесс и показывает сообщение: Страница не может быть загружена или показывает ошибку сервера.

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

Но с помощью отложенного анализа JavaScript в WordPress помогает уведомить браузер о загрузке страницы или основного содержимого вашего сайта и предлагает быструю загрузку. При этом пользователи могут найти сайт.

Зачем вам нужно откладывать синтаксический анализ JavaScript в WordPress?

Если ваш сайт загружается слишком долго, следует увеличить его производительность всеми правдами и неправдами. Если вы не знаете о производительности веб-сайта, запустите тест на месте, используя лучшие инструменты, такие как GT Metrix, Google Pagespeed Insights или WPEngine.

Это инструменты тестирования скорости, которые часто предлагают и предлагают вам отложить синтаксический анализ JavaScript при анализе сайта. Например, давайте попробуем с GT Metrix.

В GTMetrix вы найдете оценку вашего сайта на каждой странице и конкретные сценарии, которые необходимо улучшить как можно скорее. Чтобы использовать этот инструмент, нужно ввести URL-адрес веб-сайта и подождать несколько минут, чтобы он мог получить все данные.

Как только это будет завершено, перейдите на вкладку «Скорость страницы», улучшите скорость загрузки и расширите раздел «Отложить синтаксический анализ JavaScript».

Здесь вы найдете список скриптов загрузки, которые загружаются в процессе рендеринга. Так что читайте все внимательно.

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

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

Если вы хотите начать с Async, вам нужно добавить следующий тег script.

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

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

Главное отличие, которое вы собираетесь проверить, когда оба ресурса загружены. Для лучшего использования обоих следует проверить веб-приложение.

Если ваше веб-приложение компактное, следует выбрать отсрочку, а если у вас мало скриптов, лучше использовать Async. Ну, вы не найдете никакой разницы в обоих, но правда в том, что defer предназначен для больших файлов, а Async — для маленьких.

Чтобы лучше понять разницу между Async и defer, мы поделились примером. Читать дальше.

Предположим, у вас есть два java-скрипта JS1 и JS2. И есть условие, что JS2 стоит в коде после JS1, а значит JS2 зависит от JS1, но больше, чем JS2.

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

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

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

Причины, по которым вам нужно отложить парсинг JavaScript

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

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

  • Повысить позиции в поиске

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

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

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

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

  • Повысить коэффициент конверсии

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

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

Ваша задача — предоставить лучшее своим пользователям. Исследование Hubspot показывает, что время загрузки веб-сайта часто снижает коэффициент конверсии на 7%. С помощью техники отложенного анализа JavaScript в WordPress можно ускорить работу вашего сайта, что еще больше повысит коэффициент конверсии.

  • Раздача лучшего пользовательского опыта

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

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

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

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

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

Итак, давайте познакомимся с методами.

Чтобы отложить синтаксический анализ JavaScript, вы можете выбрать три важных маршрута: плагин, метод varvy и файл functions.php. С этими маршрутами вы можете применить пять данных методов.

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

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

С помощью этого плагина вы можете наслаждаться полным контролем над java-скриптами, а асинхронность или отсрочка могут легко способствовать увеличению скорости сайта и повышению его производительности на страницах поиска. Тем не менее, есть несколько советов, которым вам нужно следовать при выборе Async and defer.

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

Теперь давайте перейдем к пошаговому руководству по отложенному анализу JavaScript в WordPress с помощью плагина Async.

  1. Откройте панель управления WordPress и перейдите на вкладку плагинов.
  2. На вкладке плагина нажмите кнопку «Добавить новую» и найдите плагин Async JavaScript.
  3. Когда вы найдете плагин, нажмите кнопку «Установить» и активируйте его.
  4. Итак, когда установка будет завершена, зайдите в настройки и внесите необходимые изменения.
  5. Установите флажок «Включить асинхронный JavaScript» и выберите «Отложить как асинхронный JavaScript».
  6. Для расширенных функций отметьте галочкой и выберите скрипт, который вы хотите применить — теги Async и defer.
  7. Здесь вы можете выбрать сценарии, которые хотите включить или исключить. Кроме того, вы также можете выбрать плагины и темы, которые вы хотите исключить из любых изменений, сделанных плагином Async JavaScript.
  8. После внесения изменений сохраните изменения

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

Если вы раньше не слышали о плагине WP Rocket, то узнайте об этом сейчас. WP Rocket — один из самых модных плагинов, который может ускорить загрузку вашего сайта за считанные секунды.

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

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

Вот как вы можете установить и использовать плагин.

  1. Откройте панель управления WordPress и перенаправьте на вкладку плагинов.
  2. Теперь нажмите кнопку «Добавить новую» и найдите плагин WP Rocket.
  3. Нажмите «Установить» и активируйте плагин.
  4. Затем перейдите в настройки и откройте оптимизацию файлов из меню, чтобы начать работу.
  5. Теперь прокрутите файлы JavaScript и отметьте отложенную загрузку JavaScript и включите безопасный режим для Query.
  6. Когда весь процесс будет завершен, перейдите в конец страницы и нажмите кнопку «Сохранить изменения».

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

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

Общий кеш W3 очень эффективен и безопасен в использовании. Кроме того, вы можете использовать этот плагин для отсрочки парсинга JavaScript в WordPress. Вот как вы можете использовать этот плагин.

  • Сначала зайдите на панель инструментов WordPress и перейдите на страницу плагинов.
  • Затем добавьте новую кнопку и найдите плагин W3 total cache plugin.
  • Как только плагин будет найден, нажмите кнопку «Установить и активировать».
  • Теперь плагин установлен. Перейдите к производительности и общим настройкам из WordPress.
  • Затем прокрутите панель управления вниз, перейдите к разделу минимизации и отметьте параметр включения.
  • Кроме того, вы можете проверить ручную опцию из режима минимизации и нажать на опцию сохранения, чтобы продолжить.

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

Минимизировать параметры настроек
Выберите неблокирующий, используя опцию отсрочки, и вставьте тип кода перед тег.

Настройки JS Minify

  • В настройках вы можете увидеть управление файлами JS, где вам нужно выбрать тему WordPress.
  • Затем нажмите «Добавить скрипт», чтобы включить URL-адрес JavaScript, который вы хотите проанализировать.
  • Вы можете добавить столько URL-адресов, сколько хотите, нажав кнопку «Добавить скрипт».
  • Когда изменения будут завершены, нажмите кнопку «Сохранить настройки» и кнопку «Чистые кэши», чтобы продолжить.
  • После этого прокрутите вниз раздел CSS.
  • Теперь нажмите кнопку «Добавить таблицу стилей».
  • Затем в управлении файлами CSS вставьте URL-адреса таблицы стилей.
  • Вы можете добавить более одного на основе предложений, предоставленных вам инструментами мониторинга.
  • Теперь вы завершили изменения, поэтому сохраните настройки и кнопку чистого кеша.

Метод 4: использование рекомендованного метода Вэя

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

Это означает, что браузеры не загружают и не выполняют JavaScript, пока веб-страница не загружена. Однако этот метод предлагает Патрик Секстон.

Чтобы использовать этот метод, вы можете настроить фрагмент кода, который предоставляет varvy, а затем добавить его в редактор тем в разделе body.

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

<Тип скрипта= «текст/javascript»>
Функция загрузкиSAtOnload() {
var element = document.createElement («Сценарий»);
element.src = «отложить .js»; document.body.appendChild (элемент);
}
Если
(window.addEventListener) window.addEventListener («загрузить»,
загрузитьJSAtOnload, ложь);
иначе, если
(окно.attachEvent)
Window.attachEvent(”onload”, скачанный JSAtonlaod;
</скрипт>

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

Вот код, который вы должны использовать.

/**
Отложите синтаксический анализ JavaScript с помощью фрагмента кода от Varvy
*/
Add_action('wp_footer', 'my_footer_scripts');
Функция
My_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}

Теперь мы переходим к нашему пошаговому руководству для ясного смысла.

  1. Перейдите на панель инструментов WordPress и перейдите к внешнему виду, а затем к редактору тем.
  2. Перейдите по файлу header.php, а затем вставьте указанный выше код после и перед разделом body.
  3. Затем нажмите на опцию обновления файла.

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

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

Вы должны использовать атрибут defer для файлов JavaScript, добавив фрагмент кода в файл functions.php.

Чтобы завершить процесс, откройте редактор темы и перейдите в файл functions.php, чтобы добавить указанный код.

Функция
Defer_parsing_of_js ( $url ) {
Если (
User_ is_ logged_in() )
Вернуть $url; // не ломайте WP Admin
Если ( ЛОЖЬ ===
Строп($url, '.js'))
Вернуть $url;
Если (стропы ($url, 'jquery.js')) вернуть $url;
Возвратите str_replace(' src', 'отложить src', $url);
}

Добавить_фильтр (
'script_loader_tag',
'defer_parsing_of_js', 10
);

Этот код помогает WordPress добавлять атрибут defer в файлы JavaScript, кроме JQuery.

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

Add_filter('script _loader_tag',
'add_defer_tags_to_scripts');
 
Функция
add_defer_tags_to_scripts ($ tyag) {
#список скриптов для добавления с атрибутами $scripts_to_defer = array('script_a', script_b');
$scripts_to_async = массив ('script _c', 'script_d');
#добавляем теги отсрочки в массив scripts_to_defer
Foreach ($scripts_to_defer как $current_script) {
Если (true == strops ($tag,
$текущий_скрипт))
Возврат
Str_replace ('src,'defer="defer" src','$tag);
}
#добавляем асинхронные теги в массив scripts_to_async
Foreach ($scripts_to_async как $current_script) {
Если (true == strops ($tag,
$текущий_скрипт))
Возвращение
Str_replace ('src,'defer=”
Async="async" src', $tag);

}
Вернуть $тег;
)

Не забывайте, что вы должны ставить в очередь каждый код, поэтому нужно добавить следующий код.

Add_action('wp_enqueue_scripts',
'enqueue_custom_js');
Функция
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_ds',
Get_stylesheet_directory_uri(), '/script_d.js');
}

Когда вы обновите все коды в файле functions.php, обновите файл и посмотрите изменения. Вот пошаговое руководство по обновлению файла.

  1. Откройте панель инструментов WordPress и перейдите к внешнему виду, а затем к редактору тем.
  2. Перейдите к файлу functions.php, а затем вставьте указанные выше коды.
  3. Затем нажмите на опцию обновления файла.

Альтернативные плагины для отложенного разбора JavaScript в WordPress

Помимо Async и defer, у вас есть еще два плагина с опцией Defer Parsing of JavaScript в WordPress.

  1. Ускоритель скорости

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

    Плюсы:

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

    Минусы:

    • Это может создать проблемы при использовании других плагинов.

  2. Асинхронный JavaScript

    3. Этот плагин позволяет легко загружать все java-скрипты, которые добавляются как wp_enqueue_script() с помощью LABJS. Сообщите нам его плюсы и минусы.

    Плюсы:

    • Очень простой в использовании плагин
    • Он наиболее популярен на рынке плагинов.
    • Предназначен для отложенного анализа JavaScript в WordPress.

    Минусы:

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

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

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

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

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

    Как убрать блокировку рендеринга с сайта WordPress?

    Один из успешных подходов к удалению блокировки рендеринга с веб-сайта — отложить синтаксический анализ перед другими элементами веб-сайта. Еще один способ свести к минимуму рендеринг — объединить JS и CSS вместе.

    Какие инструменты я могу использовать для выявления некритических JS на моем сайте?

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

    • Google PageSpeed ​​Insights: это поможет вам определить основные недостатки скорости и производительности вашего сайта. Кроме того, этот инструмент также предлагает некоторые предложения по улучшению производительности вашего сайта и времени загрузки.
    • При этом ваш сайт будет получать баллы разных цветов, таких как красный, оранжевый и зеленый. Красный цвет покажет низкую производительность, оранжевый — средний, а зеленый — хороший.
    • Тест скорости веб-сайта Pingdom: это еще один популярный инструмент для отслеживания и мониторинга производительности. С помощью этого инструмента вы можете проверить производительность своего веб-сайта в семи разных местах.
    • Кроме того, этот инструмент также предлагает предложения по повышению скорости страницы, чтобы вы могли наслаждаться более высокой скоростью и производительностью веб-сайта.

    Можно ли отложить синтаксический анализ JavaScript в WordPress с помощью плагина Auto Optimize?

    С помощью инструмента автоматической оптимизации вы можете легко отложить синтаксический анализ JavaScript. Для обеспечения процесса необходимо установить и активировать плагин как обычно. После установки и активации плагина перейдите в настройки и выберите вариант JS, CSS и HTML.

    Теперь оптимизируйте параметр кода JavaScript, и вы разблокируете параметры. Теперь отметьте галочкой Агрегировать JS-файлы и оставьте остальные.

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

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

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