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

Вы хотите устранить блокировку рендеринга JavaScript и CSS в WordPress? Если вы протестируете свой веб-сайт с помощью аналитики Google PageSpeed, вы, скорее всего, увидите предложение об устранении блокировок рендеринга и CSS. В этой статье мы покажем вам, как легко исправить блокировку рендеринга JavaScript и CSS в WordPress, чтобы улучшить ваш показатель Google PageSpeed.

^

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

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

Браузер пользователя должен будет загрузить эти скрипты и CSS перед загрузкой остальной части HTML на странице. Это означает, что пользователям на более медленном соединении придется ждать еще несколько миллисекунд, чтобы увидеть страницу.

Эти сценарии и таблицы стилей называются JavaScript и CSS, блокирующими рендеринг.

Владельцам веб-сайтов, которые пытаются набрать 100 баллов Google PageSpeed, нужно будет решить эту проблему, чтобы получить этот идеальный балл.

Что такое Google PageSpeed Score?

Google PageSpeed ​​Insights – это онлайн-инструмент, созданный Google, чтобы помочь владельцам сайтов оптимизировать и протестировать свои сайты. Этот инструмент проверяет ваш веб-сайт на соответствие рекомендациям Google по скорости и предлагает рекомендации по улучшению времени загрузки страницы вашего сайта.

Он показывает вам оценку, основанную на количестве правил, которые проходит ваш сайт. Большинство сайтов получают где-то между 50-70. Тем не менее, некоторые владельцы веб-сайтов считают, что им необходимо набрать 100 баллов (максимальный балл за страницу).

Вам действительно нужен идеальный «100» балл Google PageSpeed?

Цель Google PageSpeed ​​Insights – предоставить вам рекомендации по повышению скорости и производительности вашего сайта. Вы не обязаны строго соблюдать эти правила.

Помните, что скорость – это только одна из многих SEO-метрик, которые помогают Google определить, как оценить ваш сайт. Скорость так важна, потому что она улучшает взаимодействие с пользователем на вашем сайте.

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

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

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

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

Давайте посмотрим, что вы можете сделать, чтобы исправить блокировку рендеринга JavaScript и CSS в WordPress.

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

1. Исправьте скрипты блокировки рендеринга и CSS с помощью Autoptimize.

Этот метод проще и рекомендуется для большинства пользователей.

Первое, что вам нужно сделать, это установить и активировать плагин Autoptimize. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress.

После активации вам необходимо зайти на страницу «Настройки» Autoptimize, чтобы настроить параметры плагина.

^

Вы можете начать, установив флажок рядом с опциями JavaScript и CSS, а затем нажмите кнопку «Сохранить изменения».

Теперь вы можете протестировать свой сайт с помощью инструмента PageSpeed. Если все еще существуют скрипты блокировки рендеринга, вам нужно вернуться на страницу настроек плагина и нажать кнопку «Показать дополнительные настройки» вверху.

^

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

Далее, прокрутите вниз до опции CSS и позвольте плагину объединять встроенный CSS.

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

Как только вы закончите, попробуйте еще раз и проверьте свой веб-сайт с помощью инструмента PageSpeed.

Убедитесь, что вы тщательно протестировали свой веб-сайт, чтобы убедиться, что ничего не сломано, оптимизируя ваши JavaScripts или CSS.

Как это работает?

Autoptimize объединяет все поставленные в очередь JavaScript и CSS. После этого он создает минимизированные файлы CSS и JavaScripts и передает кэшированные копии на ваш сайт как асинхронные или отложенные.

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

2. Исправить блокировку рендеринга JavaScript с помощью W3 Total Cache

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

Сначала вам нужно установить и активировать плагин W3 Total Cache. Если вам нужна помощь, ознакомьтесь с нашим руководством по установке и настройке W3 Total Cache для начинающих.

Далее вам нужно посетить страницу «Производительность» и «Общие настройки» и прокрутить вниз до раздела «Минимизировать».

^

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

Нажмите на кнопку сохранить все настройки, чтобы сохранить настройки.

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

Вы можете получить URL-адреса всех скриптов и таблиц стилей, блокирующих рендеринг, с помощью инструмента Google PageSpeed Insights.

В предложениях, где говорится: «Устранить блокирование рендеринга JavaScript и CSS в содержании выше всех размеров», нажмите «Показать, как исправить». Он покажет вам список скриптов и таблиц стилей.

^

Наведите курсор на скрипт, и он покажет вам полный URL. Вы можете выбрать этот URL и затем использовать клавиши CTRL + C (Command + C на Mac) на клавиатуре, чтобы скопировать URL.

Теперь зайдите в вашу админ-панель WordPress и перейдите на страницу Performance »Minify.

Сначала вам нужно добавить файлы JavaScript, которые вы хотите минимизировать. Прокрутите вниз до раздела JS, а затем в разделе «Операции в областях» установите для типа встраивания «Неблокирующая асинхронность» для раздела <head>.

^

Затем вам нужно нажать на кнопку «Добавить скрипт», а затем начать добавлять URL-адреса скриптов, которые вы скопировали из инструмента Google PageSpeed.

Как только вы закончите, прокрутите вниз до раздела CSS и затем нажмите кнопку «Добавить таблицу стилей». Теперь начните добавлять URL-адреса таблиц стилей, которые вы скопировали из инструмента Google PageSpeed.

^

Теперь нажмите кнопку «Сохранить настройки и очистить кэш», чтобы сохранить настройки.

Посетите инструмент Google PageSpeed и снова протестируйте свой веб-сайт.

Убедитесь, что вы также тщательно протестировали свой веб-сайт, чтобы убедиться, что все работает нормально.

^

Исправление проблем

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

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

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

Однако, может быть довольно сложно выяснить, какой код CSS вам нужно будет отображать над контентом сгиба.

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