Как уменьшить общее время блокировки (задерживая JavaScript) в WordPress?

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

Что такое блокирующие ресурсы?

Как правило, CSS и JS могут вызывать проблему с ресурсами, блокирующими рендеринг, в инструменте Google PageSpeed ​​Insights. Однако JavaScript является основным виновником, особенно при загрузке от сторонних разработчиков. Многие темы и плагины WordPress используют JavaScript для реализации определенных функций. Вы можете использовать минимальные темы, такие как GeneratePress или Astra, но они могут не подходить для всех сценариев. Кроме того, этим темам нужны десятки плагинов, чтобы ваш сайт выглядел профессионально.

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

  • Пиксели Facebook, Google Analytics или отслеживание (Диспетчер тегов).
  • Google AdSense или любая другая медийная реклама (особенно программа, использующая ставки по заголовку).
  • Google шрифты

По иронии судьбы, большинство этих внешних скриптов принадлежит Google, который подталкивает владельцев веб-сайтов к повышению скорости.

Где найти общее время блокировки?

Общее время блокировки — один из параметров, используемых для расчета инструмента Google PageSpeed ​​Insights (PSI). Это часть калькулятора Lighthouse Scoring, который представляет собой шкалу PSI.

  • Перейдите в инструмент PSI и протестируйте любую страницу своего сайта.
  • Проверьте «Лабораторные данные», чтобы найти «Общее время блокировки».
Общее время блокировки в фунтах на квадратный дюйм
Общее время блокировки в фунтах на квадратный дюйм
  • Как уже упоминалось, в разделе «Возможности» обычно указываются причины неиспользования CSS / JS и ресурсов, блокирующих рендеринг.
  • Щелкните вкладку «TBT» напротив текста «Показать релевантные аудиты», чтобы отфильтровать соответствующие проблемы, которые вызывают общее время блокировки.
Проблемы TBT в Google PSI
Проблемы TBT в Google PSI

Проблемы, вызывающие общее время блокировки

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

  • Уменьшите влияние стороннего кода
  • Избегайте чрезмерного размера DOM
  • Минимизируйте работу с основным потоком
  • Уменьшить время выполнения JavaScript
  • Избегайте долгих задач основного потока

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

Подробная информация о стороннем коде
Подробная информация о стороннем коде

Изучив проблемы, вы легко поймете, что Google ненавидит JavaScript, а JS — виновник, убивающий ваш показатель скорости страницы.

Почему важно сократить общее время блокировки?

Вы можете задаться вопросом, почему вы должны смотреть на TBT, которое не является частью измерения Core Web Vital. Это совершенно вводящий в заблуждение факт, что для Core Web Vitals важны только FID, CLS и LCP. Фактически, TBT — самый важный параметр, поскольку он весит 30% в рейтинге PageSpeed. В разделе «Результаты лабораторных исследований» нажмите ссылку «Посмотреть калькулятор», чтобы перейти к Страница калькулятора подсчета очков Lighthouse. Там вы можете найти вес каждого параметра, который влияет на скорость вашей страницы.

Калькулятор очков Lighthouse
Калькулятор очков Lighthouse

Измените «Тип устройства» на мобильное или настольное и проверьте логику расчета. Вы также можете проверить разницу между весовыми коэффициентами параметров в предыдущей и текущей версиях. У TBT самый высокий вес — 30%, и он может резко упасть, если вы не работаете над его улучшением.

Как сократить общее время блокировки?

Простые рекомендации могут заключаться в использовании темы, которая не полагается на JavaScript и избегает использования тяжелых плагинов для построения страниц. Ниже приведен рейтинг PageSpeed ​​для веб-сайта, который использует тему GeneratePress без каких-либо тяжелых плагинов или плагинов для построения страниц. Оценка скорости мобильного / настольного ПК составляет 55/72 соответственно.

55 Mobile Score
55 Mobile Score
72 Оценка рабочего стола
72 Оценка рабочего стола

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

