Razdvojite svoj CSS u datoteke povezane s @media upitima kako biste značajno poboljšali performanse

Kada je CSS spojen u jednu datoteku, čak i nakon “tree-shakinga”, i dalje sadrži puno neiskorištenog CSS-a zbog različitih @media konteksta (mobilni uređaji, tableti, računala, tamne/svijetle/druge teme itd.).

Loše je za Core Web Vitals pokazatelje: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), kao i ostale vitalne metrike performansi i upotrebljivosti: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI) i DOMContentLoaded event.

Postoji način za značajno poboljšanje učitavanja i prikazivanja CSS-a razdvajanjem CSS-a u različite datoteke, gdje svaka datoteka sadrži samo kôd potreban u tom kontekstu.

Razdvojite svoj CSS u različite datoteke:

📄main.css        - contains CSS needed for all @media conditions
📄screen.css      - contains CSS needed only for screen @media condition
📄print.css       - contains CSS needed only for print @media condition
📂breakpoints
    📄x-small.css - contains CSS needed only for X-Small breakpoint
    📄sm.css      - contains CSS needed only for Small breakpoint
    📄md.css      - contains CSS needed only for Medium breakpoint
    📄lg.css      - contains CSS needed only for Large breakpoint
    📄xl.css      - contains CSS needed only for Extra large breakpoint
    📄xxl.css     - contains CSS needed only for Extra extra large breakpoint
📂themes
    📄light.css   - contains CSS needed only for light theme
    📄dark.css    - contains CSS needed only for dark theme

Zatim, uključite CSS datoteke na ovaj nač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)">

Ovim pristupom moderni preglednici daju prioritet učitavanju CSS-a za trenutne @media uvjete, tako da prikaz stranice započinje puno brže jer korisnici ne moraju čekati učitavanje neiskorištenog dijela CSS-a.
U slučajevima kada imate sav CSS spojen u jednu datoteku i ne navedete uvjete u media atributima `link` oznaka, preglednik čeka da se učita cijeli skup CSS-a prije nego što započne prikaz stranice. Što drastično usporava prikaz stranice.

Prijelomne točke u ovom primjeru temelje se na Bootstrapu 5. Ovaj pristup uskoro će postati još važniji za Bootstrap s obzirom na to da će dodati podršku za svijetle/tamne/druge teme.

Ako želite učiniti web boljim i bržim, molim vas:

• podijelite ovaj članak,
• pošaljite ovaj članak razvojnim programerima okvira koje koristite,
• implementirajte ovo razdvajanje CSS-a na svojim stranicama.

📃 Kliknite ovdje za kopiranje poveznice u međuspremnik.

Podijelite na društvenim mrežama ili spremite za kasnije:

Ako želite pročitati više o ovoj optimizaciji i ponašanju preglednika, pogledajte sljedeće:

• Članak “Conditionally adaptive CSS. Browser behavior that might improve your performance” autora Vadima Makeeva. Naslovni snimak zaslona za ovaj članak preuzet je iz njegovog izvrsnog članka, u kojem ima više snimaka zaslona i eksperimenata.
• MDN Web Docs: Optimizacija performansi CSS-a.