TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

27

В Интернете доступно множество конструкторов веб-сайтов с перетаскиванием, позволяющих создавать веб-сайты без технических навыков. Однако вы должны изучить некоторые технические аспекты 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 на сайте WordPress?

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

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

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

Связано: Правильные настройки плагина WP Rocket для ускорения вашего сайта.

Загрузка 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="Link Your Stylesheet URL Here"> </head> <body> Add Your Content Here <script src="Add Your Script URL Here"></script> </body> </html>

Загрузка CSS в WordPress

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

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

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

Вы можете увидеть, как 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 для оптимизации доставки контента

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

По теме: Будет ли WP Rocket работать с хостингом SiteGround?

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

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

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

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

Создать критический CSS

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

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

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

Параметры 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 на сайте WordPress?

Включить критический CSS в WP Rocket

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

Обратите внимание, что WP Rocket – это плагин премиум-класса с лицензией для одного сайта, доступной за 49 долларов. На наш взгляд, этот плагин стоит приобрести, так как он предлагает решение для сквозного кеширования для оптимизации скорости. Плагин поставляется с годичной поддержкой и обновлениями. После этого он продолжит работать, и вы сможете использовать критически важные CSS и другие функции без продления. Вы можете продлить со скидкой 30%, чтобы получить поддержку и дополнительные функции. Это гораздо лучший вариант по сравнению с 10 долларами в месяц за использование Criticalcss API с Autoptimize.

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

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

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

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

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

Пользовательский критический CSS для конкретной страницы

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

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

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

Создать критический CSS для определенной страницы

По теме: Обзор плагина кеширования WP Rocket.

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

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

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

WP Rocket Critical CSS

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

Заключительные слова

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

Источник записи: www.webnots.com
Leave A Reply

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