Minifikuj CSS

W sekcji Możliwości raportu Lighthouse znajdziesz listę wszystkich nieskompresowanych plików CSS wraz z potencjalnymi oszczędnościami w kibibajtach (KiB) po skompresowaniu tych plików:

Zrzut ekranu pokazujący audyt Lighthouse Minify CSS

Jak zminifikowanie plików CSS może poprawić wydajność

Minifikacja plików CSS może poprawić wydajność wczytywania strony. Pliki CSS często są większe, niż muszą być. Na przykład:

/* Header background should match brand colors. */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

Może zostać zmniejszona do:

h1,
h2 {
  background-color: #000000;
}

Z punktu widzenia przeglądarki te 2 przykłady kodu są równoważne pod względem funkcji, ale drugi przykład wykorzystuje mniej bajtów. Narzędzie do kompresji może jeszcze bardziej zwiększyć wydajność bajtów przez usunięcie spacji:

h1,
h2 {
  background-color: #000000;
}

Niektóre narzędzia do kompresji stosują sprytne sztuczki, aby zminimalizować liczbę bajtów. Na przykład wartość koloru #000000 można dalej skrócić do #000, co jest jego odpowiednikiem w skrótowej formie.

Lighthouse podaje szacowane oszczędności na podstawie komentarzy i znaków odstępu znalezionych w pliku CSS. Jest to ostrożna prognoza. Jak już wspomnieliśmy, minifikatory mogą przeprowadzić sprytną optymalizację (np. zmniejszyć #000000 do #000), aby jeszcze bardziej zmniejszyć rozmiar pliku. Jeśli więc używasz narzędzia do kompresji, możesz zaoszczędzić więcej miejsca niż podaje Lighthouse.

Zminifikuj kod CSS za pomocą narzędzia do minifikacji kodu CSS

W przypadku małych witryn, które nie są często aktualizowane, możesz ręcznie zminimalizować pliki, korzystając z usługi online. Wklej kod CSS w interfejsie usługi, co spowoduje zwrócenie kodu w wersji zminimalizowanej.

Jeśli jesteś profesjonalnym deweloperem, warto skonfigurować automatyczny przepływ pracy, który automatycznie minyfikuje pliki CSS przed wdrożeniem zaktualizowanego kodu. Można to zwykle robić za pomocą narzędzi do kompilacji, takich jak Gulp czy Webpack.

Dowiedz się, jak zminifikować kod CSS w Minify CSS.

Wskazówki dotyczące poszczególnych zbiorów

Drupal

Musisz mieć włączoną opcję „Aggregate CSS files” (Agreguj pliki CSS) na stronie „Administration » Configuration » Development” (Administracja » Konfiguracja » Programowanie).

Joomla

Kilka rozszerzeń Joomli może przyspieszyć działanie strony dzięki konkatenacji, minifikacji i kompresji stylów CSS. Istnieją też szablony z takimi funkcjami.

Magento

Włącz opcję Minify CSS Files (Minifikuj pliki CSS) w ustawieniach dewelopera swojego sklepu.

React

Jeśli Twój system kompilacji automatycznie minifikuje pliki CSS, upewnij się, że wdrażasz kompilację produkcyjną aplikacji. Możesz to sprawdzić za pomocą rozszerzenia Narzędzia dla programistów React.

WordPress

Kilka wtyczek WordPressa może przyspieszyć działanie strony dzięki konkatenacji, minifikacji i kompresji stylów. Jeśli masz taką możliwość, przeprowadź minifikację, zanim opublikujesz skrypty.

Zasoby