JavaScript и CSS с блокировкой рендеринга в WordPress: 5 плагинов для исправления

Не так давно Google объявил, что веб-сайты, которые загружаются более трех секунд, не оптимизированы для SEO.

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

Запуск веб-сайта WordPress означает одновременное выполнение значительного количества скриптов, чтобы сделать ваш сайт доступным.

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

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

 

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

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

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

Когда посетитель веб-сайта открывает ваш веб-сайт, интернет-браузер сначала загружает необходимые файлы JavaScript и CSS, а затем HTML.

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

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

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

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

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

 

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

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

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

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

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

 

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

Существует множество стратегий для устранения JavaScript, блокирующего рендеринг. Основными методами являются Async и Defer. Первый метод позволяет браузеру пользователя загружать JavaScript при анализе других частей HTML.

Хотя он не останавливает синтаксический анализ полностью во время загрузки файла, HTML парсер делает паузу для выполнения скрипта при его загрузке. С другой стороны, подход Defer позволяет браузеру загружать JavaScript во время анализа других частей HTML и не выполнять сценарий, пока анализ HTML не завершен.

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

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

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

 

Лучшие плагины WordPress для исправления блокировки рендеринга JavaScript и CSS

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

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

 

Autoptimize

Ассоциация Autoptimize плагин специально создан для решения проблем, предлагаемых инструментами анализа веб-сайта, такими как Google PageSpeed ​​Insights. Он улучшает доставку сценариев JavaScripts и CSS без особого внимания к другим аспектам производительности веб-сайта.

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

После установки и активации Autoptimize вам необходимо установить флажки «Оптимизировать код JavaScript» и «Оптимизировать код CSS» в настройках плагина. Будьте осторожны, не устанавливайте флажки под этими двумя параметрами, объединяющими файлы CSS и скриптов.

Хотя этот плагин доступен бесплатно, вы также можете приобрести премиум-пакеты, которые помогут вам с настройкой веб-сайта.

 

WP Rocket

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

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

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

Основной плагин стоит 49 долларов в год, включая годовую поддержку. Более того, вы можете найти несколько бесплатные дополнения для основного плагина WordPress.

 

КроликЗагрузчик

КроликЗагрузчик — это передовой плагин для оптимизации производительности WordPress, предназначенный для того, чтобы веб-сайт работал быстрее, плавнее и эффективнее.

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

Магия кэширования: RabbitLoader поднимается на ступеньку выше, предлагая динамическую систему кэширования, которая в режиме реального времени адаптируется к изменениям на вашем сайте, гарантируя, что ваши посетители всегда видят самый последний контент, не жертвуя при этом скоростью.

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

Ленивая загрузка: И WP Rocket, и RabbitLoader предлагают отложенную загрузку изображений и iframe, но RabbitLoader идет дальше, предлагая отложенную загрузку JavaScript.

Совместимость: RabbitLoader предназначен для безупречной работы с широким спектром тем и плагинов WordPress, таких как WP Rocket. Независимо от того, есть ли у вас простой блог или сложный веб-сайт электронной коммерции, RabbitLoader создан для повышения производительности вашего сайта без конфликтов.

 

W3 Total Cache

W3 Total Cache представляет собой надежное средство повышения производительности, которое решает не только проблемы кеширования, но и проблемы, вызванные скриптами и таблицами стилей.

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

Затем вы должны щелкнуть вкладку «Устранить ресурсы, блокирующие рендеринг» и скопировать полный адрес ссылки необходимых файлов для блокирующих скриптов и таблиц стилей. Теперь вы можете использовать эти ссылки и ввести их в «раздел JS» Производительность> Уменьшить меню.

W3 Total Cache имеет более миллиона активных установок, и вы можете бесплатно загрузить его на свой сайт с сайта WordPress.org.

 

Набор ускорителей скорости

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

Если вы продаете товары и услуги в Интернете, Оптимизация для WooCommerce Функции Speed ​​Booster Pack очень помогут вам в увеличении видимости вашего магазина в Интернете.

Вы можете быстро исправить блокирующие рендеринг JavaScript и CSS на своем веб-сайте WordPress, щелкнув вкладку «Дополнительно» в меню Speed ​​Booster Pack в панели администратора.

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

Speed ​​Booster Pack - бесплатное решение, доступное на сайте WordPress.org.

 

JCH Оптимизировать

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

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

Используя JCH Optimize, вы можете удалить JavaScript и CSS, блокирующие рендеринг, если вы перейдете на премиальный план. Все, что вам нужно, это активировать опции «Премиум» или «Оптимальный» в разделе «Автоматические настройки». Настройки доставки CSS также доступны только в версии Pro.

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

 

Обзор

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

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

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