Як і чому ви повинні інлайн критичний css
Більш швидкий сайт забезпечує кращий користувальницький досвід, що може сильно вплинути на його успіх. Як розробникам підвищити продуктивність? Розробники можуть використовувати один метод, який сильно підвищить продуктивність. Можна інлайн критичний CSS, а решті завантажувати асинхронно. У цій статті ми пройдемося по всіх етапах і допоможемо вам підвищити продуктивність вашого сайту.
Що таке критичний CSS?
До критичного CSS відноситься той код, який відповідає за стилі видимої частини сторінки сайту при завантаженні. До контенту видимої частини відноситься контент, який користувач бачить найпершим після завантаження. Це може бути меню та інші елементи. Вкрай важливо правильно застосувати стилі і як можна швидше отрисовать цю частину сторінки.
Тут варто також відзначити, що користувачі можуть заходити на ваш сайт через безліч пристроїв з різними дозволами екрану. Так що сам контент видимої частини екрана, нічого не вирішує. Щоб вирішити цю проблему, до критичного CSS коду потрібно віднести також стилі базового макета і шрифтів.
У сучасних практиках по розробці часто рекомендують інлайн критичний CSS. Такий код вставляється на сторінку наступним чином:
Практика HTML5 та CSS3 з нуля до результату!
Чому інлайн стилі обов'язково?
Якщо ви зайдете на Google PageSpeed Insights і проаналізуєте одну зі сторінок вашого сайту, вам може вискочити попередження про оптимізацію вставки CSS за допомогою вбудовування критичних стилів і асинхронної завантаження інших стилів.
Браузер не стане малювати видиму частину сторінки, поки не завантажить всі файли CSS, з чим можуть виникнути проблеми, якщо файлів багато.
Не у всіх ваших користувачів буде швидке з'єднання, і вони не будуть чекати, поки завантажаться бібліотеки, CSS і JS. Якщо вони не зможуть отримати той контент, за яким прийшли, це буде дуже погано. Навіть у користувачів з швидким з'єднанням може загубитися мережу, наприклад, при проїзді по тунелю. Перебуваючи в тунелі, у користувачів буде доступ до основного контенту в тому випадку, якщо критичний CSS вбудований в розмітку, а всі інші файли завантажуються тільки після відображення основного контенту.
На зображенні нижче показано різниця між звичайною і оптимізованої сторінкою. З скриншота видно, що оптимізована сторінка відображає контент на 0.5 секунди раніше. Різниця буде більш помітною, коли буде підключено багато додаткових бібліотек.
Чи потрібно вам інлайн критичний CSS?
Все залежить від ситуації. Якщо ви не використовуєте важкі фреймворки або бібліотеки, а файли CSS важать мало, то вам не потрібно вбудовувати стилі.
Якщо ж ви працюєте з фреймворком типу Bootstrap, можливо, ви не скористаєтесь усіма можливостями даного фреймворка. В такому випадку можна вирізати критичний CSS з файлів фреймворка, а сам Bootstrap завантажувати асинхронно. Це повинно значно підвищити швидкість завантаження сайту.
Як знайти критичний CSS
Шукати критичний CSS самому досить складно і нудно. На щастя, є спеціальні інструменти, які прискорять цей процес.
За допомогою Grunt
Якщо ви знайомі з Grunt, то там є плагін, який спрощує цей процес - grunt-critical. Якщо ви більше любите Gulp або npm, дивіться розділи нижче. Спершу необхідно встановити плагін за допомогою команди:
Також необхідно створити файл Gruntfile.js. У ньому буде зберігатися весь код з настройками плагіна, в тому числі дозволи екрану і шлях до файлу. приклад:
Ми використовуємо метод grunt.initConfig всередині функції-обгортки, щоб задати всі налаштування. У прикладі я вказав шлях, куди будуть записуватися кінцевий і початковий файли. Також я задав опцію minify в true. Так я отримаю мініфіцірованную версію критичних стилів. У властивості src вказується шлях до вихідного файлу, з яким ми будемо працювати. У властивості dest вказується шлях до кінцевого файлу, який потрібно зберегти.
Якщо в dest вказано файл стилів, кінцевий CSS зберігається в окремий файл. Якщо в dest вказано файл розмітки (HTML, PHP і т.д.), то CSS вбудовується, а існуючі стилі обертаються в JS функцію для асинхронної завантаження. Для користувачів з відключеним JS додається блок noscript. Також є й інші опції. Повний список можна подивитися в документації. Тепер плагін можна запустити, набравши в консолі grunt: C: \ path \ to \ project> grunt
Якщо вихідний файл був таким:
то тепер він став таким:
Як видно, плагін все робить за вас. Якщо тепер прогнати сторінку через PageSpeed, результат повинен стати краще. У багатьох випадках результат змінюється з 86 до 95.
Є й інші плагіни для Grunt, які роблять те ж саме - grunt-criticalcss і grunt-penthose. У цих плагинах необхідно вибирати стилі, з яких потрібно витягти критичний код.
За допомогою npm модулів
Critical - npm пакет, створений Адді Османі, в якому прописаний функціонал плагіна grunt-critical. Використовуючи тільки JS і npm, без Grunt, ви можете отримати і вбудувати критичні стилі сторінки. Для установки пакета необхідно запустити команду:
Після установки пакета необхідно створити JS файл в папці проекту і скопіювати в нього код нижче:
Ви можете вказати безліч опцій і оптимізувати сторінку. Якщо задати опцію inline в true, буде згенеровано HTML сторінка з вже вбудованими стилями. Якщо ж поставити false, буде згенеровано окремий CSS файл. Опції width і height задають дозвіл екрана. Є багато інших опцій типу мініфікаціі інлайнових стилів. Всі опції можна знайти на сторінці документації критичних npm пакетів. Розмітка оптимізованої сторінки буде схожа на сторінку після плагіна для Grunt.
Так само є модуль critical-css. Модуль генерує критичний CSS за наданим URL. Отриманий CSS можна обробити за допомогою колбек функції, так як grunt плагін заснований на цьому пакеті.
За допомогою Gulp
Якщо вам подобається працювати в Gulp, Адді Османі радить використовувати безпосередньо критичний npm модуль. Його приклад на сторінці GitHub:
У команди Critical також є приклад проекту на Gulp. де можна подивитися всі в дії. Також є плагін gulp-critical-css. який вміє генерувати критичний CSS. Однак цей плагін витягує з стилів селектори певного типу, а не визначає, які стилі застосовані до видимих елементів.
додаткові ресурси
Також можна скористатися інструментом Critical Path CSS Generator Джонас Олсона. Вам потрібно всього лише вказати URL сторінки і всі стилі, з яких потрібно витягти критичний CSS. Натисніть на Create Critical Path CSS і отримаєте готовий CSS код.
висновок
Вибір, чи потрібно інлайн критичний CSS, залежить від того, в яких умовах знаходиться користувач, а також від структури сайту. Якщо у вас лише однієї сторінки сайт, на який не так часто заходять користувачі, це одна справа. Але коли у вас складний сайт з фреймворками і плагінами, вбудовування критичних стилів може істотно підвищити продуктивність.
Редакція: Команда webformyself.
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі