Вы хотите устранить блокирующие рендеринг JavaScript и CSS в WordPress??
Если вы проверите свой сайт в Google PageSpeed insights, то, скорее всего, увидите предложение устранить блокирующие рендеринг скрипты и CSS. Однако здесь не приводится никаких подробностей о том, как это сделать на вашем сайте WordPress.
В этой статье мы покажем вам, как легко исправить блокирующие рендеринг JavaScript и CSS в WordPress, чтобы улучшить показатели Google PageSpeed.
Что такое блокировка рендеринга JavaScript и CSS?
Блокирующие рендеринг 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 Score?
Цель Google PageSpeed insights — предоставить вам рекомендации по улучшению скорости и производительности вашего сайта. Вы не обязаны строго следовать этим правилам.
Помните, что скорость — это лишь одна из многих SEO-метрик сайта, которые помогают Google определить, как ранжировать ваш сайт. Причина, по которой скорость так важна, заключается в том, что она улучшает пользовательский опыт на вашем сайте.
Для лучшего пользовательского опыта требуется гораздо больше, чем просто скорость. Вам также необходимо предлагать полезную информацию, лучший пользовательский интерфейс и привлекательный контент с текстом, изображениями и видео.
Вашей целью должно быть создание быстрого веб-сайта, который предлагает отличный пользовательский опыт.
Во время последнего редизайна WPBeginner мы сосредоточились на скорости, а также на улучшении пользовательского опыта.
Мы рекомендуем использовать правила Google Pagespeed в качестве рекомендаций, и если вы можете легко реализовать их, не испортив пользовательский опыт, то это замечательно. В противном случае, вы должны стремиться сделать как можно больше, а затем не беспокоиться об остальном.
Сказав это, давайте посмотрим, что вы можете сделать, чтобы исправить блокирующие рендеринг JavaScript и CSS в WordPress.
Мы рассмотрим два метода, которые помогут исправить блокирующие рендеринг JavaScript и CSS в WordPress. Вы можете выбрать тот, который лучше всего подходит для вашего сайта.
1. Исправление блокирующих рендеринг скриптов и CSS с помощью WP Rocket
Для этого метода мы будем использовать плагин WP Rocket. Это лучший плагин кэширования WordPress на рынке, который позволяет быстро улучшить производительность вашего сайта без каких-либо технических навыков или сложной настройки.
Сначала вам нужно установить и активировать плагин WP Rocket. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.
WP Rocket работает из коробки, и он включит кэширование с оптимальными настройками для вашего сайта. Вы можете узнать больше об этом в нашем полном руководстве о том, как правильно установить и настроить WP Rocket в WordPress.
По умолчанию он не включает опции оптимизации JavaScript и CSS. Эти оптимизации могут потенциально повлиять на внешний вид вашего сайта или некоторые функции, поэтому плагин позволяет включить эти настройки опционально.
Чтобы сделать это, вам нужно посетить Настройки » WP Rocket а затем переключитесь на вкладку «Оптимизация файлов». Отсюда прокрутите страницу до раздела CSS Files и установите флажки напротив опций Minify CSS, Combine CSS Files и Optimize CSS Delivery.
Примечание: WP Rocket попытается минифицировать все ваши CSS файлы, объединить их и загрузить только CSS, необходимые для видимой части вашего сайта. Это может повлиять на внешний вид вашего сайта, поэтому вам необходимо тщательно протестировать ваш сайт на нескольких устройствах и размерах экрана.
Далее, вам нужно прокрутить страницу до раздела JavaScript Files. Отсюда вы можете проверить все опции для максимального улучшения производительности.
Вы можете минифицировать и объединять файлы JavaScript, как вы это делали для CSS.
Вы также можете запретить WordPress загружать файл jQuery Migrate. Это скрипт, который WordPress загружает для обеспечения совместимости плагинов и тем, использующих старые версии jQuery.
Большинству сайтов этот файл не нужен, но вы все равно захотите проверить свой сайт, чтобы убедиться, что его удаление не повлияет на вашу тему или плагины.
Далее, прокрутите вниз немного дальше и установите флажки напротив опций ‘Load JavaScript Defered’ и ‘Safe Mode for jQuery’.
Эти опции задерживают загрузку несущественных JavaScripts, а безопасный режим jQuery позволяет загружать jQuery для тем, которые могут использовать его в строке. Вы можете оставить эту опцию не отмеченной, если вы уверены, что ваша тема нигде не использует встроенный jQuery.
Не забудьте нажать на кнопку Сохранить изменения, чтобы сохранить ваши настройки.
После этого вы также можете очистить кэш в WP Rocket, прежде чем снова протестировать ваш сайт с помощью Google Page Speed Insights.
На нашем тестовом сайте мы смогли достичь 100% результата на рабочем столе, а проблема блокировки рендеринга была решена как на мобильном, так и на настольном компьютере.
2. Исправьте блокирующие рендеринг скрипты и CSS с помощью автооптимизации
Для этого метода мы будем использовать отдельный плагин, созданный специально для улучшения доставки CSS и JS файлов вашего сайта. Хотя этот плагин выполняет свою работу, у него нет других мощных функций, которые есть у WP Rocket.
Первое, что вам нужно сделать, это установить и активировать плагин Autoptimize. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.
После активации вам необходимо посетить страницу Настройки » Автооптимизация страница для настройки параметров плагина.
Сначала вам нужно установить флажок рядом с опцией ‘Optimize JavaScript Code’ в блоке JavaScript Options. Убедитесь, что опция ‘Aggregate JS-files’ снята.
Далее прокрутите вниз до поля «Параметры CSS» и отметьте опцию «Оптимизировать код CSS». Убедитесь, что опция ‘Aggregate CSS-files’ снята.
Теперь вы можете нажать на кнопку ‘Save Changes and Empty Cache’, чтобы сохранить настройки.
Далее проверьте свой сайт с помощью инструмента Page Speed Insights. На нашем демонстрационном сайте мы смогли устранить проблему блокировки рендеринга с помощью следующих основных настроек.
Если все еще есть блокирующие рендеринг скрипты, то вам нужно вернуться на страницу настроек плагина и просмотреть опции в разделах JavaScript и CSS.
Например, вы можете разрешить плагину включать инлайн JS и удалять скрипты, которые исключены по умолчанию, например, seal.js или jquery.js.
Нажмите на кнопку ‘Save changes and Empty Cache’, чтобы сохранить изменения и очистить кэш плагина.
Как только вы закончите, снова проверьте свой сайт с помощью инструмента Page Speed.
Как это работает?
Autoptimize агрегирует все JavaScript и CSS в очереди. После этого он создает минифицированные файлы CSS и JavaScripts и передает кэшированные копии на ваш сайт в асинхронном или отложенном режиме.
Это позволяет исправить проблему блокирующих рендеринг скриптов и стилей. Однако имейте в виду, что это также может повлиять на производительность или внешний вид вашего сайта.
Устранение неполадок
В зависимости от того, как плагины и ваша тема WordPress используют JavaScript и CSS, может быть довольно сложно полностью исправить все блокирующие рендеринг JavaScript и CSS проблемы.
Хотя вышеперечисленные инструменты могут помочь, вашим плагинам могут потребоваться определенные скрипты с другим уровнем приоритета для правильной работы. В этом случае вышеуказанные решения могут нарушить функциональность таких плагинов, или они могут повести себя неожиданным образом.
Google все еще может показать вам некоторые проблемы, например, оптимизацию CSS для контента выше сгиба. WP Rocket позволяет исправить это, вручную добавив критический CSS, необходимый для отображения области над сгибом в вашей теме.
Однако может быть довольно сложно выяснить, какой код CSS вам нужен для отображения содержимого над сгибом.
Надеемся, эта статья помогла вам узнать, как исправить блокирующие рендеринг JavaScript и CSS в WordPress. Вы также можете ознакомиться с нашим руководством по ускорению работы WordPress для начинающих и сравнением лучших управляемых хостинг-компаний WordPress.
Источник: www.wpbeginner.com