Vaikka CSS olisi niputettu yhteen tiedostoon ja karsittu turhat osat (tree-shaking), se sisältää edelleen paljon käyttämätöntä CSS:ää eri @media-ehtojen (mobiili, tabletti, työpöytä, tumma/vaalea/muut teemat jne.) vuoksi.
Tämä on haitallista Core Web Vitals -mittareille: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) sekä muille tärkeille suorituskyky- ja käytettävyysmittareille: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI) ja DOMContentLoaded-tapahtuma.
CSS:n latausta ja renderöintiä voidaan parantaa merkittävästi erottamalla CSS eri tiedostoihin, joista jokainen sisältää vain kyseisessä kontekstissa tarvittavan koodin.
Jaa CSS-tiedostosi eri tiedostoihin:
📄main.css - sisältää CSS:ää, jota tarvitaan kaikissa @media-olosuhteissa
📄screen.css - sisältää CSS:ää, jota tarvitaan vain screen @media -olosuhteissa
📄print.css - sisältää CSS:ää, jota tarvitaan vain print @media -olosuhteissa
📂breakpoints
📄x-small.css - sisältää CSS:ää, jota tarvitaan vain X-Small-katkaisupisteessä
📄sm.css - sisältää CSS:ää, jota tarvitaan vain Small-katkaisupisteessä
📄md.css - sisältää CSS:ää, jota tarvitaan vain Medium-katkaisupisteessä
📄lg.css - sisältää CSS:ää, jota tarvitaan vain Large-katkaisupisteessä
📄xl.css - sisältää CSS:ää, jota tarvitaan vain Extra large -katkaisupisteessä
📄xxl.css - sisältää CSS:ää, jota tarvitaan vain Extra extra large -katkaisupisteessä
📂themes
📄light.css - sisältää CSS:ää, jota tarvitaan vain vaaleassa teemassa
📄dark.css - sisältää CSS:ää, jota tarvitaan vain tummassa teemassaLisää sitten CSS-tiedostot näin:
<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)">Tällä lähestymistavalla modernit selaimet priorisoivat CSS:n lataamisen nykyisille @media-ehdoille, joten sivun renderöinti alkaa paljon nopeammin, koska käyttäjien ei tarvitse odottaa käyttämättömän CSS-osan latautumista.
Jos kaikki CSS on niputettu yhteen tiedostoon eikä link-tagien media-attribuuteissa ole määritetty ehtoja, selain odottaa koko CSS-paketin latautumista ennen sivun renderöinnin aloittamista. Tämä hidastaa sivun renderöintiä huomattavasti.
Tämän esimerkin katkaisupisteet perustuvat Bootstrap 5:een. Tämä lähestymistapa tulee olemaan entistä tärkeämpi Bootstrapille pian, kun he lisäävät tuen vaaleille/tumille/muille teemoille.
Jos haluat tehdä webistä paremman ja nopeamman, toimi näin:
- jaa tämä artikkeli,
- lähetä tämä artikkeli käyttämiesi kehysten kehittäjille,
- ota tämä CSS:n erottelu käyttöön sivustoillasi.
Jaa sosiaalisessa mediassa tai tallenna myöhempää käyttöä varten:
Jos haluat lukea lisää tästä optimoinnista ja selaimen toiminnasta, tutustu seuraaviin:
- Vadim Makeevin artikkeli ”Conditionally adaptive CSS. Browser behavior that might improve your performance”. Tämän artikkelin kansikuva on otettu hänen erinomaisesta artikkelistaan, jossa hänellä on lisää kuvakaappauksia ja kokeita.
- MDN Web Docs: CSS:n suorituskyvyn optimointi.