Как использовать критический CSS для повышения производительности веб-сайта

GooglePageSpeed InsightsWordPress

Последнее обновление Сен 22, 2021

Содержание

Что такое критический CSS?

Зачем использовать критический CSS?

Что выше сгиба?

Все это замечательно, но как мне создать и добавить критический CSS (не для WordPress)?

Все это замечательно, но как мне создать и добавить критический CSS на WordPress сайт?

Решения

Наш рабочий процесс… Gulp + Penthouse = Kapow!

Обновление

Мы одержимы скоростью – как ускорить загрузку веб-сайтов. Как часто говорят об автомобилях: «Ты можешь ехать так быстро, как хочешь – сколько ты хочешь потратить?» В этом отношении автомобили и веб-дизайн похожи – скорость требует времени и денег. Мы обнаружили, что один из лучших способов увеличить скорость веб-сайта по доступной цене – это внедрение Critical CSS. Мы делаем это для всех пользовательских проектов веб-дизайна. Однако многие люди не знают о Critical CSS – это немного загадка. Давайте разберемся, что это такое и как его использовать, чтобы вы могли ускорить время загрузки своего сайта и повысить показатель PageSpeed Score. В качестве дополнительного преимущества вы превратите кофе в пиво. Обещание.

Что такое критический CSS?

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

На вашей странице есть 2 блокирующих ресурса CSS. Это вызывает задержку в отображении вашей страницы.

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

Оптимизируйте доставку CSS для следующего:

https://yourdomain.com/some/path/to/some/file.css
https://yourdomain.com/some/path/to/some/other/file.css

И когда вы перейдете по ссылке “Оптимизировать доставку CSS”, вы получите полезную информацию от Google, например

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

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

Это не должно вызывать уныние. Давайте разберемся с этим. Google говорит правду. Браузер должен загрузить и проанализировать всю разметку (HTML) и стили (CSS), прежде чем он сможет отобразить страницу. Он также должен делать то же самое для всего Javascript, хотя это тема для другого обсуждения. Просмотрите исходный код на своей странице, перейдите сверху вниз и откройте все эти таблицы стилей CSS…

Именно здесь на помощь приходит критический CSS – возьмите весь этот CSS, удалите только то, что необходимо для отображения содержимого верхней <head>части страницы, поместите этот CSS прямо в раздел, отложите остальной CSS в нижний колонтитул страницы с помощью НАКАЛИВАНИЯ группы loadCSS или прямо переместив <link rel="stylesheet" href="path/to/your/css/style.css"> в нижнюю часть страницы (Argh, я знаю, CSS не должен идти туда), а затем пойти получить пиво, потому что вы просто ускорило все… Выпейте это пиво и отправьте своему клиенту хороший счет.

Зачем использовать критический CSS?

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

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

Что выше сгиба?

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

(так же называемая “Главный экран”)

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

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

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

Все это замечательно, но как мне создать и добавить критический CSS (не для WordPress)?

Ладно, хватит бегать вокруг да около. Приступим к делу. Вот как это сделать.

Лучший бесплатный ресурс для создания Critical CSS – это потрясающий Critical Path CSS Generator от Джонаса Олссона Адена. Позже вы узнаете о нем больше, так как он перенес этот замечательный ресурс в еще лучшие места.

Вставьте URL своей страницы
Скопируйте и вставьте все CSS для своей страницы – даже стили фреймворка Bootstrap или Foundation
Устройтесь поудобнее и наслаждайтесь пивом
Скопируйте сгенерированный Critical CSS в <style>тег наверху <head>страницы.
Переместите остальное <link rel="stylesheet" href="../your/style.css">вниз, в нижнюю часть страницы, над </body>тегом, вниз со всеми <script>...</script>тегами.
Загрузите эту новую страницу с поддержкой Critical CSS в Google PageSpeed Insights и радуйтесь тому, что не видите, блокирующий рендеринг исчез, в сообщениях с контентом в верхней части страницы все ок и солнышко свет ярче а пиво на вкус стало еще приятнее… )
Устройтесь поудобнее и наслаждайтесь пивом дальше.

Ваш минимизированный Critical CSS в <style>теге <head>должен выглядеть примерно так (с гораздо большим количеством CSS)

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

Все это замечательно, но как мне создать и добавить критический CSS на WordPress сайт?

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

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

Решения

Вот как мы справляемся с этими проблемами

Вы имеете дело с большим количеством страниц – многие страницы создаются с помощью некоторой формы шаблонов. Сосредоточьтесь на разделении шаблонов на группы и выясните, на каких страницах можно использовать один и тот же Critical CSS.
Невозможно эффективно добавить различный Critical CSS на каждую страницу – компьютеры хорошо справляются с пакетной обработкой. Пусть машины сделают работу за Вас.
На вашем веб-сайте может быть загружено множество различных таблиц стилей CSS – старайтесь не делать этого. Это замедляет работу вашего сайта, а это плохо для бизнеса. Если вы используете рабочий процесс Sass, объедините все эти файлы CSS в один. Тогда у вас есть только один основной файл CSS, из которого вы можете извлечь критический CSS, и только один файл CSS, который нужно переместить в нижнюю часть страницы.

