Usuń nieużywany kod CSS

Sekcja Możliwości w raporcie Lighthouse zawiera wszystkie arkusze stylów z nieużywanym CSS i potencjalne oszczędności wynoszące co najmniej 2 KiB. Usuń nieużywany kod CSS, aby zmniejszyć ilość danych niepotrzebnie przesyłanych w sieci:

Zrzut ekranu z kontroli przeprowadzonej w narzędziu Lighthouse i usuwaniu nieużywanych usług CSS

Jak nieużywany kod CSS spowalnia skuteczność

Tag <link> to popularny sposób dodawania stylów do strony:

<!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, ponieważ jest przechowywany niezależnie od używanego przez niego kodu HTML.

Domyślnie przed wyświetleniem lub wyrenderowaniem treści na ekranie użytkownika przeglądarka musi pobierać, analizować i przetwarzać wszystkie napotkane zewnętrzne arkusze stylów. Wyświetlanie treści przez przeglądarkę przed przetworzeniem arkuszy stylów nie ma sensu, bo mogą one zawierać reguły, które wpływają na styl strony.

Każdy zewnętrzny arkusz stylów musi zostać pobrany z sieci. Takie dodatkowe podróże sieciowe mogą znacznie wydłużyć czas, jaki użytkownicy muszą czekać, zanim zobaczą treść na ekranie.

Nieużywany kod CSS spowalnia też konstrukcję drzewa renderowania w przeglądarce. Drzewo renderowania przypomina drzewo DOM, z tym że zawiera też style dla każdego węzła. Aby utworzyć drzewo renderowania, przeglądarka musi przejść przez całe drzewo DOM i sprawdzić, jakie reguły CSS mają zastosowanie do poszczególnych węzłów. Im więcej nieużywanego kodu CSS, tym więcej czasu może potrzebować przeglądarka na obliczanie 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źć krytyczne i niekrytyczne błędy CSS. Zapoznaj się z sekcją Wyświetlanie używanych i nieużywanych plików CSS na karcie Pokrycie.

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

Wbudowanie krytycznego kodu CSS i opóźnienie niekrytycznego kodu CSS

Podobnie jak w przypadku kodu wbudowanego w tag <script>, wbudowane style krytyczne wymagane przy pierwszym wyrenderowaniu wewnątrz bloku <style> w head strony HTML. Następnie wczytaj pozostałe style asynchronicznie, korzystając z linku preload.

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

Więcej informacji znajdziesz w artykule Opóźnianie niekrytycznych kodów CSS.

Wskazówki dotyczące stosu

Drupal

Rozważ usunięcie nieużywanych reguł CSS. Dołączaj tylko potrzebne biblioteki Drupala do odpowiedniej strony lub komponentu na stronie. Więcej informacji znajdziesz w sekcji Definiowanie biblioteki.

Joomla

Rozważ ograniczenie lub zmianę liczby rozszerzeń Joomli wczytujących na stronie nieużywany kod CSS.

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