Что такое Render Blocking CSS в PageSpeed — понимание и исправление

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

Что такое Render Blocking CSS?

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

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

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

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

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

Технически, «рендеринг» браузером означает анализ кода HTML и отображение его на экране. Веб-браузер сначала прочитает весь текст HTML, а затем сгенерирует веб-страницу, которую посетитель сможет увидеть и использовать. Таким образом, чем больше CSS у вас на сайте, тем дольше браузер будет анализировать его, что приведет к увеличению скорости загрузки.

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

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

Почему это должно быть удалено?

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

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

Примерно через 3 секунды показатель отказов поднимается до 11%. И к 5-секундной отметке он достигает 38% — это более одной трети всего входящего трафика, потерянного для медленной загрузки веб-сайта. Кроме того, если загрузка вашего веб-сайта займет больше времени, то это ухудшит ваш SEO-рейтинг, затрудняя ранжирование в поисковых системах.

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

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

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

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

Вы можете сделать это:

• Использование встроенного CSS
• Объединение файлов CSS
• И используя меньше CSS

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

Используйте встроенный CSS

Чем больше файлов CSS на вашей странице, тем больше времени потребуется браузеру для их загрузки. Лучшее решение здесь — поместить CSS-скрипты прямо в ваш HTML. Это называется встраиванием CSS.

Все, что вам нужно сделать, это открыть один из файлов CSS и скопировать код. Затем вам нужно вставить CSS в ваш HTML-файл. Помните, что встроенный CSS входит в заголовок документа HTML и использует тег Style. Это должно выглядеть примерно так:

После встраивания кода CSS не забудьте удалить вызов файла CSS.

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

Когда вы видите большие CSS-файлы, рекомендуется использовать один из следующих методов:

Объединить CSS-файлы

Если на вашем сайте слишком много CSS-файлов, то каждый из них будет способствовать снижению скорости, поскольку браузер загружает каждый из них по отдельности. Простым решением этой проблемы было бы объединение нескольких файлов CSS в один (или в некоторых случаях два, в зависимости от размера файлов).

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

Теперь, как говорится, как вы комбинируете эти несколько файлов CSS?

Ну, это очень похоже на то, как вы используете CSS. Откройте один из поддерживаемых файлов CSS и скопируйте код. Затем перейдите в основной файл CSS и вставьте туда код.

Просто не забудьте удалить вызов для исходного файла CSS, так как вы больше не будете его использовать.

Если это кажется вам слишком сложным, есть плагины, которые могут сделать то же самое и помочь вам. Проверьте наш раздел по этому вопросу ниже.

Используйте меньше CSS в целом

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

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

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

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

Плагины для устранения блокировки рендеринга CSS

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

1. Asset CleanUp Page Speed Booster

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

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

Шаг 1 : Установите плагин. Для этого войдите в свою панель управления WordPress и перейдите в раздел «Плагины»> «Добавить новый» . Теперь найдите Asset CleanUp и нажмите кнопку «Установить сейчас», а затем «Активировать».

Шаг 2 : Установив плагин на свой веб-сайт, найдите параметр Asset CleanUp> CSS / JS Load Manager на левой боковой панели. Здесь вы найдете все содержимое вашего сайта — домашнюю страницу, страницы, сообщения и пользовательские типы сообщений. Выберите любой из них.

Шаг 3. Теперь прокрутите вниз, и вы увидите все активные файлы CSS и JS для этой конкретной веб-страницы или публикации. У вас будет возможность выборочно деактивировать каждый из них.

Просто отключите блокировку рендеринга CSS, и все готово. После этого нажмите Обновить .

Шаг 4 : Перейдите к другому сообщению или странице и повторите шаг 3.

Повторяйте, пока не отключите все CSS-файлы блокировки рендеринга.

Примечание : плагин также поставляется с выделенным режимом тестирования . Рекомендуется сначала деактивировать / отключить файлы CSS в тестовом режиме и посмотреть, не нарушит ли он ваш сайт.

Начните с Asset CleanUp

2. WP Rocket

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

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

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

Шаг 1 : Установите плагин на свой сайт WordPress. Поскольку это плагин премиум-класса, вам сначала нужно будет его купить, а затем загрузить в локальное хранилище (скорее всего, в файле .zip).

После загрузки войдите в свою панель управления WordPress и выберите « Плагины»> «Добавить новый» и нажмите кнопку « Загрузить плагин» . Теперь найдите файл .zip и загрузите его на свой сайт. Это займет несколько минут для установки.

Шаг 2 : После установки и активации перейдите в Настройки> WP Rocket . Здесь вы найдете все варианты плагинов.

Шаг 3 : Найдите настройки оптимизации файла . Здесь вы должны увидеть раздел для CSS-файлов .

Плагин предлагает вам три варианта — минимизировать CSS-файлы, объединить CSS-файлы и оптимизировать доставку CSS. Включите параметры, и все готово.

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

Начните с WP Rocket

3. Hummingbird

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

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

Однако, чтобы исправить проблемы CSS Render Blocking, вам нужно получить немного больше инструкции.

Шаг 1 : Во-первых, вам нужно установить и активировать Hummingbird на вашем сайте.

Шаг 2 : После этого вы должны заметить новый раздел «Колибри» на левой боковой панели панели управления WordPress. Нажмите на него, чтобы получить доступ ко всем его параметрам и настройкам.

Шаг 3 : Перейдите к опции « Оптимизация активов» и активируйте « Включить расширенный режим» .

Шаг 4 : Теперь прокрутите вниз, и вы увидите список всех файлов CSS на вашем сайте. Помимо каждого CSS-файла есть опции, которые позволяют вам сжимать их, комбинировать и даже вставлять их. Также есть опция «не загружать файл».

Шаг 5 : Найдите блокирующие файлы рендеринга CSS-файлы, которые вызывают проблему. Если в этом нет необходимости, выберите опцию «Не загружать файл». Если это необходимо, вы можете сжать его, объединить или встроить.

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

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