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

В Интернете доступно множество конструкторов веб-сайтов, позволяющих создавать веб-сайты без технических навыков. Однако вы должны изучить некоторые технические аспекты SEO, чтобы ваш сайт оставался на вершине страниц результатов поисковых систем. Критический CSS — одна из таких технических тем для оптимизации доставки контента, которая, в свою очередь, напрямую влияет на скорость. Экосистема WordPress усложняет задачу для обычных пользователей, которые используют несколько плагинов на своем сайте. В этой статье давайте исследуем, как создать критически важный CSS для сайта WordPress, чтобы улучшить показатель Google PageSpeed.

Понимание основ

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

Над сгибом содержимого

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

Оптимизация доставки контента

Многие инструменты скорости, такие как Google PageSpeed ​​Insights, измеряют, как веб-сайт доставляет контент в верхней части страницы. Вы можете рассматривать это как измерение First Contentful Paint (FCP). Если они обнаружат блокировку, вы увидите предупреждение об удалении блокирующего элемента. Одним из популярных советов, которые вы увидите в инструменте Google PageSpeed ​​Insights, является устранение ресурсов, блокирующих отображение. Если вы нажмете на это предложение, Google покажет вам оптимизацию доставки критических CSS / JS и отложит все некритические CSS / JS.

Критическое предложение CSS и JS
Критическое предложение CSS и JS

Исправить блокирующий рендеринг JavaScript (jQuery) довольно просто, поскольку темы / плагины по умолчанию загружают скрипты в нижний колонтитул. jQuery — единственная проблема, которая может потребоваться на многих сайтах для загрузки содержимого верхней части страницы. Поскольку WordPress также использует jQuery, вы можете игнорировать эту ошибку, если она вызвана только jQuery. В противном случае используйте плагины, такие как WP Rocket, для объединения и доставки всех скриптов, если это не нарушает макет вашего сайта.

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

Загрузка CSS на веб-сайты

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

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.webnots.com/how-to-create-critical-css-for-wordpress-site/Link Your Stylesheet URL Here">
</head>
<body>
Add Your Content Here
<script src="https://www.webnots.com/how-to-create-critical-css-for-wordpress-site/Add Your Script URL Here"></script>
</body>
</html>

Загрузка CSS в WordPress

WordPress использует style.css как внешний файл для доставки стилей темы. Это обязательный файл (в дополнение к functions.php) для запуска веб-сайта WordPress. Кроме того, каждый плагин на вашем сайте может добавлять дополнительные поля CSS. Откройте свой веб-сайт в браузере Chrome и просмотрите исходный код (убедитесь, что у вас не установлены плагины кеширования или отключено кеширование для страницы).

Таблицы стилей в заголовке
Таблицы стилей в заголовке

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

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

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

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

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

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

  • Сгенерируйте критический CSS вручную и вставьте на свой сайт
  • Используйте плагин WP Rocket для оптимизации доставки контента

Мы подробно объясним оба процесса, и вы сможете выбрать наиболее подходящий для вашего сайта.

Создание критического CSS вручную

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

  • Идти к Сайт Sitelocity и введите URL своей страницы.
  • Нажмите кнопку «Создать CSS для критического пути».
  • Вы можете получить минимизированный критический CSS для своей страницы.
Создать критический CSS
Создать критический CSS

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

Вы можете вставить критический CSS в «Параметры CSS» плагина Autoptimize. Сначала установите флажок «Встроить и отложить CSS» и вставьте критический CSS в появившееся текстовое поле.

Параметры CSS
Параметры CSS

Как видите, плагин Autoptimize также может автоматически встраивать CSS в верхней части страницы, откладывая другие стили. Однако это быстро увеличит размер кеша до 100%, и у вас нет опции в плагине для автоматической очистки кеша. Кроме того, в большинстве случаев это приведет к поломке сайта. Вы можете использовать надстройку Autoptimize CriticalCSS Power-Up, которая поможет вам лучше. Чтобы использовать это дополнение, вам необходимо получить API от Criticalcss.com за 10 долларов в месяц.

Почему создание критического CSS вручную не работает?

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

  • У вас может быть разный контент, такой как страницы, сообщения в блогах, продукты и т. Д. Для каждого типа контента на вашем сайте требуется свой критический CSS для загрузки содержимого в верхней части страницы. Использование плагина или ручная вставка приведет к загрузке критического CSS на всех страницах и повреждению некоторого содержимого.
  • Вы должны генерировать критический CSS каждый раз, когда обновляете тему, плагин и ядро ​​WordPress. В противном случае использование старого критического CSS нарушит макет вашего сайта. Это своего рода невыполнимая задача для обычных пользователей постоянно обновлять критически важный CSS для каждого отдельного обновления на сайте. Поскольку доступны параметры автоматического обновления, вы должны быть очень осторожны перед обновлением плагина / темы / ядра при установке.
  • Вам может понадобиться отдельный критический CSS для мобильных и настольных устройств.

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

Создайте критический CSS для WordPress с помощью WP Rocket

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

  • Сначала вам нужно приобрести премиум-плагин WP Rocket.
  • После установки и активации WP Rocket перейдите в «Настройки> WP Rocket» и перейдите в раздел «Оптимизация файлов».
  • Прокрутите вниз и установите флажок «Оптимизировать доставку CSS».
Включить критический CSS в WP Rocket
Включить критический CSS в WP Rocket

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

Восстановить критический CSS

Когда вы обновляете тему / плагин / ядро ​​WordPress или добавляете пользовательские типы сообщений на свой сайт, необходимо восстановить критический CSS. В противном случае WP Rocket будет использовать старый критический CSS и нарушит макет вашего сайта. Поэтому не забудьте восстановить критический CSS, не забывая.

  • Щелкните меню «WP Rocket» на верхней панели и выберите опцию «Восстановить критический CSS».
  • Кроме того, вы можете перейти на панель управления плагина и нажать кнопку «Восстановить критический CSS».
Восстановить критический CSS
Восстановить критический CSS

Настраиваемый критический CSS для конкретной страницы

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

  • Перейдите в редактор страниц / сообщений страницы, на которой вы хотите создать отдельный критический CSS.
  • На боковой панели документа найдите панель «Параметры WP Rocket». Если вы не нашли, нажмите кнопку с тремя точками в правом верхнем углу и выберите «Настройки». Во всплывающем окне вы можете включить необходимые панели документов, доступные на вашем сайте.
  • Установите флажок «Оптимизировать доставку CSS» и нажмите кнопку «Создать конкретный CPCSS».
  • Это сгенерирует определенный критический CSS для этой страницы, и плагин будет загружать этот критический CSS, когда пользователи посещают страницу.
Создать критический CSS для определенной страницы
Создать критический CSS для определенной страницы

Тестирование критического CSS

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

WP Rocket Critical CSS
WP Rocket Critical CSS

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *