Usuń nieużywany kod CSS

W sekcji Możliwości raportu Lighthouse znajdziesz listę wszystkich arkuszy stylów z nieużywanym kodem CSS, w przypadku których można uzyskać potencjalne oszczędności na poziomie co najmniej 2 KiB. Usuń nieużywany kod CSS, aby zmniejszyć ilość danych przesyłanych w sieci:

Zrzut ekranu pokazujący audyt Lighthouse dotyczący usuwania nieużywanego kodu CSS

Jak nieużywany kod CSS spowalnia działanie

Używanie tagu <link> to typowy sposób dodawania stylów do strony:

<!DOCTYPE html>
<html>
  <head>
    <link href="main.css" rel="stylesheet" />
    ...
  </head>
</html>

Plik main.css, który pobiera przeglądarka, jest nazywany zewnętrzną arkusz stylów, ponieważ jest przechowywany oddzielnie od kodu HTML, który go używa.

Domyślnie przeglądarka musi pobrać, przeanalizować i przetworzyć wszystkie zewnętrzne arkusze stylów, które napotka, zanim będzie mogła wyświetlić lub wyrenderować dowolne treści na ekranie użytkownika. Nie ma sensu, aby przeglądarka próbowała wyświetlić zawartość przed przetworzeniem arkuszy stylów, ponieważ mogą one zawierać reguły wpływające na styl strony.

Każda zewnętrzna szata graficzna musi być pobrana z sieci. Te dodatkowe przejścia przez sieć mogą znacznie wydłużyć czas oczekiwania użytkowników na wyświetlenie treści na ekranie.

Nieużywany kod CSS spowalnia też tworzenie przez przeglądarkę drzewa renderowania. Drzewo renderowania jest podobne do drzewa DOM, ale zawiera też style każdego węzła. Aby utworzyć drzewo renderowania, przeglądarka musi przejść przez całe drzewo DOM i sprawdzić, które reguły CSS mają zastosowanie do każdego węzła. Im więcej nieużywanych plików CSS, tym więcej czasu może zająć przeglądarce obliczenie stylów dla każdego węzła.

Jak wykryć nieużywany kod CSS

Karta Zasięg w Narzędziach deweloperskich w Chrome może pomóc Ci znaleźć najważniejsze i niekrytyczne elementy CSS. Zobacz Wyświetlanie używanego i nieużywanego kodu CSS na karcie Zasięg.

Narzędzia deweloperskie w Chrome: karta Zasięg
Narzędzia deweloperskie w Chrome: karta Zakres.

Wstawianie w tekście krytycznego kodu CSS i opóźnianie ładowania niekrytycznego kodu CSS

Podobnie jak w przypadku umieszczania kodu w tagu <script>, wstawiaj ważne style wymagane do pierwszego wyświetlenia w bloku <style> w miejscu head strony HTML. Następnie wczytaj pozostałe style asynchronicznie za pomocą linku preload.

Rozważ automatyzację procesu wyodrębniania i wbudowywania kodu CSS w części strony widocznej na ekranie za pomocą narzędzia krytycznego.

Więcej informacji znajdziesz w artykule Opóźnianie wczytywania nieistotnego kodu CSS.

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

Drupal

Sugerujemy usunięcie nieużywanych reguł CSS i dołączenie bibliotek Drupal tylko do tych stron lub komponentów na stronach, które ich potrzebują. Więcej informacji znajdziesz w dokumentacji Drupal.

Aby zidentyfikować dołączone biblioteki, które dodają nieistotny kod CSS, uruchom zasięg kodu w Chrome DevTools. Możesz zidentyfikować taki motyw lub moduł na podstawie adresu URL arkusza stylów, gdy agregacja kodu CSS w witrynie Drupal jest wyłączona.

Szukaj motywów i modułów, które mają na liście wiele arkuszy stylów z dużą ilością czerwonego koloru w zasięgu kodu. Motywy i moduły powinny dołączać bibliotekę arkuszy stylów tylko wtedy, gdy są one rzeczywiście używane na stronie.

Joomla

Dobrym rozwiązaniem może być ograniczenie liczby rozszerzeń Joomli wczytujących na stronie nieużywany kod CSS albo zmiana tych wtyczek na inne.

WordPress

Dobrym rozwiązaniem może być ograniczenie liczby wtyczek WordPressa wczytujących na stronie nieużywany kod CSS albo zmiana tych wtyczek na inne.

Zasoby