optymalizacja wydajności pliku style.css

Aby przyspieszyć ładowanie stron internetowych warto pochylić się nad plikami styli css. Ich rozmiar i sposób ładowania też mają znaczenie, o to kilka przydatnych informacji:

• całkowity CSS w granicach 100–300 KB jest do zaakceptowania dla większości stron,
• Critical CSS (czyli ten potrzebny do pierwszego widoku) był możliwie mały – np. <50 KB,
• plik CSS powinien być zminifikowany (bez spacji, komentarzy)
• dobrze, jeśli serwer używa kompresji gzip/brotli,
• plik CSS nie zawiera masy nieużywanego kodu

Sprawdź realny rozmiar pliku CSS w transferze (po gzip):

1. Otwórz swoją stronę w przeglądarce Chrome
2. Kliknij F12 → zakładka Network (Sieć)
3. Odśwież stronę (F5)
4. Na liście plików znajdź style.css
5. W kolumnie headers zobaczysz wartości:
   • Content-length – rozmiar realnie pobrany z serwera (po kompresji gzip/brotli) wyrażony w bajtach,
   • Content-Encoding: gzip – sposób w jaki plik jest kompresowany.

Metoda media=”print”

function theme_enqueue_styles() {
    // Główne style - załadują się asynchronicznie
    wp_enqueue_style('main-style', get_template_directory_uri() . '/css/main.css', array(), null);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

// Dodajemy JS do zmiany media
function async_css_loader($html, $handle, $href, $media) {
    if ($handle === 'main-style') {
        $html = "<link rel='stylesheet' href='$href' media='print' onload=\"this.media='all'\">";
    }
    return $html;
}
add_filter('style_loader_tag', 'async_css_loader', 10, 4);

PageSpeed Insights / Lighthouse

Wejdź na pagespeed.web.dev, wpisz adres testowanej strony.
W raporcie znajdziesz sekcję Unused CSS / Unused JavaScript. Tam zobaczysz, ile Twojego CSS faktycznie jest używane, a ile to „martwy kod”.

Możesz to również sprawdzić w Chrome DevTools → zakładka Coverage

Dobra praktyka – critical.css

Critical CSS to temat, który mocno wpływa na to, jak użytkownicy odczuwają szybkość ładowania strony (nawet jeśli cały CSS waży ok 200 KB).

Czym jest Critical CSS?

To mały wycinek CSS, który jest potrzebny do wyrenderowania pierwszego widoku strony (above the fold = to, co użytkownik widzi bez scrollowania).

Reszta CSS (np. dla stopki, rozwijanych menu, zakładek) może załadować się później, asynchronicznie.

Co powinno się znaleźć w Critical CSS?

Najważniejsze elementy widoczne od razu po załadowaniu strony:

• układ strony (layout) → np. grid, flexbox dla głównych kontenerów,
• nagłówek i menu główne (logo, nawigacja),
• podstawowa typografia (font-family, rozmiary, kolory nagłówków i paragrafów),
• kolory tła i elementy brandingowe (żeby użytkownik nie widział „białej strony” w trakcie ładowania),
• hero / banner jeśli masz na górze strony obrazek lub blok wprowadzający,
• podstawowe przyciski i linki (żeby były od razu widoczne jako klikalne).

Nie zamieszczaj tego w Critical CSS

• style do stopki,
• style dla formularzy, dropdownów, zakładek, modali (bo nie są widoczne od razu),
• specjalne sekcje niżej na stronie.

Optymalny podział CSS

Opcja A – Najprostsza (manualna)

• wyciągnij ręcznie do osobnego pliku critical.css style, które są konieczne do załadowania nagłówka i pierwszego ekranu,
• w head strony umieść inline (wewnątrz style) , żeby były natychmiast dostępne,
• resztę CSS (style.css) załaduj normalnie lub nawet z atrybutem media=”print” + JS do przełączenia (tzw. lazy load).

Opcja B – Automatyczna (narzędzia)

• narzędzia (np. Critical, Penthouse, PurifyCSS), które potrafią wyciągnąć CSS potrzebny dla konkretnej podstrony,
• idealne, jeśli masz wiele stron (bo każda może mieć trochę inne „critical”).

Strategia podziału CSS w praktyce (np. w WordPress)

Globalny Critical CSS:

• nagłówek (logo, nawigacja),
• podstawowe kolory + typografia.

Reszta podzielona modułowo:

• layout.css – ogólne siatki i układ,
• components.css – przyciski, formularze, widgety,
• pages.css – specyficzne style dla wybranych widoków.

Dzięki temu unikniesz sytuacji, że jeden gigantyczny plik ładuje się zawsze i wszędzie.

Zamieszczanie styli w WordPress

podejście:

• Critical CSS → wstawiasz inline w(żeby przeglądarka miała go natychmiast).
• Reszta CSS → ładujesz normalnie, ale asynchronicznie, żeby nie blokować renderowania.

1. Inline Critical CSS w head w np. header.php wstawiasz w znaczniku html style include get_template_directory() . '/css/critical.css’; – dzięki temu style dla nagłówka, layoutu i typografii są dostępne od razu
2. ładowanie reszty CSS asynchronicznie
   normalnie WordPress ładuje CSS wza pomocą wp_enqueue_style(), co blokuje renderowanie, możesz to obejść na dwa sposoby:

1. Metoda media=”print” – dodajesz CSS z media=”print”, a potem JS zmienia to na all (hack, ale działa i jest popularny)
2. Wczytanie CSS po załadowaniu strony (jeszcze lżejsze), możesz też załadować CSS dopiero po DOMContentLoaded

Efekt

Pierwszy widok strony wyrenderuje się od razu (użytkownik widzi „ładną stronę” w <1s).

Reszta CSS może ładować się w tle — nie wpływa to na odbiór szybkości.

Weryfikacja nie używanego kodu w pliku style.css

1. otwórz stronę w Chrome,
2. uruchom DevTools (F12),
3. otwórz menu → More tools → Coverage – albo użyj skrótu Ctrl + Shift + P (Windows) / Cmd + Shift + P (Mac) → wpisz Coverage i wybierz Show Coverage,
4. pojawi Ci się nowe okienko w dolnym panelu DevTools,
5. kliknij przycisk „start instrumenting coverage and reload page” (zaokrąglona strzałka),
6. chrome przeanalizuje wszystkie pliki CSS i JS, tabeli zobaczysz:
   • URL pliku (np. main.min.css)
   • Used Bytes / Total Bytes → ile CSS zostało faktycznie użyte, pasek kolorów:
     • zielone fragmenty = używany kod,
     • czerwone fragmenty = nieużywany kod.