От автора: на рассвете интернета веб-сайты в основном показывали только текстовую информацию. Медленно, но верно скорость соединения росла, и постепенно пользователи смогли загружать изображения и видео высокого качества довольно быстро. Сейчас сайты не просто дают необходимую информацию в текстовом виде, сайты стали сложнее. Появились CSS и JS фреймворки, плагины и т.д. Загрузка всех этих дополнительных файлов занимает определенное время.
Более быстрый сайт обеспечивает лучший пользовательский опыт, что может сильно повлиять на его успех. Как разработчикам повысить производительность? Разработчики могут использовать один метод, который сильно повысит производительность. Можно инлайнить критический CSS, а остальной загружать асинхронно. В этой статье мы пройдемся по всем этапам и поможем вам повысить производительность вашего сайта.
Что такое критический CSS?
К критическому CSS относится тот код, который отвечает за стили видимой части страницы сайта при загрузке. К контенту видимой части относится контент, который пользователь видит самым первым после загрузки. Это может быть меню и другие элементы. Крайне важно правильно применить стили и как можно быстрее отрисовать эту часть страницы.
Тут стоит также отметить, что пользователи могут заходить на ваш сайт через множество устройств с разными разрешениями экрана. Так что сам контент видимой части экрана ничего не решает. Чтобы решить эту проблему, к критическому CSS коду нужно отнести также стили базового макета и шрифтов.
В современных практиках по разработке часто рекомендуют инлайнить критический CSS. Такой код вставляется на страницу следующим образом:
|
1 2 3 4 5 6 7 8 9 10 |
<!doctype html> <html> <head> <title>An Optimized Web Page</title> <style type="text/css"> (Минифицированный критический CSS должен быть здесь) </style> </head> <body> (Your markup) </body> </html> |
Почему инлайнить стили обязательно?
Если вы зайдете на Google PageSpeed Insights и проанализируете одну из страниц вашего сайта, вам может выскочить предупреждение об оптимизации вставки CSS при помощи встраивания критических стилей и асинхронной загрузки остальных стилей.
Браузер не станет отрисовывать видимую часть страницы, пока не загрузит все файлы CSS, с чем могут возникнуть проблемы, если файлов много.
Не у всех ваших пользователей будет быстрое соединение, и они не будут ждать, пока загрузятся библиотеки, CSS и JS. Если они не смогут получить тот контент, за которым пришли, это будет очень плохо. Даже у пользователей с быстрым соединением может потеряться сеть, например, при проезде по туннелю. Находясь в туннеле, у пользователей будет доступ к основному контенту в том случае, если критический CSS встроен в разметку, а все остальные файлы загружаются только после отображения основного контента.
На изображении ниже показана разница между обычной и оптимизированной страницей. Из скриншота видно, что оптимизированная страница отображает контент на 0.5 секунды раньше. Разница будет более заметной, когда будет подключено много дополнительных библиотек.
Нужно ли вам инлайнить критический CSS?
Все зависит от ситуации. Если вы не используете тяжелые фреймворки или библиотеки, а файлы CSS весят мало, то вам не нужно встраивать стили.
Если же вы работаете с фреймворком типа Bootstrap, возможно, вы не воспользуетесь всеми возможностями данного фреймворка. В таком случае можно вырезать критический CSS из файлов фреймворка, а сам Bootstrap загружать асинхронно. Это должно значительно повысить скорость загрузки сайта.
Инлайновые стили можно кэшировать, в то время как HTML зачастую не кэшируют. В этом кроется разница. Помните об этом, когда делаете обновления! Кроме того, встроенные стили увеличивают вес страницы при каждой ее загрузке. К примеру, если на каждой странице сайта есть дополнительно 30Кб инлайновых стилей, то просмотр 10 страниц одним пользователем обойдется вам в 300Кб. Может показаться, что все не так плохо, однако в некоторых частях мира передача данных очень дорогая (а также на некоторых 3G/4G тарифах). Убедитесь, чтобы стили, которые вы хотите встроить в разметку, действительно были критичны для страниц, чтобы вы не инлайнили все подряд.
Как найти критический CSS
Искать критический CSS самому довольно сложно и скучно. К счастью, есть специальные инструменты, которые ускорят этот процесс.
С помощью Grunt
Если вы знакомы с Grunt, то там есть плагин, упрощающий данный процесс — grunt-critical. Если вы больше любите Gulp или npm, смотрите разделы ниже. Сперва необходимо установить плагин с помощью команды:
|
1 |
npm install grunt-critical --save-dev |
Также необходимо создать файл Gruntfile.js. В нем будет храниться весь код с настройками плагина, в том числе разрешения экрана и путь к файлу. Пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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 внутри функции-обертки, чтобы задать все настройки. В примере я указал путь, куда будут записываться конечный и исходный файлы. Также я задал опцию minify в true. Так я получу минифицированную версию критических стилей. В свойстве src указывается путь к исходному файлу, с которым мы будем работать. В свойстве dest указывается путь к конечному файлу, который нужно сохранить.
Если в dest указан файл стилей, конечный CSS сохраняется в отдельный файл. Если в dest указан файл разметки (HTML, PHP и т.д.), то CSS встраивается, а существующие стили оборачиваются в JS функцию для асинхронной загрузки. Для пользователей с отключенным JS добавляется блок noscript. Также есть и другие опции. Полный список можно посмотреть в документации. Теперь плагин можно запустить, набрав в консоли grunt: C:\path\to\project>grunt
Если исходный файл был таким:
|
1 2 3 4 5 6 7 8 9 10 |
<!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> |
то теперь он стал таким:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!doctype html> <html> <head> <title>The Optimizer</title> <style type="text/css">Минифицированный инлайновый CSS</style> <script id="loadcss"> JavaScript для асинхронной загрузки стилей ... </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-criticalcss и grunt-penthose. В этих плагинах необходимо выбирать стили, из которых нужно извлечь критический код.
С помощью npm модулей
Critical – npm пакет, созданный Адди Османи, в котором прописан функционал плагина grunt-critical. Используя только JS и npm, без Grunt, вы можете извлечь и встроить критические стили страницы. Для установки пакета необходимо запустить команду:
|
1 |
npm install critical --save-dev |
После установки пакета необходимо создать JS файл в папке проекта и скопировать в него код ниже:
|
1 2 3 4 5 6 7 8 9 10 |
var critical = require('critical'); critical.generate({ inline: true, base: 'initial/', src: 'homepage.html', dest: 'final/homepage.html', width: 1366, height: 768 }); |
Вы можете указать множество опций и оптимизировать страницу. Если задать опцию inline в true, будет сгенерирована HTML страница с уже встроенными стилями. Если же задать false, будет сгенерирован отдельный CSS файл. Опции width и height задают разрешение экрана. Есть много других опций типа минификации инлайновых стилей. Все опции можно найти на странице документации критических npm пакетов. Разметка оптимизированной страницы будет похожа на страницу после плагина для Grunt.
Так же есть модуль critical-css. Модуль генерирует критический CSS по предоставленному URL. Полученный CSS можно обработать при помощи колбэк функции, так как grunt плагин основан на этом пакете.
С помощью Gulp
Если вам нравится работать в Gulp, Адди Османи советует использовать напрямую критический npm модуль. Его пример на странице GitHub:
|
1 2 3 4 5 6 7 8 |
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')); }); |
У команды Critical также есть пример проекта на Gulp, где можно посмотреть все в действии. Также есть плагин gulp-critical-css, который умеет генерировать критический CSS. Однако этот плагин извлекает из стилей селекторы определенного типа, а не определяет, какие стили применены к видимым элементам.
Дополнительные ресурсы
Также можно воспользоваться инструментом Critical Path CSS Generator Джонаса Олсона. Вам нужно всего лишь указать URL страницы и все стили, из которых нужно извлечь критический CSS. Кликните на Create Critical Path CSS и получите готовый CSS код.
Заключение
Выбор, нужно ли инлайнить критический CSS, зависит от того, в каких условиях находится пользователь, а также от структуры сайта. Если у вас одностраничный сайт, на который не так часто заходят пользователи, это одно дело. Но когда у вас сложный сайт с фреймворками и плагинами, встраивание критических стилей может существенно повысить производительность.
Единственный минус заключается в том, что инлайновые стили увеличивают вес страниц. Эту проблему можно решить, если использовать куки и загружать критические стили только при первом посещении, а остальные файлы стилей загружать асинхронно и кэшировать их. Немного сложно, но так вы берете все самое лучшее от обеих методик.
А вы пробовали инлайнить CSS в своих проектах? Насколько серьезными были улучшения? У вас есть советы для коллег? Пишите в комментариях.
Автор: Asha Laxmi
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
