Общие сведения о критическом CSS

Общие сведения о критическом CSS

От автора: интернет в настоящий момент все еще не достаточно быстр, и существует всего несколько простых способов по ускорению веб-сайтов. Одним из таких способов является встраивание критического CSS кода в тег head на всех страницах вашего сайта. Но как же это сделать, если на вашем сайте сотни страниц или даже хуже, сотни различных шаблонов? Вы не можете делать это вручную. Dean Hume показал достаточно простой способ по решению этой проблемы. Если вы уже опытный разработчик, все, что описано в статье может показаться вам очевидным и понятным, но это определенно хороший пример для ваших клиентов и начинающих разработчиков.

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

Если мне нужно быстро повысить производительность страниц, первый инструмент, который я использую, это PageSpeedInsights. Данный инструмент может быть полезен при структурировании страниц и поиске областей, которые необходимо ускорить. Необходимо просто вбить URL страницы, которую хотите протестировать, и инструментарий предложит вам список улучшений.

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

CSS и JavaScript блокируют рендеринг страницы

Должен признать, когда я впервые увидел такое сообщение, я немного запутался. Сообщение гласит:

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

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

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

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

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

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

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

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

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

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

Критический CSS в действии

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

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

Код ниже показывает, как это примерно будет выглядеть в HTML коде.

