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

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

Что такое блокировка рендеринга?

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

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

Проблема с блокировкой рендеринга в Google PageSpeed

Поскольку ресурсы, блокирующие рендеринг, задерживают время загрузки визуального контента, вам необходимо исправить эту проблему, чтобы повысить скорость загрузки страницы. Вы можете просмотреть все ресурсы, блокирующие рендеринг, в инструменте Google PageSpeed ​​Insights при тестировании страницы.

Предупреждение Google PageSpeed
Предупреждение о скорости загрузки страницы Google

Ресурсы по блокировке рендеринга

Существует несколько ресурсов, которые могут заблокировать отображение вашей веб-страницы:

  • JavaScript — скрипты являются основной причиной блокировки содержимого в верхней части страницы. В приведенном выше случае вы можете увидеть, что часть jQuery ядра WordPress по умолчанию задерживает 330 мс времени загрузки страницы. Хотя jQuery загружается в нижний колонтитул, он блокирует рендеринг веб-страницы, поэтому появляется в инструменте PageSpeed ​​как возможность исправить.
  • CSS — в зависимости от настроек вашего сайта, иногда CSS также может задерживать загрузку и приводить к блокировке рендеринга. Обычно это происходит, когда вы используете сильно раздутую тему или плагин.
  • Сторонние файлы — лучший пример сторонних файлов — коды отслеживания и рекламы Google Analytics. В общем, сторонние коды также являются JavaScript с той лишь разницей, что они не размещены на вашем сервере.

Исправление ресурсов блокировки рендеринга в WordPress

Вы должны обрабатывать JavaScript, блокирующий рендеринг, и CSS, блокирующий рендеринг, отдельно, чтобы решить эту проблему.

  • Для JavaScript вы можете использовать атрибут async в теге скрипта, чтобы загружать скрипт параллельно с контентом. Например, Google AdSense использует асинхронный рекламный код для всех рекламных объявлений. Таким образом, вы не увидите ошибок JavaScript, блокирующих рендеринг, хотя вы используете рекламу AdSense в верхней части страницы. Альтернативный вариант — использовать параметр defer с тегом скрипта. Это отложит загрузку скрипта до завершения HTML синтаксического анализа.
  • Для CSS вы можете найти блокирующую часть и встроить стили в заголовок, чтобы устранить проблему.

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

Бесплатные параметры плагина

Помните, что вы должны выбрать плагин на основе рекомендаций, которые вы видите в инструменте Google PageSpeed ​​Insights. В большинстве случаев вы увидите, что рендеринг блокирует JavaScript, а не CSS. В репозитории WordPress доступно множество бесплатных плагинов, которые могут помочь вам исправить JavaScript, блокирующий рендеринг. Один из лучших вариантов — использовать W3 Total Cache.

Устранение проблемы JavaScript с блокировкой рендеринга с помощью W3 Total Cache

После установки и активации плагина перейдите на вкладку «Производительность> Уменьшить». Прокрутите вниз до раздела JS и посмотрите в разделе «Уменьшить настройки движка». По умолчанию W3 Total Cache использует настройку «По умолчанию (блокировка)» для параметров до заголовка и после основного текста. Хотя это поможет вам избежать нарушения макета вашего сайта, вы увидите проблему блокировки ресурсов рендеринга в Google PageSpeed ​​с файлами JavaScript.

Неблокирующие параметры JS
Неблокирующие параметры JS

Что вам нужно сделать, так это щелкнуть раскрывающийся список и выбрать один из вариантов без блокировки. С W3 Total Script у вас есть три неблокирующих варианта:

  • Неблокирование с использованием JS
  • Неблокирование с использованием «асинхронного»
  • Неблокирование с использованием defer

Вам нужно протестировать макет сайта и найти, какой вариант вам подходит. В большинстве случаев параметр async должен работать нормально.

Отрисовка JS с блокировкой в ​​W3 Total Cache
Отрисовка JS с блокировкой в ​​W3 Total Cache

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

Исправить блокировку рендеринга JavaScript и CSS с помощью функции автоматической оптимизации

