Sekcja Możliwości w raporcie Lighthouse z listami wszystkich arkuszy stylów z nieużywanym kodem CSS, przy czym można zaoszczędzić 2 KiB lub więcej. Usuń nieużywany kod CSS aby ograniczyć niepotrzebne bajty zużywane przez aktywność sieciową:
Jak nieużywany kod CSS spowalnia wydajność
Częstą metodą dodawania stylów do strony jest użycie tagu <link>:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>
Plik main.css pobierany przez przeglądarkę jest nazywany zewnętrznym arkuszem stylów.
bo jest on zapisywany niezależnie od kodu HTML, który z niego korzysta.
Domyślnie przeglądarka musi pobierać, analizować i przetwarzać wszystkie zewnętrzne arkusze stylów którą trafia przed wyświetleniem lub wyrenderowaniem treści na ekranie użytkownika. Próba wyświetlenia treści w przeglądarce nie miałaby sensu przed przetworzeniem arkuszy stylów, ponieważ arkusze stylów mogą zawierać reguły, które wpływają na styl strony.
Każdy zewnętrzny arkusz stylów należy pobrać z sieci. Te dodatkowe połączenia sieciowe mogą znacznie wydłużyć czas że użytkownicy muszą czekać, zanim zobaczą treści na ekranie.
Nieużywany kod CSS spowalnia także tworzenie pliku drzewo renderowania. Drzewo renderowania przypomina drzewo DOM, z tym że zawiera również style dla 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 poszczególnych węzłów. Im więcej jest nieużywanych stylów CSS, tym więcej czasu przeglądarka może poświęcać na obliczanie stylów dla każdego węzła.
Jak wykrywać 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. Zapoznaj się z sekcją Wyświetlanie używanych i nieużywanych elementów CSS na karcie Pokrycie.
Wbudowanie krytycznego kodu CSS i opóźnianie niekrytycznego kodu CSS.
Podobnie jak w przypadku kodu wbudowanego w tagu <script>,
wbudowane style krytyczne wymagane do pierwszego wyrenderowania
wewnątrz bloku <style> w head strony HTML.
Następnie asynchronicznie wczytaj pozostałe style za pomocą linku preload.
Rozważ automatyzację procesu wyodrębniania i umieszczania w części strony widocznej na ekranie. Usługa porównywania cen przy użyciu narzędzia krytycznego,
Więcej informacji znajdziesz w artykule o odroczaniu niekrytycznego kodu CSS.
Wskazówki dotyczące stosu
Drupal
Rozważ usunięcie nieużywanych reguł CSS. Dołącz tylko potrzebne biblioteki Drupala do odpowiedniej strony lub komponentu na stronie. Przeczytaj artykuł Definiowanie biblioteki. .
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.