Kompresja CSS

Zmniejsz swoje arkusze stylów

CSS blokuje renderowanie: przeglądarka nie narysuje strony, dopóki nie pobierze i nie przetworzy arkuszy stylów z sekcji <head>. Dlatego rozmiar CSS bezpośrednio wpływa na to, jak szybko pojawia się strona. Narzędzie usuwa komentarze, białe znaki, znaki nowego wiersza i inne znaki, których przeglądarki nie potrzebują, oraz pokazuje liczbę znaków przed i po.

Style działają dokładnie tak samo; plik jest po prostu mniejszy. Idealne do własnego CSS w motywach WordPress, Shopify czy AltumCode, małych projektów bez narzędzia do budowania i wbudowanego krytycznego CSS.

Zachowaj czytelny oryginał do przyszłych zmian, a wdrażaj zminifikowaną kopię.

Jak korzystać z kompresji CSS

1. Wklej swój CSS.
2. Wyślij, aby go zminifikować.
3. Porównaj liczbę znaków przed i po.
4. Skopiuj zminifikowany CSS na stronę lub do pliku.

Przykłady

Style przycisku

Dane wejściowe:

/* Buttons */
.btn {
  color: #ffffff;
  margin: 0px 0px 10px 0px;
  background-color: #8997BB;
}

.btn:hover {
  opacity: 0.80;
}

Wynik:

.btn{color:#fff;margin:0 0 10px;background-color:#8997bb}.btn:hover{opacity:.8}

Komentarz i spacje znikają, #ffffff skraca się do #fff, 0px staje się 0, powtórzona wartość marginesu jest scalana, a 0.80 staje się .8.

Typowe zastosowania

• Minifikacja własnego CSS dodanego w panelu motywu lub ustawieniach CMS.
• Zmniejszanie arkuszy stylów małych stron i landing page.
• Przygotowanie wbudowanego krytycznego CSS dla szybszego pierwszego wyświetlenia.
• Kompresja CSS w szablonach e-maili HTML.
• Zmniejszenie arkusza stylów strony bez procesu budowania, np. małej strony statycznej lub landing page.
• Przygotowanie krytycznego CSS do wstawienia w sekcji <head> strony.
• Zmniejszenie rozmiaru własnego CSS wklejanego do CMS lub kreatora stron.

Wskazówki i ważne informacje

• Najpierw usuń nieużywane reguły; usunięcie CSS oszczędza więcej niż jego minifikacja.
• Komentarze, których potrzebujesz (np. informacje o licencji), zachowaj w pliku źródłowym i sprawdź, czy przetrwały.
• Przetestuj stronę po wdrożeniu, zwłaszcza jeśli Twój CSS zawiera nietypowe hacki.
• Minifikuj też HTML i skrypty za pomocą kompresji HTML i kompresji JS. Wartości kolorów sprawdzisz konwerterem kolorów.

Przypadki szczególne i ograniczenia

• Wynik to jedna długa linia, w której trudno znaleźć błędy. Zachowaj czytelny plik źródłowy i minifikuj kopię.
• Komentarze są usuwane, łącznie z komentarzami licencyjnymi. Dodaj z powrotem wymagane informacje o autorach.
• Niepoprawny CSS może zostać usunięty lub zmieniony. Jeśli coś wygląda źle po minifikacji, sprawdź w oryginale, czy nie brakuje nawiasu klamrowego lub średnika.

Najczęściej zadawane pytania

Co robi minifikacja CSS?

Usuwa z CSS zbędne znaki, takie jak białe znaki i komentarze, bez zmiany działania stylów.

Czy zminifikowany CSS jest szybszy?

Tak, mniejsze pliki szybciej się pobierają i przetwarzają, dzięki czemu strona wyświetla się wcześniej.

Czy mogę cofnąć minifikację CSS?

Możesz go ponownie sformatować narzędziem do upiększania kodu, ale usuniętych komentarzy nie da się odzyskać. Zachowaj oryginalny plik.

Czy minifikować CSS, jeśli używam gzip lub Brotli?

Tak. Kompresja i minifikacja działają razem, dając najmniejszy rozmiar transferu.

Czy minifikacja zmienia wygląd mojej strony?

Nie powinna. Usuwane są tylko znaki ignorowane przez przeglądarki, a wartości skracane do równoważnych form, np. #fff.

Powiązane narzędzia

• Kompresja HTML: Zminifikuj HTML, usuwając wszystkie zbędne znaki.
• Kompresja JS: Zminifikuj JS, usuwając wszystkie zbędne znaki.
• Konwerter kolorów: Zamień kolor na wiele innych formatów.
• Kalkulator rozmiaru tekstu: Sprawdź rozmiar tekstu w bajtach (B), kilobajtach (KB) lub megabajtach (MB).
• Test HTTP/2: Sprawdź, czy strona korzysta z nowego protokołu HTTP/2.