Wszystkie artykuły

Minifikacja CSS: co dokładnie jest usuwane z pliku i po co

Minifikacja CSS zmniejsza rozmiar pliku, nie zmieniając w niczym sposobu, w jaki interpretuje go przeglądarka — style pozostają dokładnie takie same, znika tylko to, co istniało wyłącznie z myślą o czytelności kodu dla człowieka.

Co dokładnie zostaje usunięte

Minifikator usuwa białe znaki i podziały linii między regułami, komentarze w formacie /* ... */, ostatni średnik przed zamykającym nawiasem klamrowym bloku oraz skraca zbędne zera w wartościach typu 0.5em.5em. Żaden z tych kroków nie dotyka samej zawartości znakowej — tylko białych znaków i interpunkcji dookoła niej.

Polskie znaki diakrytyczne w CSS i deklaracja @charset

Wartość taka jak content: "→" czy komentarz zawierający polskie znaki ("ą", "ę", "ż") przechodzi przez minifikację bez żadnej zmiany — narzędzie operuje na białych znakach, komentarzach i składni, a nie na bajtowym kodowaniu tekstu. Uwagę warto zwrócić na starsze narzędzia lub pipeline'y budujące, które łączą wiele plików CSS w jeden i mogą niesłusznie zakładać kodowanie inne niż UTF-8. Dla pliku CSS z polskimi znakami najbezpieczniej jest zapisać go w UTF-8 i dodać jawną deklarację @charset "UTF-8"; jako pierwszą linię pliku, przed wszystkim innym, łącznie z komentarzami.

Dlaczego zminifikowany plik działa dokładnie tak samo

Parser CSS w przeglądarce całkowicie ignoruje białe znaki i podziały linii między tokenami — istnieją one wyłącznie po to, by ułatwić czytanie kodu człowiekowi. Ich usunięcie w żaden sposób nie zmienia więc obliczonych stylów, a jedynie sprawia, że plik staje się bardziej zwarty.

Do czego się to przydaje

  • Zmniejszenie rozmiaru pliku CSS przed wdrożeniem strony na produkcję.
  • Przyspieszenie ładowania strony dzięki mniejszej ilości przesyłanych danych.
  • Utrudnienie pobieżnego odczytania struktury stylów z kodu źródłowego.

Minifikacja w kontekście łączy stacjonarnych i mobilnych w Europie Środkowej

W Polsce i regionie dostęp do stałych łączy szerokopasmowych jest dziś powszechny, więc kilka kilobajtów mniej w pliku CSS rzadko robi różnicę odczuwalną przez pojedynczego użytkownika na własnej sieci domowej. Znaczenie minifikacji rośnie za to przy większej skali — przy dużym ruchu na stronie mniejsze pliki oznaczają realnie niższe zużycie transferu i koszty CDN po stronie serwera, a część ruchu z sieci mobilnych wciąż korzysta na mniejszym rozmiarze plików bezpośrednio. To optymalizacja tania we wdrożeniu, więc nie ma dobrego powodu, by z niej rezygnować.

Wypróbuj narzędzie