Amikor a CSS egyetlen fájlba van csomagolva, még a tree-shaking után is sok fel nem használt CSS-t tartalmaz a különböző @media kontextusok miatt (mobil, tablet, asztali, sötét/világos/egyéb témák stb.).
Ez kedvezőtlen a Core Web Vitals mutatókra nézve: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), valamint más fontos teljesítmény- és használhatósági mutatókra is: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI) és a DOMContentLoaded esemény.
Van egy módszer a CSS betöltésének és renderelésének jelentős javítására a CSS külön fájlokba szervezésével, ahol minden fájl csak az adott kontextushoz szükséges kódot tartalmazza.
Bontsd külön a CSS-t fájlokra:
📄main.css - tartalmazza az összes @media feltételhez szükséges CSS-t
📄screen.css - csak a screen @media feltételhez szükséges CSS-t tartalmazza
📄print.css - csak a print @media feltételhez szükséges CSS-t tartalmazza
📂breakpoints
📄x-small.css - csak az X-Small törésponthoz szükséges CSS-t tartalmazza
📄sm.css - csak a Small törésponthoz szükséges CSS-t tartalmazza
📄md.css - csak a Medium törésponthoz szükséges CSS-t tartalmazza
📄lg.css - csak a Large törésponthoz szükséges CSS-t tartalmazza
📄xl.css - csak az Extra large törésponthoz szükséges CSS-t tartalmazza
📄xxl.css - csak az Extra extra large törésponthoz szükséges CSS-t tartalmazza
📂themes
📄light.css - csak a világos témához szükséges CSS-t tartalmazza
📄dark.css - csak a sötét témához szükséges CSS-t tartalmazzaMajd így illeszd be a CSS fájlokat:
<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)">Ezzel a megközelítéssel a modern böngészők előnyben részesítik a CSS betöltését az aktuális @media feltételekhez, így az oldal renderelése sokkal gyorsabban kezdődik el, mert a felhasználóknak nem kell megvárniuk a CSS fel nem használt részének betöltését.
Abban az esetben, ha az összes CSS egyetlen fájlba van csomagolva, és nem adsz meg feltételeket a link tag-ek media attribútumaiban, a böngésző megvárja a teljes CSS készlet betöltését az oldal renderelésének megkezdése előtt. Ami drasztikusan lelassítja az oldal renderelését.
Ebben a példában a töréspontok a Bootstrap 5-ön alapulnak. Ez a megközelítés hamarosan még fontosabbá válik a Bootstrap számára, tekintettel arra, hogy hozzáadják a világos/sötét/egyéb témák támogatását.
Ha jobbá és gyorsabbá szeretnéd tenni az internetet, kérlek:
- oszd meg ezt a cikket,
- küldd el ezt a cikket az általad használt keretrendszerek fejlesztőinek,
- valósítsd meg ezt a CSS szétválasztást a weboldalaidon.
Megosztás közösségi médiában vagy mentés későbbre:
Ha többet szeretnél olvasni erről az optimalizálásról és a böngésző viselkedéséről, kérlek, tekintsd meg a következőket:
- Vadim Makeev „Feltételesen adaptív CSS. Böngésző viselkedés, amely javíthatja a teljesítményt” című cikke. Ennek a cikknek a borítóképernyője az ő kiváló cikkéből származik, ahol további képernyőképek és kísérletek találhatók.
- MDN Web Docs: CSS teljesítményoptimalizálás.
- Vadim Makeev „Feltételesen adaptív CSS. Böngésző viselkedés, amely javíthatja a teljesítményt” című cikke. Ennek a cikknek a borítóképernyője az ő kiváló cikkéből származik, ahol további képernyőképek és kísérletek találhatók.
- MDN Web Docs: CSS teljesítményoptimalizálás.