Optymalizacja CSS
Critical CSS, eliminacja render-blocking CSS, minifikacja
Dlaczego optymalizować CSS?
CSS może blokować renderowanie strony, opóźniając First Contentful Paint (FCP) i Largest Contentful Paint (LCP). Nieoptymalizowany CSS może również zwiększać rozmiar strony i spowalniać ładowanie.
Główne problemy: render-blocking CSS, zbyt duże pliki, nieużywane style, brak critical CSS inline, brak minifikacji.
Techniki optymalizacji
1. Critical CSS inline
Umieść krytyczny CSS (stylowanie above-the-fold) bezpośrednio w <head> jako inline, a pozostały CSS załaduj asynchronicznie.
<head>
<!-- Critical CSS inline -->
<style>
/* Styles dla above-the-fold content */
body { margin: 0; font-family: Arial; }
header { background: #000; }
</style>
<!-- Non-critical CSS asynchronicznie -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>Narzędzia do ekstrakcji critical CSS: Critical, Penthouse, criticalCSS
2. Minifikacja CSS
Zmniejsz rozmiar pliku poprzez usunięcie białych znaków, komentarzy i optymalizację.
❌ Przed minifikacją:
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}✅ Po minifikacji:
.container{width:100%;max-width:1200px;margin:0 auto;padding:20px}Narzędzia: cssnano, clean-css, csso
3. Usuń nieużywany CSS
Nieużywany CSS zwiększa rozmiar pliku niepotrzebnie. Usuń go przed produkcją.
- PurgeCSS - automatycznie usuwa nieużywany CSS
- uncss - analizuje HTML i usuwa nieużywane style
- Chrome DevTools - Coverage tab pokazuje nieużywany CSS
4. CSS-in-JS i code splitting
Wykorzystaj code splitting dla CSS, szczególnie w aplikacjach JavaScript:
- Ładuj CSS tylko dla renderowanych komponentów
- Użyj dynamic imports dla CSS modułów
- Unikaj importowania całych bibliotek CSS (np. Bootstrap) - importuj tylko potrzebne moduły
5. Unikaj @import
@import w CSS blokuje renderowanie. Użyj <link> zamiast tego:
❌ Źle:
<style>
@import url('styles.css');
</style>✅ Dobrze:
<link rel="stylesheet" href="styles.css">
6. Media queries i conditional loading
Ładuj CSS tylko gdy jest potrzebny, używając media queries w atrybucie media:
<!-- CSS dla print - nie blokuje renderowania --> <link rel="stylesheet" href="print.css" media="print"> <!-- CSS dla mobile - ładuje się tylko na mobile --> <link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">
Checklista optymalizacji CSS
Krytyczny CSS
- Wyodrębnij critical CSS i umieść inline w <head>
- Załaduj non-critical CSS asynchronicznie
- Użyj preload dla krytycznych fontów
Rozmiar i czystość
- Minifikuj CSS w produkcji
- Usuń nieużywany CSS (PurgeCSS)
- Kompresuj CSS (Gzip/Brotli)
- Unikaj @import - używaj <link>