В первые дни Интернета веб-сайты использовались главным образом для отображения текстовой информации. Постепенно скорость нашего соединения улучшилась, и пользователи смогли загружать изображения и видео высокого разрешения довольно быстро. Теперь веб-сайты делают гораздо больше, чем просто предоставляют необходимую информацию в виде текста. Веб-сайты становятся все более сложными, с фреймворками CSS и JavaScript, множеством плагинов и многим другим. Со всем этим в игре загрузка всех необходимых файлов для всего этого может занять некоторое время.
Более быстрый веб-сайт может привести к улучшению взаимодействия с пользователем, что может иметь огромное значение для успеха веб-сайта. Что могут сделать разработчики, чтобы начать улучшать производительность? Одна вещь, которую могут сделать разработчики, которая очень помогает, это встроить критический CSS и асинхронно загружать некритический CSS. В этой статье мы рассмотрим эти вопросы один за другим и поможем вам повысить производительность вашего сайта.
Что такое Критический CSS?
Критический CSS в вашем проекте — это CSS, который используется для стилизации содержимого вашего веб-сайта. Содержание выше всего — это то, что пользователи сначала видят на вашем сайте, что может включать навигацию и другие элементы. Поэтому очень важно правильно оформить и визуализировать эту часть сайта как можно быстрее.
Здесь я хотел бы упомянуть одну вещь: ваши посетители, вероятно, используют множество устройств с разными окнами просмотра для посещения вашего сайта. Таким образом, содержание выше всякого смысла само по себе не сильно поможет. Чтобы решить эту проблему, вы также должны рассмотреть любой CSS, связанный с основным макетом и типографикой, как критический.
Современные практики веб-разработки часто рекомендуют указывать свой критический CSS. Он будет размещен на вашей веб-странице следующим образом:
<!doctype html>
<html>
<head>
<title>An Optimized Web Page</title>
<style type="text/css"> (Your minified critical CSS would be here) </style>
</head>
<body>
(Your markup)
</body>
</html>Почему встраивание необходимо?
Если вы перейдете на страницу Google PageSpeed Insights и проанализируете одну из своих веб-страниц, вы можете увидеть предупреждения об оптимизации доставки CSS с помощью встраивания критического CSS и асинхронной загрузки таблиц стилей, блокирующих отображение.
Браузеры не будут отображать содержимое ваших веб-страниц, если они не загрузили все ваши CSS-файлы. Это может иметь большое значение, когда нужно загрузить много файлов.
Не у всех ваших пользователей будет быстрое подключение к Интернету, и ожидание загрузки библиотек, CSS и JavaScript, прежде чем они смогут получить доступ к контенту, к которому они пришли, может быть очень неприятным. Даже пользователи с быстрым интернетом могут потерять соединение в определенных ситуациях, например, когда они проходят через туннель. На этом этапе они по-прежнему смогут получить доступ к основному контенту, если ваш веб-сайт имеет встроенный критический CSS и не загружает другие файлы перед показом основного контента.
Изображение ниже иллюстрирует разницу между обычной и оптимизированной веб-страницей. Как видите, оптимизированная версия позволит пользователям получить доступ к контенту примерно на 0,5 секунды раньше. Улучшения будут более заметными, когда будет загружено много дополнительных библиотек.
Вы должны встроить критический CSS?
Это зависит от ситуации. Если вы не используете какие-либо тяжелые фреймворки или библиотеки, а ваши собственные CSS-файлы также имеют небольшой размер, то вам может не потребоваться встроить ваш CSS.
Если вы используете фреймворк, такой как Bootstrap, вы, вероятно, используете не все функции, которые предлагает фреймворк. В этом случае вы можете просто извлечь критический CSS из таблиц стилей фреймворка и асинхронно загрузить реальный фреймворк. Это должно значительно улучшить скорость вашего сайта.
При вставке таблицы стилей можно кэшировать. HTML часто не кэшируется (это часто не очень хорошая идея!). Это означает, что иногда могут быть различия между ними. Имейте это в виду при создании обновлений! Кроме того, встроенный CSS будет увеличивать вес страницы каждый раз, когда пользователь загружает ваш сайт. Например, если на каждой странице вашего веб-сайта имеется 30 КБ встроенного CSS, то 10 просмотров страниц одним пользователем будут стоить 300 КБ. Это может показаться не таким уж большим делом, но в некоторых частях света данные дороги (и в некоторых тарифных планах 3G / 4G). Убедитесь, что CSS, который вы планируете встроить, действительно важен для вашей веб-страницы, и вы не вкладываете все .
В поисках критического CSS
Поиск критического CSS вручную будет непростой и скучной задачей. К счастью, есть инструменты, которые могут помочь вам сделать это быстро.
Используя Grunt
Если вы знакомы с системой сборки Grunt , есть плагин, который облегчает этот процесс — популярный плагин, критичный к grunt . Если вы предпочитаете Gulp или используете npm, смотрите следующие разделы о том, как сделать этот процесс с ними.
Сначала вам нужно установить плагин с помощью следующей команды:
npm install grunt-critical --save-dev
Вам также нужно создать свой Gruntfile.js Он будет содержать весь код для установки различных параметров для плагина, включая размеры области просмотра и путь к исходному и целевому файлу. Вот пример:
module.exports = function(grunt) {
grunt.initConfig({
critical: {
extract: {
options: {
base: './',
width: 1024,
height: 768,
minify: true
},
src: 'path/to/initial.html',
dest: 'path/to/final.html'
}
}
});
grunt.loadNpmTasks('grunt-critical');
grunt.registerTask('default', ['critical']);
};
Внутри нашей функции-оболочки мы используем метод grunt.initConfig В этом случае я указал базовый каталог, в который должны быть записаны исходный и целевой файлы. Я также установил для параметра minifytrue Это дает мне окончательную уменьшенную версию критического CSS, который извлекает плагин. Свойство src Свойство dest
Если файл dest Однако, если свойство dest Блок noscript Есть и другие доступные варианты. Вы можете получить доступ к полному списку опций в критической документации .
Теперь вы можете просто запустить плагин, набрав grunt
C:\path\to\project>grunt
Если ваш исходный файл имел следующую разметку:
<!doctype html>
<html>
<head>
<title>The Optimizer</title>
<link rel="stylesheet" href="link/to/stylesheet">
</head>
<body>
<div>All the markup stuff</div>
</body>
</html>
Теперь это будет выглядеть так:
<!doctype html>
<html>
<head>
<title>The Optimizer</title>
<style type="text/css">Minified Inlined CSS</style>
<script id="loadcss">
JavaScript to load styles asynchronously...
</script>
<noscript>
<link rel="stylesheet" href="link/to/stylesheet">
</noscript>
</head>
<body>
<div>All the markup stuff</div>
</body>
</html>
Как видите, этот плагин делает всю вашу работу за вас. Теперь, если вы проанализируете свою веб-страницу с помощью PageSpeed, вы должны получить лучший результат. В моем случае оценка изменилась с 86 до 95.
Есть и другие плагины, доступные для Grunt, которые достигают аналогичного уровня — grunt-critcss и grunt-penthose . Однако при использовании этих плагинов вам нужно будет указать таблицы стилей, из которых нужно извлечь критический CSS.
Использование модулей npm
Critical — это пакет npm, созданный Addy Osmani, он содержит функциональные возможности, используемые плагином grunt-критическим. Вы можете использовать его без Grunt для извлечения и встраивания критического пути или над сложенным CSS с веб-страницы, используя JavaScript и npm. Чтобы установить пакет, вам нужно запустить:
npm install critical --save-dev
После того, как пакет был установлен, вам нужно создать файл JavaScript в каталоге проекта и поместить в него следующий код.
var critical = require('critical');
critical.generate({
inline: true,
base: 'initial/',
src: 'homepage.html',
dest: 'final/homepage.html',
width: 1366,
height: 768
});
Вы можете указать несколько вариантов для создания оптимизированной веб-страницы. Если установить для inline значение true Параметр widthheight Есть много других опций, таких как минимизация встроенного CSS, который вы можете найти в документации по критическому пакету npm . Разметка оптимизированной веб-страницы будет выглядеть аналогично выводу плагина grunt.
Другой модуль npm, который вы можете использовать, — это модуль критического css . Этот модуль генерирует критический CSS из предоставленного URL. Сгенерированный CSS может быть далее обработан с помощью функции обратного вызова, потому что плагин grunt основан на этом пакете.
Используя Gulp
Если вам удобнее работать с Gulp, Адди Османи рекомендует пользователям Gulp напрямую использовать модуль Critical npm. Пример, который он приводит на странице Critical GitHub для пользователей Gulp, выглядит следующим образом:
var critical = require('critical').stream;
// Generate & Inline Critical-path CSS
gulp.task('critical', function () {
return gulp.src('dist/*.html')
.pipe(critical({base: 'dist/', inline: true, css: ['dist/styles/components.css','dist/styles/main.css']}))
.pipe(gulp.dest('dist'));
});
У команды Критики также есть пример проекта Gulp, демонстрирующий это в действии.
Существует также плагин gulp-критический-css для генерации критического CSS. Тем не менее, этот работает путем извлечения определенных типов селекторов из вашего CSS, а не путем обнаружения элементов над сложением и так далее.
Больше ресурсов
Другой доступный инструмент — это Critical Path CSS Generator от Jonas Ohlsson. Все, что вам нужно сделать, это ввести URL-адрес вашей страницы, а затем предоставить весь CSS, из которого вы хотите извлечь критический CSS. Нажав на кнопку «Создать Critical Path CSS», вы получите CSS.
В статье о хитростях CSS рассказывается, как использовать CSS-препроцессоры для создания критического фолда CSS . Кроме того, SitePoint также опубликовал отличную статью об оптимизации критического пути рендеринга в прошлом, которую вы можете прочитать, чтобы получить более глубокое понимание темы.
Вывод
Нужно или нет встроенный критический CSS, зависит от схемы посещения ваших пользователей и структуры вашего сайта. Если ваш веб-сайт является одним пейджером, и посетители не будут посещать его часто, или если у вас есть сложный сайт с фреймворками и плагинами, встраивание критического CSS может значительно повысить производительность.
Единственное беспокойство по поводу встраивания заключается в том, что он добавляет дополнительный вес страницы для каждого посещения. Этого можно избежать, используя файлы cookie и отправляя критический CSS только во время первого посещения, при этом все еще загружая полный файл CSS асинхронно и затем кэшируя его. Это немного сложно, но вы получаете лучшее из обоих миров.
Вы пробовали встраивать CSS в свои проекты? Насколько значительными были улучшения? Есть ли у вас какие-либо советы для коллег-разработчиков? Дайте нам знать об этом в комментариях.