Rozdělte své CSS do souborů podle @media dotazů pro výrazné zlepšení výkonu

Když je CSS svázáno do jednoho souboru, i po tree-shakingu stále obsahuje spoustu nepoužívaného CSS kvůli různým kontextům @media (mobilní telefony, tablety, počítače, tmavé/světlé/jiné motivy atd.).

Je to špatné pro Core Web Vitals: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), a také pro další důležité metriky výkonu a použitelnosti: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI) a událost DOMContentLoaded.

Existuje způsob, jak výrazně zlepšit načítání a vykreslování CSS oddělením CSS do různých souborů, kde každý soubor obsahuje pouze kód potřebný v daném kontextu.

Rozdělte své CSS do různých souborů:

📄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

Poté zahrňte CSS soubory takto:

<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 tímto přístupem moderní prohlížeče upřednostňují načítání CSS pro aktuální @media podmínky, takže vykreslování stránky začíná mnohem rychleji, protože uživatelé nemusí čekat na načtení nepoužívané části CSS.
V případech, kdy máte veškeré CSS svázané v jednom souboru a nespecifikujete podmínky v atributech media u tagů link, prohlížeč čeká na načtení celé sady CSS, než začne vykreslovat stránku. Což drasticky zpomaluje vykreslování stránky.

Breakpointy v tomto příkladu jsou založeny na Bootstrapu 5. Tento přístup bude brzy ještě důležitější pro Bootstrap, vzhledem k tomu, že přidají podporu světlých/tmavých/jiných motivů.

Pokud chcete, aby byl web lepší a rychlejší, prosím:

• sdílejte tento článek,
• pošlete tento článek vývojářům frameworků, které používáte,
• implementujte toto rozdělení CSS na svých stránkách.

📃 Klikněte zde pro zkopírování odkazu do schránky.

Share on social media or save for later:

Pokud si chcete přečíst více o této optimalizaci a chování prohlížeče, podívejte se prosím na následující:

• Článek „Conditionally adaptive CSS. Browser behavior that might improve your performance“ od Vadima Makeeva. Úvodní snímek obrazovky pro tento článek pochází z jeho vynikajícího článku, kde má více snímků obrazovky a experimentů.
• MDN Web Docs: Optimalizace výkonu CSS.