Kad CSS ir apvienoti vienā failā, pat pēc liekā koda izņemšanas, tajā joprojām ir daudz neizmantota CSS koda dažādu @media kontekstu dēļ (mobilais, planšetdators, dators, tumšā/gaišā/citas tēmas utt.).
Tas ir slikti Core Web Vitals rādītājiem: pirmās ievades aizkave (FID), lielākā satura ielādes aizkave (LCP), kumulatīvais izkārtojuma nobīde (CLS), kā arī citiem būtiskiem veiktspējas un lietojamības rādītājiem: pirmā satura ielādes laiks (FCP), kopējais bloķēšanas laiks (TBT), laiks līdz interaktivitātei (TTI) un DOMContentLoaded notikums.
Pastāv veids, kā ievērojami uzlabot CSS ielādi un renderēšanu, sadalot CSS dažādos failos, kur katrs fails satur tikai tajā kontekstā nepieciešamo kodu.
Sadalīt CSS dažādos failos:
📄main.css - satur CSS, kas nepieciešams visiem @media nosacījumiem
📄screen.css - satur CSS, kas nepieciešams tikai ekrāna @media nosacījumam
📄print.css - satur CSS, kas nepieciešams tikai drukas @media nosacījumam
📂breakpoints
📄x-small.css - satur CSS, kas nepieciešams tikai X-Small izšķirtspējai
📄sm.css - satur CSS, kas nepieciešams tikai Small izšķirtspējai
📄md.css - satur CSS, kas nepieciešams tikai Medium izšķirtspējai
📄lg.css - satur CSS, kas nepieciešams tikai Large izšķirtspējai
📄xl.css - satur CSS, kas nepieciešams tikai Extra large izšķirtspējai
📄xxl.css - satur CSS, kas nepieciešams tikai Extra extra large izšķirtspējai
📂themes
📄light.css - satur CSS, kas nepieciešams tikai gaišajai tēmai
📄dark.css - satur CSS, kas nepieciešams tikai tumšajai tēmaiPēc tam iekļaujiet CSS failus šādi:
<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)">Izmantojot šo pieeju, mūsdienu pārlūkprogrammas prioritizē CSS ielādi pašreizējiem @media nosacījumiem, tāpēc lapas renderēšana sākas daudz ātrāk, jo lietotājiem nav jāgaida, kamēr ielādēsies neizmantotā CSS daļa.
Gadījumos, kad viss CSS ir apvienots vienā failā un nav norādīti nosacījumi link tagu media atribūtos, pārlūkprogramma gaida, kamēr ielādēsies viss CSS kopums, pirms sāk lapas renderēšanu. Tas ievērojami palēnina lapas renderēšanu.
Šajā piemērā izmantotās izšķirtspējas ir balstītas uz Bootstrap 5. Šī pieeja kļūs vēl svarīgāka Bootstrap tuvākajā laikā, ņemot vērā, ka viņi pievienos atbalstu gaišām/tumšām/citām tēmām.
Ja vēlaties padarīt tīmekli labāku un ātrāku, lūdzu:
- dalieties ar šo rakstu,
- nosūtiet šo rakstu to ietvarstruktūru izstrādātājiem, kuras jūs izmantojat,
- ieviest šo CSS sadalīšanu savās vietnēs.
Dalieties sociālajos tīklos vai saglabājiet vēlākam laikam:
Ja vēlaties lasīt vairāk par šo optimizāciju un pārlūkprogrammas uzvedību, lūdzu, skatiet šo:
- Vadina Makejeva raksts “Conditionally adaptive CSS. Browser behavior that might improve your performance“, Vadim Makeev. Šī raksta vāka ekrānuzņēmums ir ņemts no viņa izcilā raksta, kurā ir vairāk ekrānuzņēmumu un eksperimentu.
- MDN Web Docs: CSS veiktspējas optimizācija.