Если в инструменте Google PageSpeed ​​Insights вы видите файлы блокировки рендеринга как JavaScript, так и CSS, то W3 Total Cache не поможет. К сожалению, устранение блокировки рендеринга CSS — это дополнительная опция в кэше W3 Total. Вы должны приобрести годовую подписку на 99 долларов, чтобы использовать эту функцию.

Блокировка рендеринга CSS в W3 Total Cache
Блокировка рендеринга CSS в W3 Total Cache

Альтернативный вариант для вас — использовать другие бесплатные плагины, такие как Autoptimize, чтобы отложить JavaScript и встроенный CSS. Однако убедитесь, что вы используете только один плагин, Autoptimize или W3 Total Cache, а не оба на одном сайте.

После установки и активации плагина Autoptimize перейдите в меню «Настройки> Автоматическая оптимизация». Включите «Оптимизировать код JavaScript?» в разделе «Параметры JavaScript».

Оптимизировать JavaScript в Autoptimize
Оптимизация JavaScript в автоптимизации

Точно так же прокрутите вниз и включите «Оптимизировать код CSS?» в разделе «Параметры CSS».

Оптимизировать CSS в Autoptimize
Оптимизировать CSS в Autoptimize

Нажмите кнопку «Сохранить изменения и очистить кеш».

С большинством тем вы можете избавиться от проблем с JavaScript, просто выбрав параметры по умолчанию в Autoptimize. Однако плагин по умолчанию исключает из оптимизации такие файлы, как jQuery и dashicons. Следовательно, вы все еще можете видеть эти файлы как блокирующие рендеринг. Вы должны протестировать в Google PageSpeed, изменив настройки плагина Autoptimize и удалив исключения, если это необходимо, чтобы полностью избавиться от проблемы с блокировкой ресурсов рендеринга.

Платный плагин

На наш взгляд, лучший вариант — использовать премиальный плагин WP Rocket для исправления проблем с блокировкой рендеринга в WordPress. Причина проста: плагин может помочь вам исправить как JavaScript, так и CSS, блокирующий рендеринг, с помощью нескольких простых настроек. В отличие от W3 Total Cache или Autoptimize, вам не нужно тратить много времени на поиск правильных настроек для вас. Кроме того, вы можете получить WP Rocket за 49 долларов вместо того, чтобы тратить 99 долларов на W3 Total Cache или 10 долларов в месяц на criticalcss.com для интеграции с Autoptimize.

Исправить CSS, блокирующий рендеринг

Сначала купите плагин WP Rocket на их веб-сайте. После загрузки и активации плагина WP Rocket перейдите в раздел «Оптимизация файлов».

Включите «Оптимизировать доставку CSS» в разделе «Файлы CSS». Это поможет вам сгенерировать критически важный CSS и загрузить содержимое над сгибом. Это может помочь вам значительно увеличить показатель скорости страницы и устранить ресурсы, блокирующие рендеринг для CSS. Вы также можете сгенерировать критический CSS для каждой страницы отдельно, если вы работаете в редакторе Gutenberg или Classic.

Критический CSS в WP Rocket
Критический CSS в WP Rocket

Исправить JavaScript, блокирующий рендеринг

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

Отложить JavaScript в WP Rocket
Отложить JavaScript в WP Rocket

Благодаря множеству других доступных опций WP Rocket — это простой способ решить проблему с блокировкой ресурсов рендеринга в WordPress.

Нужно ли мне исправлять проблему в обязательном порядке?

Помните, что, как указывает Google PageSpeed, «Устранение ресурсов, блокирующих рендеринг», дает возможность сократить время загрузки. Однако это не влияет напрямую на оценку скорости страницы. Следовательно, не всегда необходимо устранять проблему. Это особенно верно для всех тем на основе jQuery. Кроме того, WordPress также предоставляет jQuery как часть основных файлов, и, следовательно, отсрочка его выполнения во многих случаях нарушит макет. Точно так же встраивание CSS вызовет больше проблем, хотя и решит проблему блокировки рендеринга. Здесь вы можете использовать WP Rocket и сгенерировать критический CSS с помощью одной настройки.

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

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

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

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