Kiedy CSS jest spakowany w jeden plik, nawet po tree-shakingu, nadal zawiera dużo nieużywanego CSS z powodu różnych kontekstów @media (mobile, tablet, desktop, motywy jasne/ciemne/inne, itp.).
Jest to niekorzystne dla Core Web Vitals: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), a także innych kluczowych metryk wydajności i użyteczności: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI) i zdarzenie DOMContentLoaded.
Istnieje sposób na znaczące poprawienie ładowania i renderowania CSS poprzez rozdzielenie CSS na różne pliki, gdzie każdy plik zawiera tylko kod potrzebny w danym kontekście.
Rozdziel swój CSS na różne pliki:
📄main.css - zawiera CSS potrzebny dla wszystkich warunków @media
📄screen.css - zawiera CSS potrzebny tylko dla warunku @media screen
📄print.css - zawiera CSS potrzebny tylko dla warunku @media print
📂breakpoints
📄x-small.css - zawiera CSS potrzebny tylko dla breakpointu X-Small
📄sm.css - zawiera CSS potrzebny tylko dla breakpointu Small
📄md.css - zawiera CSS potrzebny tylko dla breakpointu Medium
📄lg.css - zawiera CSS potrzebny tylko dla breakpointu Large
📄xl.css - zawiera CSS potrzebny tylko dla breakpointu Extra large
📄xxl.css - zawiera CSS potrzebny tylko dla breakpointu Extra extra large
📂themes
📄light.css - zawiera CSS potrzebny tylko dla motywu jasnego
📄dark.css - zawiera CSS potrzebny tylko dla motywu ciemnegoNastępnie, dołącz pliki CSS w ten sposób:
<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)">Dzięki temu podejściu nowoczesne przeglądarki priorytetyzują ładowanie CSS dla bieżących warunków @media, dzięki czemu renderowanie strony rozpoczyna się znacznie szybciej, ponieważ użytkownicy nie muszą czekać na załadowanie nieużywanej części CSS.
W przypadkach, gdy masz cały CSS spakowany w jednym pliku i nie określasz warunków w atrybutach media tagów link, przeglądarka czeka na załadowanie całego zestawu CSS przed rozpoczęciem renderowania strony. Co drastycznie spowalnia renderowanie strony.
Punkty przerwania w tym przykładzie są oparte na Bootstrap 5. To podejście stanie się jeszcze ważniejsze dla Bootstrapa wkrótce, biorąc pod uwagę, że dodadzą obsługę motywów jasnych/ciemnych/innych.
Jeśli chcesz uczynić internet lepszym i szybszym, proszę:
- udostępnij ten artykuł,
- wyślij ten artykuł do programistów frameworków, których używasz,
- zaimplementuj to rozdzielenie CSS na swoich stronach.
Share on social media or save for later:
Jeśli chcesz dowiedzieć się więcej o tej optymalizacji i zachowaniu przeglądarki, zapoznaj się z poniższymi:
- Artykuł „Conditionally adaptive CSS. Browser behavior that might improve your performance” autorstwa Vadim Makeev. Zrzut ekranu na okładkę tego artykułu pochodzi z jego znakomitego artykułu, w którym ma więcej zrzutów ekranu i eksperymentów.
- MDN Web Docs: Optymalizacja wydajności CSS.