Понятие критически важного CSS (Часть 1)

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

Обеспечение быстрого и гладкого впечатления от сети на сегодняшний день является важной частью создания сайтов. Большую часть времени мы разрабатываем сайты без понимания, что на самом деле делает браузер изнутри. Как на самом деле браузер отрисовывает наши страницы из HTML, CSS и JavaScript, которые мы создаем? Как можно использовать эти знания, чтобы ускорить отрисовку веб-страниц?

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

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

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

Что представляет собой критически важный CSS?

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

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

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

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

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

Критически важный CSS в действии

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

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

<!doctype html>
<head>
  <style> /* inlined critical CSS */ </style>
  <script> loadCSS('non-critical.css'); </script>
</head>
<body>
  ...тело страницы
</body>
</html>

В представленном выше коде мы извлекаем критически важный CSS и встраиваем его в HTML между тегами style . Дальше мы используем функцию loadCSS(); , чтобы асинхронно загрузить остальной, некритичный CSS. Это важно, так как мы существенно разгружаем более тяжелый (некритичный) CSS и внедряем его в веб-страницу в фоновом режиме. Сначала это может показаться кошмаром. С чего бы вам хотеть вручную встраивать сниппет CSS в каждую страницу? Но есть и хорошие новости процесс можно автоматизировать, и в данном примере я прогоню его через инструмент под названием Critical.

Изначально он был создан Эдди Османи, и представляет собой пакет Node.js, позволяющий автоматически извлечь и встроить таблицы стилей критически важных процессов в страницы HTML.

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