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

Следующая статья поможет вам: Как отложить синтаксический анализ JavaScript в WordPress?

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

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

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

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

Всякий раз, когда вы используете какой-либо из инструментов тестирования скорости страницы для проверки скорости вашего веб-сайта WordPress, вы могли столкнуться с предложением «отложить синтаксический анализ JavaScript» на своем сайте.
Отложенный синтаксический анализ JavaScript позволяет браузеру сначала отображать веб-контент, а не ждать завершения загрузки сценариев JS. Это действительно важное предложение, которое вы не должны игнорировать, поскольку оно может повлиять на оценку Core Web Vitals (CWV) вашего сайта WordPress, а также может снизить рейтинг вашего сайта в SEO.

Вот почему вам следует отложить синтаксический анализ JavaScript на вашем веб-сайте WordPress. Когда вы откладываете загрузку JavaScript, это влияет на следующие показатели Core Web Vitals (CWV).

• Самая большая содержательная краска (LCP)

Самая большая отрисовка содержимого (LCP) — это одна из метрик CWV, которая определяет, сколько времени требуется браузеру для отображения самого большого элемента на экране. Если JS отложен, это может помочь браузеру сосредоточиться на рендеринге других элементов на экране.

Задержка первого ввода (FID) — это одна из метрик CWV, которая определяет, сколько времени требуется браузеру, чтобы отреагировать на первый клик пользователя на веб-странице. Если браузер занят выполнением файлов JavaScript, то, безусловно, браузеру потребуется немного больше времени, чтобы отреагировать на действия пользователя. Откладывание JavaScript помогает улучшить показатель FID.

В конце концов, когда все эти показатели, LCP, FID и CLS улучшаются, это также улучшает общую оценку Core Web Vitals (CWV), что приводит к следующему. Помимо этого, он также улучшает другие показатели, такие как TTI.

• Более высокие SEO-рейтинги
• Более быстрое время загрузки страницы
• Уменьшить показатель отказов
• Увеличивает коэффициент конверсии
• Улучшенный пользовательский опыт

Если вы хотите узнать больше о метриках CWV, вы можете прочитать нашу статью о Core Web Vitals.

Какую осторожность следует соблюдать?

Убедитесь, что вы не делаете следующее, откладывая синтаксический анализ JavaScript.

• Не откладывайте JS-файлы, в которых есть неотложенные зависимые сценарии, которые зависят от их правильной работы. Эмпирическое правило заключается в том, что если сценарий B зависит от A, то вы не можете отложить только сценарий A. Но если вы это сделаете, страница не будет работать должным образом, а также может вызвать некоторые ошибки.
• Не откладывайте файлы JQuery
• Не откладывайте файлы, отвечающие за рендеринг содержимого верхней части страницы, в частности — FCP (First Contentful Paint).

Когда нельзя откладывать JS?

Если атрибут src отсутствует в теге скрипта, атрибут defer не должен использоваться (т.е. для встроенных скриптов), так как он не будет иметь никакого эффекта.

Атрибут defer не влияет на скрипты модулей — они откладываются по умолчанию. Скрипты модуля — это не что иное, как программа javascript, которая разделена на более мелкие модули и может быть импортирована по мере необходимости.

Отложить JS против задержки JS

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

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

Задержка JavaScript — это метод, при котором мы изначально фокусируемся только на рендеринге HTML-контента, а не на файлах скриптов. Чтобы добиться этого на практике, в теге «script» вместо атрибута «src» мы даем ему какое-то другое имя, скажем, «delay» (вы можете указать любое имя для этого атрибута, это не имеет значения).

Поскольку в теге скрипта нет атрибута «src», браузер полностью проигнорирует эти теги скрипта. Теперь, как только пользователь начинает взаимодействовать с веб-страницей, мы заменяем «задержку» на имя «src», чтобы браузер мог загрузить и выполнить все эти сценарии.

const autoLoadDuration = 5; //In Seconds
const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];

const autoLoadTimeout = setTimeout(runScripts, autoLoadDuration * 1000);

eventList.forEach(function(event) {
window.addEventListener(event, triggerScripts, { passive: true })
});

function triggerScripts() {
runScripts();
clearTimeout(autoLoadTimeout);
eventList.forEach(function(event) {
window.removeEventListener(event, triggerScripts, { passive: true });
});
}

function runScripts() {
document.querySelectorAll("script[delay]").forEach(function(scriptTag) {
scriptTag.setAttribute("src", scriptTag.getAttribute("delay"));
});
}

Приведенный выше код в основном берет все теги сценария с атрибутом «задержка», а затем заменяет их на «src». Эта функция запускается с задержкой в ​​5 секунд после загрузки страницы или при взаимодействии пользователя со страницей, например при перемещении мыши, прокрутке или нажатии клавиатуры. Вы можете изменить время задержки в зависимости от ваших требований.

Что лучше и эффективнее?

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

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

Атрибуты Async и Defer позволяют браузеру загружать файлы JavaScript одновременно, в то время как браузер все еще анализирует содержимое HTML. Но между ними есть небольшая разница. Давайте теперь посмотрим, как они работают и чем они отличаются.

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

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

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

Как отложить разбор Javascript в WordPress?

Функции.php

Чтобы отложить синтаксический анализ JavaScript в WordPress, вы можете добавить несколько строк кода в файл «functions.php» вашего веб-сайта из панели администратора WordPress. Этот подход для тех, кто не хочет использовать внешние плагины и имеет некоторое представление о платформе 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

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

Варви метод

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

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;

Хотите мгновенно ускорить свой сайт?

Получите 90+ баллов PageSpeed ​​автоматически с помощью 10Web Booster ⚡
На любом хостинге!

Получите 10Web Booster, это бесплатно
Кредитная карта не требуется