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:
Jak nieużywany kod CSS spowalnia działanie
Używanie tagu to typowy sposób dodawania stylów do strony:
...
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.
Wstawianie w tekście krytycznego kodu CSS i opóźnianie ładowania niekrytycznego kodu CSS
Podobnie jak w przypadku umieszczania kodu w tagu