Наш рабочий процесс… Gulp + Penthouse = Kapow!

Мы используем Gulp – набор инструментов JavaScript – для автоматизации множества надоедливых задач, связанных с веб-разработкой. Создание критического CSS снова и снова каждый раз, когда есть изменение стиля, которое влияет на содержимое над сгибом, может, мягко говоря, раздражать. Так что Gulp – идеальный инструмент для автоматизации процесса.

Для создания Critical CSS мы изначально использовали генератор CriticalCSS от Filament Group, и это здорово. Я не историк, но Filament Group, похоже, вышла на сцену одной из первых. Однако репозиторий обновляется нечасто.

Йонас Олссон Аден (помните его, он разработал потрясающий + бесплатный Critical Path CSS Generator) указал нам на Penthouse, созданный им для Critical CSS. Это быстрее, чаще обновляется. Мы перешли на Penthouse, чтобы выполнить тяжелую работу по созданию Critical CSS. В Penthouse есть масса отличной документации с примерами от простой реализации до пакетирования множества страниц за раз.

Эта установка работала как жемчужина для создания множества критических CSS:

Добавьте Penthouse через npm в package.jsonзависимости:
```
"dependencies": {
    "penthouse": "^1.4.0"
  }
```

Добавьте к gulpfile.jsтребованиям следующее:


var penthouse = require("penthouse");
var fs = require('fs');
var urlList = require('./criticalcss-pagelist.json')

Добавьте следующий вариант в файл gulpfile.js. Мы пишем вывод в виде файлов PHP, обертывающих CSS, так как мы собираемся вставлять критический CSS для каждой страницы в <head>раздел через PHP, но вы можете настроить его в соответствии fs.writeFileSync()со своими потребностями. Ниже приведены все варианты, но вам, конечно, не нужно включать их все.
Добавьте список URL-адресов для анализа и список файлов для записи, добавив вариант этого в criticalcss-pagelist.jsonфайл. Это "link"страница, которую нужно проанализировать на наличие критического CSS на основе конфигурации в вашем файле, gulpfile.jsи "name"это имя файла, содержащего верхний критический CSS для вывода для каждой соответствующей страницы. В этом случае мы ссылаемся на локальные страницы, но вы можете использовать живые страницы (хотя это медленнее).
```
{
  "urls": [
    {
      "link": "https://local-alexwright.net/",
      "name": "criticalcss/home"
    },
    {
      "link": "https://local-alexwright.net/westlake-plastic-surgery/",
      "name": "criticalcss/portfolio-project"
    },
    {
      "link": "https://local-alexwright.net/free-seo-analysis/",
      "name": "criticalcss/seo-analysis"
    },
    {
      "link": "https://local-alexwright.net/free-seo-analysis-report/",
      "name": "criticalcss/seo-analysis-results"
    }
  ]
}
```
Стоит отметить, что при одновременном запуске большого количества страниц в Penthouse может истечь время ожидания. Ознакомьтесь с этим отличным справочником, чтобы получить информацию о пакетной обработке запусков Penthouse, чтобы ваш бедный компьютер не взорвался.
Беги gulp criticalcssи наблюдай, как компьютеры делают то, в чем они хороши – много работы
При необходимости добавьте каждый сгенерированный критический элемент CSS в <head>каждую страницу. Мы находимся в рабочем процессе WordPress, поэтому мы добавляем в header.phpфайл что-то вроде этого
Другой вариант сделать это в рабочем процессе WordPress – использовать wp_head()крючок действия вfunctions.php
```
add_action( 'wp_head', 'criticalcss');
function criticalcss() { 
 if( is_front_page()) {
    get_template_part( 'criticalcss/home' );
 }
 else if( in_category( 13) ) {
    get_template_part( 'criticalcss/portfolio-project' );
 }...
}
```
Хотя это работает отлично, первое решение, состоящее в добавлении условных тегов непосредственно в заголовок, позволяет поднять критические файлы CSS выше в разделе заголовка, что лучше, поскольку браузер быстрее добирается до критических файлов CSS.
Затем мы используем Autoptimize, чтобы, помимо прочего, отложить наш единственный основной style.cssфайл в нижний колонтитул. Другой вариант, или если вы хотите сделать это вручную, вы можете использовать loadCSS Filament Group (который использует Autoptimze). Даже большие и сложные веб-сайты могут получить 95 и выше в Google PageSpeed Insights (попробуйте запустить этот веб-сайт с помощью этого инструмента ).

Вы используете высококлассный рабочий процесс Critical CSS? Или все это вообще не имеет смысла? Вы пьете пиво или кофе? Дайте нам знать об этом в комментариях. И особая огромная благодарность Йонасу Олссону Адену за всю его работу над Penthouse и за то, что он предложил большие изменения в этом посте, в том числе внесение поправок.

Обновление

Обновлен включает новую функциональность Penthouse – спасибо Йонасу Олссону Адену. Он работает над новым способом группировки более крупных серий генерации критического CSS, и мы обновим этот пост этими деталями, когда они появятся.

Источник записи: https://alexwright.net