8

Как создать CSS критического пути в WordPress

Как создать CSS критического пути в WordPress

Понимание WordPress CSS

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

Каждая тема WordPress состоит из style.css, который содержит весь код, необходимый для стилизации вашего сайта. Разработчики тем должны поддерживать все функции WordPress, которые включают сообщения в блогах, комментарии, страницу продуктов, страницу членства, формы и т. Д. Другие устанавливаемые вами плагины также могут добавлять аналогичные таблицы стилей css.

Это может сделать файлы css раздутыми и иметь большой размер 200 КБ или даже больше.

Что такое Critical Path CSS?

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

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

Обычно css критического пути встроен в заголовок, а исходный файл css загружается асинхронно или в нижний колонтитул для удобства использования.

Почему Critical Path CSS так важен?

Вы, должно быть, уже видели предупреждение от таких инструментов, как Google PageSpeed ​​Insights или GTmetrix, в котором говорится «оптимизировать доставку css» или «отложить неиспользуемые css».

Критический CSS не имеет ничего общего со временем загрузки страницы. Это не увеличивает / не уменьшает время загрузки. Но дает гораздо лучший пользовательский опыт. Это помогает быстро «визуализировать» или «раскрасить» веб-страницу.

  • Улучшает первую содержательную отрисовку (FCP)
  • Улучшает первую значимую оплату (FMP)
  • Удалите неиспользуемый CSS (технически не удаляйте его, а отдавайте приоритет «полезному» CSS)

Вот два скриншота моего блога с критическим CSS и без него.

Как вы можете видеть в разделе «без критического пути css», потребовалось почти 5 секунд, чтобы показать пользователю что-то полезное на мобильном устройстве. Браузер должен сделать дополнительный HTTP-запрос к файлу css, загрузить его, проанализировать, чтобы начать рендеринг. Но при использовании критического css, все необходимые css должны быть встроены, и браузер может начать рендеринг сразу после загрузки файла HTML в течение секунды или меньше.

Как создать критический CSS в WordPress?

Есть несколько способов сгенерировать критический CSS в WordPress.

Использование плагинов кеширования

WP Rocket – это плагин кеширования премиум-класса, который действительно хорошо работает.

Одна из причин, по которой я использую WP Rocket на каждом сайте, – это сама генерация критического CSS. Они генерируют Critical CSS отдельно для домашней страницы, страницы сообщений, страницы категории, страницы продукта и т. Д. И встраивают его. Они восстановят критически важный CSS, если будут изменения в теме или настройке.

критическое поколение css wp rocket

Все можно сделать одним нажатием кнопки.

wp rocket критический css

Другие плагины кеширования, которые могут генерировать критический CSS

Swift Performance и LiteSpeed (требуется сервер LiteSpeed ​​/ OpenLiteSpeed ) – аналогичные плагины, которые могут генерировать Critical CSS. Оба этих плагина имеют облачный и полный кеш, встроенный в их серверы.

Использование Autoptimize + Free Critical CSS Generator

Существуют сторонние онлайн-инструменты, которые предоставляют важные css, вводя URL-адрес вашего сайта. pegasaas – такой замечательный бесплатный инструмент.

Вот как это сделать:

Шаг 1. Перейдите на https://pegasaas.com/critical-path-css-generator/ и введите свой URL. Скопируйте сгенерированный «Critical Path CSS».

Шаг 2. В настройках автоматической оптимизации (включите расширенные настройки) в разделе «Параметры CSS» установите флажок «Встроить и отложить CSS» и вставьте скопированный CSS.

критическая автоматическая оптимизация css

Плюсы:

  • Бесплатно

Минусы:

  • Нет отдельного критического CSS для разных типов страниц (например: домашняя страница, страница сообщений, страница категории, страница продукта и т. Д.)
  • Не перестраивать автоматически при изменении темы / настройки

Почему сам WordPress не может генерировать критический CSS?

Как вы уже заметили, создание css критического пути включает внешние службы. Так почему же сам WordPress не может его сгенерировать?

Создание Critical CSS стало возможным благодаря проектам с открытым исходным кодом, таким как Critical (от Google), CriticalCSS или penthouse. Все эти проекты основаны на NodeJS, а не на PHP. Итак, вам нужно установить NodeJS на свой сервер. Большинство провайдеров общего / управляемого хостинга не разрешают это по нескольким причинам.

0 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 5 (0 оценок, среднее: 0,00 из 5)
Для того чтобы оценить запись, вы должны быть зарегистрированным пользователем сайта.
Загрузка...
Scroll Up