Kai CSS yra sujungiamas į vieną failą, net ir po „tree-shaking“ procedūros, jame vis tiek lieka daug nenaudojamo CSS dėl skirtingų @media kontekstų (mobiliesiems, planšetiniams, staliniams kompiuteriams, tamsioms/šviesioms/kitoms temoms ir pan.).
Tai kenkia pagrindiniams interneto gyvybingumo rodikliams: pirmojo įvesties uždelsimo (FID), didžiausio turinio nupiešimo (LCP), kumuliatyvaus maketo poslinkio (CLS), taip pat kitiems gyvybiškai svarbiems našumo ir naudojimo patogumo rodikliams: pirmajam turinio nupiešimui (FCP), bendram blokavimo laikui (TBT), laikui iki interaktyvumo (TTI) ir DOMContentLoaded įvykiui.
Yra būdas gerokai pagerinti CSS įkėlimą ir atvaizdavimą, atskiriant CSS į skirtingus failus, kurių kiekviename būtų tik tame kontekste reikalingas kodas.
Atskirkite savo CSS į skirtingus failus:
📄main.css - talpina CSS, reikalingą visoms @media sąlygoms
📄screen.css - talpina CSS, reikalingą tik ekrano @media sąlygai
📄print.css - talpina CSS, reikalingą tik spausdinimo @media sąlygai
📂breakpoints
📄x-small.css - talpina CSS, reikalingą tik itin mažam lūžio taškui
📄sm.css - talpina CSS, reikalingą tik mažam lūžio taškui
📄md.css - talpina CSS, reikalingą tik vidutiniam lūžio taškui
📄lg.css - talpina CSS, reikalingą tik dideliam lūžio taškui
📄xl.css - talpina CSS, reikalingą tik labai dideliam lūžio taškui
📄xxl.css - talpina CSS, reikalingą tik itin dideliam lūžio taškui
📂themes
📄light.css - talpina CSS, reikalingą tik šviesiai temai
📄dark.css - talpina CSS, reikalingą tik tamsiai temaiTada įkelkite CSS failus šitaip:
<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)">Taip pritaikius, modernios naršyklės prioritetizuoja CSS įkėlimą pagal dabartines @media sąlygas, todėl puslapio atvaizdavimas prasideda daug greičiau, nes vartotojams nereikia laukti, kol bus įkelta nenaudojama CSS dalis.
Tais atvejais, kai visą CSS turite sujungtą į vieną failą ir nenurodote sąlygų link žymių media atributuose, naršyklė laukia, kol bus įkeltas visas CSS rinkinys, prieš pradėdama puslapio atvaizdavimą. Tai drastiškai sulėtina puslapio atvaizdavimą.
Šiame pavyzdyje lūžio taškai yra pagrįsti Bootstrap 5. Šis metodas taps dar svarbesnis „Bootstrap“ netolimoje ateityje, atsižvelgiant į tai, kad jie planuoja pridėti šviesios/tamsios/kitų temų palaikymą.
Jei norite, kad internetas taptų geresnis ir spartesnis, prašome:
- pasidalinkite šiuo straipsniu,
- nusiųskite šį straipsnį naudojamų karkasų kūrėjams,
- įdiekite šį CSS atskyrimą savo svetainėse.
Dalinkitės socialiniuose tinkluose arba išsaugokite vėlesniam laikui:
Jei norite daugiau paskaityti apie šią optimizaciją ir naršyklės elgseną, peržiūrėkite šiuos šaltinius:
- Vadim Makeev straipsnį „Conditionally adaptive CSS. Browser behavior that might improve your performance“. Viršelio ekrano nuotrauka šiam straipsniui paimta iš jo puikaus straipsnio, kuriame jis pateikia daugiau ekrano nuotraukų ir eksperimentų.
- MDN Web Docs: CSS našumo optimizavimas.