Minifikacja CSS

Silktide sprawdza, czy arkusze stylów pobierane przez Twoją stronę zostały zminifikowane — czyli przepisane tak, aby usunąć odstępy, komentarze i powtórzenia, które mają znaczenie tylko dla osób czytających kod. Niezminifikowane arkusze stylów są większe, niż powinny, przez co strona wyświetla się wolniej.

nie zmienia wyglądu strony. Na przykład:

/* Przed minifikacją: czytelne, ale ciężkie */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

/* Po: identyczny efekt, ułamek rozmiaru */
h1,h2{background-color:#000}

Dlaczego to ważne

Arkusze stylów zwykle blokują renderowanie: przeglądarka pobiera strony, zanim cokolwiek wyświetli, więc każdy zbędny bajt w arkuszu stylów bezpośrednio wydłuża czas pustego ekranu przed pojawieniem się strony. Minifikacja zazwyczaj znacząco zmniejsza rozmiar arkusza stylów, a oszczędność powtarza się dla każdego odwiedzającego przy każdym wyświetleniu strony bez danych z pamięci podręcznej.

Ponieważ minifikacja jest automatyczna i nie zmienia działania strony, niezminifikowane produkcyjne arkusze stylów są niemal zawsze przeoczeniem: pominiętym krokiem kompilacji lub omyłkowo wdrożonymi plikami deweloperskimi.

Jak to naprawić

Włącz minifikację CSS w procesie kompilacji witryny. Każde nowoczesne narzędzie do kompilacji zawiera minifikator, zwykle domyślnie włączony w kompilacjach produkcyjnych.
Jeśli witryna nie ma procesu kompilacji, sprawdź : większość systemów ma ustawienie lub wtyczkę, która automatycznie minifikuje arkusze stylów.
W ostateczności przetwórz pliki przez samodzielny minifikator przed ich przesłaniem. Zachowaj czytelne oryginały — je edytujesz, a publikujesz zminifikowane wyniki.
Jeśli zgłoszony arkusz stylów należy do strony trzeciej, sprawdź, czy oferuje ona zminifikowaną wersję — większość je oferuje.

Jak Silktide to testuje

Ładuje stronę w rzeczywistej przeglądarce, używając typu urządzenia, szybkości połączenia i lokalizacji testowej skonfigurowanych dla testów szybkości.
Analizuje każdy arkusz stylów pobierany przez stronę i szacuje, o ile mniejszy byłby po minifikacji.
Zgłasza każdy plik z istotną możliwą oszczędnością i ocenia stronę na podstawie sumy: około 50 KB potencjalnych oszczędności obniża ocenę, a 250 KB lub więcej jest oceniane jako słabo.

Rozwiązywanie problemów

Plik już wygląda na zminifikowany

Minifikatory różnią się stopniem agresywności, więc lekko skompaktowany arkusz stylów nadal może zawierać istotne możliwe oszczędności. Kontrola wskazuje, o ile mniejszy mógłby być plik; przepuszczenie go przez aktualny minifikator zwykle pozwala uzyskać tę różnicę.

Potrzebujemy czytelnych stylów do debugowania

Przechowuj czytelne pliki źródłowe w projekcie i debuguj za pomocą map źródeł, które pozwalają narzędziom deweloperskim przeglądarki wyświetlać oryginalne style, podczas gdy odwiedzający otrzymują zminifikowaną wersję. Nie musisz nigdy udostępniać czytelnego kodu, aby móc wygodnie debugować.