<!doctype html>
<head>
<style> /* инлайновый критический CSS */ </style>
<script>loadCSS(не-критичный.css'); </script>
</head>
<body>
  ...body
</body>
</html>

В коде выше критический CSS встраивается между тегами style. Затем с помощью функции loadCSS(); мы асинхронно загружаем оставшийся некритичный CSS. Это очень важно, так как, по существу, мы разгружаем громоздкий (некритичный) CSS код и загружаем его в фоновом режиме.

На первый взгляд может показаться, что работать с таким кодом будет сплошным кошмаром. Почему бы вам не прописать этот код вручную на каждой странице? Тем не менее, есть и хорошая новость – весь процесс можно автоматизировать. Я пропущу сайт через инструмент Critical. Инструментарий представляет собой пакет разработки Node.js и создан Addy Osmani. С его помощью можно автоматически извлекать и встраивать критический CSS в HTML код страницы.

Для автоматизации процессов мы будем использовать данный инструмент в сочетании с Grunt, таск менеджером JavaScript. На случай если вы ни разу не использовали Grunt, на сайте есть детализированная документация, а также разнообразные советы по настройке вашего проекта. Я уже писал об этом замечательном инструменте.

Приступим к делу

Начнем с запуска консоли Node.js и установки адреса сайта. Установите интерфейс командной строки Grunt, набрав следующую команду в консоли:

npminstall-g grunt-cli

Это позволит прописать grunt команду в системный путь, позволяя запускаться из любой директории. Затем установите таск менеджер Grunt с помощью команды:

npminstallgrunt--save-dev

Установите плагин grunt-critical.

npm install grunt-critical --save-dev

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

module.exports=function(grunt){

grunt.initConfig({
critical:{
dist:{
options:{
base:'./'
},
 // исходник
src:'page.html',
 // конечный файл
dest:'result.html'
}
}
});

 // Загрузка плагинов
grunt.loadNpmTasks('grunt-critical');

// задачипоумолчанию.
grunt.registerTask('default',['critical']);
};

В приведенном выше коде я настроил Critical плагин таким образом, чтобы он смотрел на page.html. Плагин обработает CSS код данной страницы и вычислит его критическую часть. На последнем этапе плагин встроит критический код в HTML и обновит файл. Запустите плагин командой grunt из консоли.

Автоматизация с помощью Grunt

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

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

critical: {
  dist: {
    options: {
      base: './',
      dimensions: [{
        width: 1300,
        height: 900
      },
      {
        width: 500,
        height: 900
      }]
    },
    files: [
      {src: ['index.html'], dest: 'dist/index.html'}
    ]
  }
}

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

Использование Critical в рабочей среде

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

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

critical: {
  dist: {
    options: {
      base: './',
      dimensions: [{
        width: 1300,
        height: 900
       },
       {
        width: 500,
        height: 900
      }]
    },
    files: [
      {src: ['index.html'], dest: 'dist/index.html'},
      {src: ['blog.html'], dest: 'dist/blog.html'}
      {src: ['about.html'], dest: 'dist/about.html'}
      {src: ['contact.html'], dest: 'dist/contact.html'}
    ]
  }
}

Также плагин может обрабатывать все HTML файлы в папке с помощью кода ниже:

critical: {
  dist: {
    options: {
      base: './',
      dimensions: [{
        width: 1300,
        height: 900
      },
      {
        width: 500,
        height: 900
      }],
      src: '*.html',
      dest:  'dist/'
    }
  }
}

Код выше дает представление того, как автоматизацию можно применить для вашего сайта.

Тесты

Как и всегда, очень важно проводить тесты при изменениях кода. Если вам необходимо провести тесты, то для этого существуют отличные инструменты. Откройте в новой вкладке GooglePageSpeedInsights и скопируйте URL требуемой страницы. Обратите внимание на то, что теперь ваши страницы не блокируются, а предложения по ускорению загрузки горят зеленым! И скорее всего вы знакомы с еще одним сервисом WebPagetest.

WebPagetest отличный способ протестировать страницы на своевременную отрисовку контента

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

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

Немного подробнее

Как и во всех методах оптимизации, в нашем тоже есть свои плюсы и минусы. Одиниз минусов встраивания CSS в тело страницы это то, что данный код не будет кэшироваться. Если мы имеем дело с динамическими страницами, которые часто обновляются, то мы бы не хотели, чтобы страницы кэшировали себя. А это значит, что встроенный CSS каждый раз перезагружается. Много уже сказано про встраивание критического CSS и асинхронную загрузку остального кода. В любом случае мы всегда можем кэшировать некритичный CSS код. В зависимости от вашего отношения к данному методу существует масса аргументов, как за, так и против встраивания CSS в тег. Но для более глубокого понимания всей сути советую прочитать статью Hans Christian Reinl Встречное заявление: встраивание CSS в хэдер

Если вы используете сеть доставки контента (CDN), стоит помнить, что некритичный код обслуживается от нее отдельно. Такой подход позволяет работать с кэшированными ресурсами напрямую, уменьшая время отклика, вместо маршрутизации всех узлов на пути к серверу.

Данная методика хорошо работает с обычными веб-страницами, но она не всегда применима. Что если у вас есть клиентский JavaScript код генерирующий HTML? Или если вы работаете над одностраничным сайтом? Встраивая как можно больше CSS кода в хэдер, вы ускоряете рендеринг страницы. Если вы используете данный метод, важно понять его работу. Мне очень нравится, как Guy Podjarny рассуждает на эту тему:

«Несмотря на все ограничения, встраивание кода все еще остается важным инструментом в наборе front-end оптимизации. И поэтому вы просто обязаны использовать данный метод, но не злоупотреблять им.»

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

Все еще не идеально

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

Оптимизация пути критической визуализации страниц может занять довольно много времени, если вы хотите добиться увеличения производительности. Данный метод можно применять, не опасаясь потерять основные преимущества от адаптивных макетов верстки. Также данная методика позволяет удостовериться в быстрой загрузке страниц, не подозревая в медленной загрузке дизайн сайта.

Дополнительные источники

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

Существуют другие плагины для генерации критического CSS, такие как Penthouse и criticalCSS от Filament Group. Еще я настоятельно рекомендую прочитать статью как заставить чертовски быстро загружаться адаптивные сайты с сайта Filament Group для понимания того, как они используют эту технику для быстрой загрузки страниц.

Главный редактор Smashing Magazine, Vitaly Friedman написал статью о том, как его сайт увеличил производительность с помощью этой методики. На сайте Udacity есть бесплатный полезный курс, если вы хотите поближе познакомиться с путем критической визуализации страницы. На сайте GoogleDevelopers также полно полезного контента по теме оптимизация загрузки CSS. Patrick Hamman написал замечательную статью как определить критический CSS в своей колонке Building a FasterWeb.

Автор: Dean Hume

Источник: http://www.smashingmagazine.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree