Критический CSS в WordPress: что это такое и как оптимизировать доставку CSS

При проведении аудита производительности в Google PageSpeed ​​Insights вы обнаружите, что Google почти каждый раз рекомендует вам «устранить ресурсы, блокирующие рендеринг». Это означает, что вы всегда должны загружать свой критический CSS и JavaScript в приоритете.

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

Давайте погрузимся.

Что такое критический CSS и почему он важен для производительности?

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

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

Скорость страницы также может повлиять на эффективность SEO из-за нового фактора ранжирования, включая Core Web Vitals. Это набор факторов, применяемых Google для измерения пользовательского опыта, в том числе скорости страницы. Чем лучше опыт, тем лучше будет ваш рейтинг.

Знакомы ли вы с шестью показателями Lighthouse, измеряющими производительность? Два из них — First Contentful Paint (FCP) и First Input Delay (FID) — измеряют воспринимаемую скорость вашего сайта. Если эти показатели в хорошем состоянии, то и ваш пользовательский опыт будет измеряться Google. Однако, если оба KPI в минусе, вам лучше оптимизировать свой критический CSS.

Критический CSS объясняется простым языком

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

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

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

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

Вопрос: Какой сценарий вам «кажется» более быстрым?

Ответ: Мы все согласны с тем, что воспринимаемая скорость итоговой прибыли лучше.

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

Зачем нужен критический CSS?

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

Сайт WP Rocket без CSS	Сайт WP Rocket с CSS

Что означает критический путь рендеринга CSS?

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

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

Но что, если бы браузер мог начать отображать CSS по ходу загрузки?

Представьте себе способ смягчить блокировку и начать доставку CSS как можно скорее. Этот метод точно известен как оптимизация критического пути рендеринга.

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

Возникают два вопроса: как оптимизировать каждый шаг? Как убедиться, что у нас самая эффективная доставка CSS?

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

3 шага по оптимизации доставки CSS

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

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

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

Как найти критический CSS

WebDev предоставляет вам три инструмента, которые вы можете использовать для определения критичного CSS:

• Критично — извлекает верхний CSS (а также встраивает и минимизирует его)
• CriticalCSS — еще один модуль, извлекающий критический CSS.
• Penthouse — хороший выбор, если на вашем сайте много CSS.

Шаг 2: Встройте этот критический CSS — это добавление критического CSS в <head> HTML-документа, чтобы исключить все дополнительные запросы на получение этих стилей.

В приведенном ниже примере WebDev они встроили критический CSS в файл <head>, чтобы браузер мог быстрее доставлять его и отображать что-то для пользователей как можно скорее.

Шаг 3: Загрузите остальную часть CSS асинхронно — это задерживает некритические CSS, чтобы их можно было загрузить после того , как ваши посетители увидят содержимое вашей веб-страницы. Этот метод также известен как «отложенная загрузка». WebDev очень хорошо объясняет весь ручной процесс.

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

Как сгенерировать критический CSS и оптимизировать критический путь рендеринга с помощью плагина

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

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

• Автооптимизация — по умолчанию внедряет CSS в заголовок страницы, а также может встраивать и откладывать критический CSS.

• Очистка активов — встроенные файлы CSS (автоматически и путем указания пути к таблицам стилей).

Как оптимизировать доставку CSS с помощью WP Rocket

В WP Rocket 3.10 параметр «Загружать CSS асинхронно» соответствует рекомендации по скорости страницы, которую мы видели ранее: «Устранить ресурсы, блокирующие рендеринг». WP Rocket охватывает две основные оптимизации CSS:

1. Он генерирует критический CSS, необходимый для отображения видимой части вашего веб-сайта (контента в верхней части страницы).
2. Он загружает все остальные файлы CSS асинхронно (определяя, какой из них должен быть загружен первым).

Чтобы оптимизировать доставку CSS, просто выполните следующие действия на панели инструментов WP Rocket:

• Перейдите в « Настройки » > « WP Rocket».
• Нажмите на вкладку « Оптимизация файлов ».
• Прокрутите вниз до раздела «Файлы CSS» и установите флажок « Оптимизировать доставку CSS ».
• Выберите параметр « Удалить неиспользуемый CSS » ( рекомендуемый вариант ). Это извлечет только CSS, необходимый на странице, а также встроит его.

Кроме того, WP Rocket также позволяет асинхронно загружать CSS и предлагает резервный вариант для критического CSS. Используйте это резервное поле в случае, если плагин не может сгенерировать правильный критический CSS.

И последнее, но не менее важное: WP Rocket также учитывает рекомендации «Уменьшить неиспользуемый CSS» от PageSpeed ​​Insights.

Неиспользуемый CSS влияет на время загрузки страницы, потому что браузер все равно должен их загрузить. Это также повлияет на такие показатели производительности Google, как « Самая большая отрисовка контента» (LCP) и « Общее время блокировки» (TBT) . LCP и TBT имеют общий вес 55% в оценках Google PageSpeed ​​и Core Web Vitals, поэтому очень важно поддерживать эти показатели в норме.

Давайте проверим эти параметры WP Rocket на сайте WordPress с плохой оценкой PSI (мобильный). Вы увидите, как WP Rocket поможет нам в процессе оптимизации скорости страницы.

До оптимизации моего критического CSS моя оценка производительности была всего 43/100, что поставило мой мобильный сайт в минус:

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

Теперь давайте установим WP Rocket и активируем опцию « Удалить неиспользуемый CSS» .

Результаты производительности теперь великолепны на мобильных устройствах . Мы достигли 94/100 всего за пару кликов. WP Rocket оптимизировал мой путь рендеринга, а также позаботился о моем критическом CSS.

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

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

Подведение итогов

Оптимизация критически важного CSS кажется сложной задачей, но это не обязательно благодаря таким плагинам, как WP Rocket. Мы увидели, что WP Rocket помог устранить красные предупреждения, связанные с ресурсами, блокирующими рендеринг, в Google PageSpeed ​​Insights.

Вы сэкономите драгоценное время, потому что WP Rocket автоматически применяет 80% передовых методов веб-производительности — и вы увидите мгновенное улучшение скорости после активации .

Более того, вы всегда можете рассчитывать на нашу 100% гарантию возврата денег. Хотя мы не думаем, что он вам когда-нибудь понадобится, мы с радостью вернем вам деньги, если вы запросите его в течение 14 дней с момента покупки.