К сожалению, вы не можете просто отключить код AdSense или Analytics, который вам нужен на законных основаниях. Единственный вариант здесь — отложить JavaScript, чтобы общее время блокировки стало равным нулю. Задержка JavaScript остановит загрузку сценария, если пользователь не запустит этот сценарий. Например, реклама будет отображаться только тогда, когда пользователь достигнет этой области экрана. Для задержки JavaScript в WordPress доступно несколько плагинов.

  • Ракета WP — это самый популярный плагин кеширования премиум-класса для WordPress. Вы можете приобрести WP Rocket за 49 долларов за лицензию на один сайт, чтобы ускорить работу вашего сайта. После установки перейдите на вкладку «Оптимизация файлов» и включите опцию «Отложить JavaScript». Сохраните изменения и очистите кеш, прежде чем проверять счет в инструменте PSI.
Отложить выполнение JavaScript в WP Rocket
Отложить выполнение JavaScript в WP Rocket
  • Perfmatters — второй вариант тоже премиум-плагин, который дешевле WP Rocket. Perfmatters — хороший выбор, если у вас уже есть решение для кеширования для вашего сайта WordPress. Вы можете получить лицензию на один сайт этого плагина за 24,95 доллара США. Вы можете перейти на страницу настроек плагина и перейти на вкладку «Параметры». Введите имя сценария, который вы хотите отложить, на вкладке «Активы». Вы также можете установить тайм-аут для загрузки скриптов при отсутствии взаимодействия с пользователем. Этот плагин имеет диспетчер сценариев для выборочной загрузки сценария на требуемых страницах. Например, вы можете отключить скрипты WooCommerce во всех сообщениях, где вам не нужны скрипты плагина.
Скрипты задержки в Perfmatters
Скрипты задержки в Perfmatters
  • Сценарии полета — это бесплатный плагин, который отлично справляется с задержкой JavaScript на вашем сайте. Мы подробно объясним этот вариант, так как вы можете использовать этот плагин бесплатно.

Отложите JavaScript в WordPress с помощью летающих скриптов

  • Войдите в административную панель WordPress и перейдите в раздел «Плагины« Добавить новый »».
  • Выполните поиск по запросу «летающий сценарий» и найдите «Сценарии полета от WP Speed ​​MattersПлагин.
  • Установите и активируйте плагин.
Установить плагин Flying Scripts
Установить плагин Flying Scripts
  • Щелкните ссылку «Настройки» под установленным плагином, чтобы перейти на страницу настроек. Или перейдите в пункт меню «Настройки> Летающие сценарии».
Настройки плагина Flying Scripts
Настройки плагина Flying Scripts
  • Плагин имеет супер простые настройки. Все, что вам нужно, это ввести ключевые слова в разделе «Включить ключевые слова». Например, добавьте «adsbygoogle.js», чтобы отложить показ рекламы AdSense. Точно так же вы можете отложить jQuery или gtag, чтобы удалить проблему блокировки рендеринга в инструменте PSI.
Отложите скрипты Java с помощью летающих скриптов
Отложите скрипты Java с помощью летающих скриптов
  • Вы можете оставить «Тайм-аут» равным 5 с, что является значением по умолчанию. Тайм-аут — это задержка загрузки скрипта, даже если нет пользовательского триггера.
  • Если вы хотите отключить плагин на определенных страницах, вы можете ввести ключевые слова в поле «Отключить на страницах».
  • Нажмите кнопку «Сохранить изменения», чтобы отложить скрипты.

Вы можете проверить справочные вопросы в разделе «Часто задаваемые вопросы» и получить другие плагины оптимизации в разделе «Оптимизировать больше!» вкладки. В противном случае эти вкладки вообще не нужны.

Тест в инструменте PageSpeed ​​Insights

Независимо от того, какой плагин вы используете для задержки JavaScript, вы можете вернуться, чтобы проверить свою страницу в инструментах Google PageSpeed ​​Insights. В большинстве случаев вы увидите больше 90, а в нашем примере мы получаем 100/100 для мобильных / настольных компьютеров соответственно.

100 Mobile Score
100 Mobile Score
100 Оценка рабочего стола
100 Оценка рабочего стола

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

Нулевое общее время блокировки
Нулевое общее время блокировки

Вам нужно подождать месяц (ровно 28 дней), чтобы увидеть, как оценка Core Web Vital изменится с «не прошел» на «прошел».

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

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

Однако задержка полностью остановит загрузку скрипта на странице при первоначальном рендеринге. Только взаимодействие с пользователем, такое как прокрутка или касание на мобильном телефоне, будет запускать скрипты динамически. Следовательно, это своего рода обман PageSpeed ​​Insights и другие инструменты измерения скорости, как если бы скрипты не существовали на странице.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *