Улучшите скорость сайта: удалите JS и CSS, блокирующие рендеринг

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

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

Что такое JavaScript и CSS, блокирующие рендеринг?

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

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

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

Почему JavaScript и CSS, блокирующие рендеринг, вредны для веб-страниц?

Сценарии JavaScript и CSS, блокирующие рендеринг, замедляют работу ваших веб-страниц, что плохо по многим причинам. Скорость сайта играет роль во многих жизненно важных аспектах вашего сайта WordPress, включая общее удобство использования и поисковую оптимизацию (SEO). Когда ваш сайт загружается медленно, вы с большей вероятностью потеряете посетителей и с меньшей вероятностью окажетесь на высоких позициях в результатах поиска.

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

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

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

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

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

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

Чтобы уменьшить количество скриптов, блокирующих рендеринг, на вашем сайте, вам необходимо следовать нескольким рекомендациям:

• «Минимизируйте» ваш JavaScript и CSS. Это означает удаление всех лишних пробелов и ненужных комментариев в коде.
• Объедините ваш JavaScript и CSS. Для этого вам нужно взять несколько разных файлов .js и .css и объединить их. В идеале у вас будет всего несколько таких файлов.
• Отложите загрузку JavaScript. Может быть полезно заставить файлы JavaScript ждать загрузки, пока все остальное на странице не будет готово. Надежный способ отложить JavaScript — использовать асинхронную загрузку.

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

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

Плагины для уменьшения блокировки рендеринга JavaScript и CSS

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

1. Ракета WP

WP Rocket помогает оптимизировать сайт с помощью таких задач, как минимизация CSS и JavaScript, ленивая загрузка изображений, откладывание удаленных запросов JavaScript и многое другое. Это «швейцарский армейский нож» плагинов оптимизации.

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

Есть несколько бесплатных дополнений, которые вы можете получить для WP Rocket в каталоге плагинов WordPress. Однако сам базовый плагин стоит 49 долларов в год за один веб-сайт и один год поддержки, а дополнительные уровни предлагают больше возможностей.

2. Автооптимизация

Autoptimize создан специально для решения проблем, возникающих с помощью инструментов рекомендаций, таких как PageSpeed ​​Insights. Все настройки, позволяющие настроить плагин для вашего веб-сайта, будут содержаться в новом меню на панели управления WordPress.

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

Хотя сам плагин бесплатный, вы можете приобрести один из двух пакетов у разработчиков, чтобы помочь с его настройкой. Существует индивидуальный план конфигурации по цене около 165 долларов (149 евро). Вы также можете получить практический профессиональный обзор вашего веб-сайта и экспертной конфигурации плагина примерно за 667 долларов (599 евро).

3. Оптимизация JCH

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

Еще одна уникальная особенность JCH Optimize — генератор спрайтов. Это объединяет фоновые изображения в «спрайты», поэтому для их загрузки в браузер требуется меньше HTTP-запросов. Однако одним из недостатков этого плагина может быть крутая кривая обучения. Большинству пользователей придется полагаться на документацию поддержки, чтобы убедиться, что они правильно настроили плагин, чтобы избежать ошибок.

При этом у плагина много пятизвездочных отзывов и более 10 000 активных установок. Что касается цены, доступна бесплатная версия плагина. Однако, если вам нужен доступ к поддержке и расширенным функциям, таким как Optimize Image API, вам необходимо приобрести подписку. Они начинаются с 29 долларов за шесть месяцев поддержки и доступа к API.

4. Ускоритель скорости

Speed ​​Booster Pack предлагает оптимизацию CSS и JavaScript, ленивую загрузку и функцию удаления беспорядка. Разработчики Optimocha поддерживают плагин в актуальном состоянии с постоянно развивающейся кодовой базой, поэтому вы знаете, что всегда будете использовать новейшие методы. Также есть встроенная функция оптимизации WooCommerce, которая устраняет узкие места.

Одним из преимуществ использования Speed ​​Booster Pack является возможность интеграции с сетью доставки контента (CDN). Это упрощает использование CDN по вашему выбору в WordPress, а также оптимизацию с помощью плагина. Недостатком этого плагина является процесс проб и ошибок, которому вам, возможно, придется следовать, чтобы правильно настроить его.

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

Улучшите скорость своего сайта с помощью движка WP

Каким бы ни был ваш подход к повышению скорости вашего сайта, мы здесь, чтобы помочь. У нас есть Speed ​​Tool для тестирования вашего веб-сайта и лучшие ресурсы для разработчиков, которые помогут вам на пути к оптимизированному опыту.
На самом деле, наша платформа цифрового опыта (DXP) — отличное место, чтобы начать создавать лучший веб-сайт WordPress. Ознакомьтесь с нашими тарифными планами сегодня!