CSS-i @media-failidesse jagamine parandab märkimisväärselt jõudlust

Kui CSS on kokku pandud ühte faili, sisaldab see isegi pärast raputamist (tree-shaking) endiselt palju kasutamata CSS-i erinevate @media kontekstide tõttu (mobiil, tahvelarvuti, lauaarvuti, tume/hele/muud teemad jne).

See on halb Core Web Vitalsi jaoks: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), aga ka teised olulised jõudluse ja kasutatavuse mõõdikud: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI) ja DOMContentLoaded sündmus.

On olemas viis, kuidas CSS-i laadimist ja renderdamist märkimisväärselt parandada, jagades CSS-i erinevatesse failidesse, kus iga fail sisaldab ainult selles kontekstis vajalikku koodi.

Jaga oma CSS erinevatesse failidesse:

📄main.css        - sisaldab CSS-i, mida on vaja kõikide @media tingimuste jaoks
📄screen.css      - sisaldab CSS-i, mida on vaja ainult screen @media tingimuse jaoks
📄print.css       - sisaldab CSS-i, mida on vaja ainult print @media tingimuse jaoks
📂breakpoints
    📄x-small.css - sisaldab CSS-i, mida on vaja ainult X-Small murdepunkti jaoks
    📄sm.css      - sisaldab CSS-i, mida on vaja ainult Small murdepunkti jaoks
    📄md.css      - sisaldab CSS-i, mida on vaja ainult Medium murdepunkti jaoks
    📄lg.css      - sisaldab CSS-i, mida on vaja ainult Large murdepunkti jaoks
    📄xl.css      - sisaldab CSS-i, mida on vaja ainult Extra large murdepunkti jaoks
    📄xxl.css     - sisaldab CSS-i, mida on vaja ainult Extra extra large murdepunkti jaoks
📂themes
    📄light.css   - sisaldab CSS-i, mida on vaja ainult heleda teema jaoks
    📄dark.css    - sisaldab CSS-i, mida on vaja ainult tumeda teema jaoks

Seejärel lisa CSS-failid näiteks nii:

<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)">

Selle lähenemisviisi korral panevad kaasaegsed brauserid CSS-i laadimisele prioriteedi praeguste @media tingimuste jaoks, nii et lehe renderdamine algab palju kiiremini, sest kasutajad ei pea ootama kasutamata CSS-i osa laadimist.
Juhtudel, kui sul on kogu CSS ühes failis ja sa ei määra tingimusi link-tagide media atribuutides, ootab brauser kogu CSS-i laadimist enne lehe renderdamise alustamist. See aga aeglustab lehe renderdamist drastiliselt.

Murdepunktid selles näites põhinevad Bootstrap 5-l. See lähenemine muutub Bootstrapi jaoks peagi veelgi olulisemaks, arvestades, et nad lisavad toe heledatele/tumetele/muudele teemadele.

Kui sa soovid muuta veebi paremaks ja kiiremaks, siis palun:

• jaga seda artiklit,
• saada see artikkel nende raamistike arendajatele, mida sa kasutad,
• rakenda seda CSS-i eraldamist oma saitidel.

📃 Klõpsa siia, et link lõikelauale kopeerida.

Jaga sotsiaalmeedias või salvesta hilisemaks:

Kui sa soovid selle optimeerimise ja brauseri käitumise kohta rohkem lugeda, siis vaata järgmist:

• Artikkel “Conditionally adaptive CSS. Browser behavior that might improve your performance” autor Vadim Makeev. Selle artikli kaanepilt on võetud tema suurepärasest artiklist, kus tal on rohkem ekraanipilte ja katseid.
• MDN Web Docs: CSS performance optimization.