Сьогодні мова піде про так званий Critical CSS – невеличку хитрість для прискорення першого відтворення (#fcp, #lcp) сторінки та усунення її блокування файлами стилів. Якщо у вас FCP більше 1.5 сек, то безперечно варто замислитися.
Який зазвичай вигляд має проєкт у кінцевому вигляді – HTML, у якому підключаються файли стилів. Так ось, відтворення сторінки не почнеться, поки всі файли стилів не будуть завантажені та прочитані. Знаходяться умільці, які файли стилів переносять із head куди-небудь перед </body> і перше відтворення стає майже миттєвим, але спочатку ми бачимо сторінку без стилів, а потім перемальовування і величезний CLS.
Щоб цього уникнути, стилі, необхідні для відтворення першого екрана, потрібно помістити в код сторінки в тег <style>. Тоді стрибати контент не буде, і ці стилі застосуються до сторінки відразу ж. Решту стилів за такого формату потрібно підключати в <head> сайту, але щоб вони завантажилися якнайшвидше і не блокували відтворення. Для цього чудово підходить невеликий лайфхак:
<link rel=”preload” as=”style” href=”style.css” onload=”this.onload=null;this.rel=’stylesheet'”>
Завантажувати весь набір стилів проєкту не потрібно, для цього їх розбивають за типами сторінок і довантажують те, що необхідно для відтворення конкретно цієї сторінки. На головній інтернет магазину в critical потрапить частина сітки, і весь перший екран, в основний файл – стилі для відтворення сторінки, що залишилася, а стилі для відтворення сторінки товару взагалі не завантажаться для цієї сторінки.
Щоб виділити Critical-CSS, краще виконувати верстку покомпонентно, як у сучасних фреймворках, і керувати вручну тими стилями, що потраплять inline, або використовувати інструменти для виділення критичних стилів для поточної сторінки, як-от плагін для вебпаку:
Та окремі додатки для екстракції стилів із готової верстки critical:
Пам’ятайте, що не варто всі стилі виносити inline: за всіма вимірами вони більше не блокуватимуть, проте користувачеві доведеться вантажити їх щоразу, тому використовуйте кешування.
А ви використовуєте Critical-CSS?
