Razdelite CSS v datoteke, povezane z @media, za znatno izboljšanje učinkovitosti

Ko je CSS združen v eno datoteko, tudi po odstranjevanju neuporabljenega CSS-a, še vedno vsebuje veliko neuporabljenega CSS-a zaradi različnih kontekstov @media (mobilni, tablični računalnik, namizni računalnik, temne/svetle/druge teme itd.).

To negativno vpliva na ključne spletne meritve: zakasnitev prvega vnosa (FID), največje slikarsko izrisovanje vsebine (LCP), kumulativni premik postavitve (CLS), kot tudi druge ključne meritve učinkovitosti in uporabnosti: prvo slikarsko izrisovanje vsebine (FCP), skupni čas blokiranja (TBT), čas do interaktivnosti (TTI) in dogodek DOMContentLoaded.

Obstaja način, kako znatno izboljšati nalaganje in upodabljanje CSS-ja z razdelitvijo CSS-ja v različne datoteke, kjer vsaka datoteka vsebuje samo kodo, potrebno v določenem kontekstu.

Razdelite svoj CSS v različne datoteke:

📄main.css        - vsebuje CSS, potreben za vse pogoje @media
📄screen.css      - vsebuje CSS, potreben samo za pogoj @media za zaslon
📄print.css       - vsebuje CSS, potreben samo za pogoj @media za tiskanje
📂breakpoints
    📄x-small.css - vsebuje CSS, potreben samo za prelomno točko X-Small
    📄sm.css      - vsebuje CSS, potreben samo za prelomno točko Small
    📄md.css      - vsebuje CSS, potreben samo za prelomno točko Medium
    📄lg.css      - vsebuje CSS, potreben samo za prelomno točko Large
    📄xl.css     - vsebuje CSS, potreben samo za prelomno točko Extra large
    📄xxl.css     - vsebuje CSS, potreben samo za prelomno točko Extra extra large
📂themes
    📄light.css   - vsebuje CSS, potreben samo za svetlo temo
    📄dark.css    - vsebuje CSS, potreben samo za temno temo

Nato vključite datoteke CSS takole:

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

S tem pristopom sodobni brskalniki dajejo prednost nalaganju CSS-ja za trenutne pogoje @media, zato se upodabljanje strani začne veliko hitreje, ker uporabnikom ni treba čakati na nalaganje neuporabljenega dela CSS-ja.
V primerih, ko imate ves CSS združen v eni datoteki in ne določite pogojev v atributih media oznak link, brskalnik čaka, da se naloži celoten nabor CSS-ja, preden začne z upodabljanjem strani. To drastično upočasni upodabljanje strani.

Prekinitvene točke v tem primeru temeljijo na Bootstrap 5. Ta pristop bo kmalu postal še pomembnejši za Bootstrap, saj bodo dodali podporo za svetle/temne/druge teme.

Če želite izboljšati in pospešiti splet, vas prosimo, da:

• delite ta članek,
• pošljete ta članek razvijalcem ogrodij, ki jih uporabljate,
• uvedete to ločevanje CSS-ja na svojih spletnih mestih.

📃 Kliknite tukaj za kopiranje povezave v odložišče.

Delite na družbenih medijih ali shranite za pozneje:

Če želite izvedeti več o tej optimizaciji in obnašanju brskalnika, si oglejte naslednje:

• Članek “Conditionally adaptive CSS. Browser behavior that might improve your performance” avtorja Vadima Makeeva. Naslovna slika tega članka je posneta iz njegovega odličnega članka, kjer ima več posnetkov zaslona in poskusov.
• MDN Web Docs: Optimizacija učinkovitosti CSS-ja.