Када је CSS здружен у један фајл, чак и након tree-shaking-а, он и даље садржи много некоришћеног CSS-а због различитих @media контекста (мобилни, таблет, десктоп, тамне/светле/друге теме, итд.).
Лоше је за Core Web Vitals: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), као и друге виталне метрике перформанси и употребљивости: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI), и DOMContentLoaded догађај.
Постоји начин да се значајно побољша учитавање и приказивање CSS-а раздвајањем CSS-а у различите фајлове, где сваки фајл садржи само код потребан у том контексту.
Раздвојте свој CSS у различите фајлове:
📄main.css - садржи CSS потребан за све @media услове
📄screen.css - садржи CSS потребан само за screen @media услов
📄print.css - садржи CSS потребан само за print @media услов
📂breakpoints
📄x-small.css - садржи CSS потребан само за X-Small преломну тачку
📄sm.css - садржи CSS потребан само за Small преломну тачку
📄md.css - садржи CSS потребан само за Medium преломну тачку
📄lg.css - садржи CSS потребан само за Large преломну тачку
📄xl.css - садржи CSS потребан само за Extra large преломну тачку
📄xxl.css - садржи CSS потребан само за Extra extra large преломну тачку
📂themes
📄light.css - садржи CSS потребан само за светлу тему
📄dark.css - садржи CSS потребан само за тамну темуЗатим, укључите CSS фајлове овако:
<link rel="stylesheet" href="main.css" media="all">
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="x-small.css" media="(max-width: 575px)">
<link rel="stylesheet" href="sm.css" media="(min-width: 576px)">
<link rel="stylesheet" href="md.css" media="(min-width: 768px)">
<link rel="stylesheet" href="lg.css" media="(min-width: 992px)">
<link rel="stylesheet" href="xl.css" media="(min-width: 1200px)">
<link rel="stylesheet" href="xxl.css" media="(min-width: 1400px)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">Са овим приступом, модерни прегледачи дају приоритет учитавању CSS-а за тренутне @media услове, тако да приказивање странице почиње много брже јер корисници не морају да чекају учитавање некоришћеног дела CSS-а.
У случајевима када имате сав CSS здружен у једном фајлу и не наведете услове у media атрибутима link тагова, прегледач чека да се учита цео сет CSS-а пре него што почне приказивање странице. Што драстично успорава приказивање странице.
Преломне тачке у овом примеру су засноване на Bootstrap 5. Овај приступ ће ускоро постати још важнији за Bootstrap с обзиром на то да ће додати подршку за светле/тамне/друге теме.
Ако желите да учините веб бољим и бржим, молим вас:
- поделите овај чланак,
- пошаљите овај чланак програмерима оквира које користите,
- имплементирајте ово раздвајање CSS-а на вашим сајтовима.
Поделите на друштвеним мрежама или сачувајте за касније:
Ако желите да прочитате више о овој оптимизацији и понашању прегледача, молим вас погледајте следеће:
- Чланак „Conditionally adaptive CSS. Browser behavior that might improve your performance“ од Вадима Макеева. Насловна слика за овај чланак је преузета из његовог одличног чланка, где има више снимака екрана и експеримената.
- MDN Web Docs: CSS performance optimization.