Nieużywany CSS
Silktide ładuje Twoje strony w prawdziwej przeglądarce i mierzy, jaka część każdego arkusza stylów jest faktycznie używana do wyświetlania strony. Zgłaszane są arkusze stylów zawierające dużą ilość nieużywanych stylów wraz z informacją o potencjalnej oszczędności.
Dlaczego to jest ważne
Przeglądarki nie mogą wyświetlić strony, dopóki nie pobiorą i nie przetworzą jej , dlatego każda nieużywana reguła nadal opóźnia moment pojawienia się treści. Nieużywany CSS naturalnie się gromadzi: motywy i frameworki zawierają style dla każdej funkcji, niezależnie od tego, czy z nich korzystasz, a stare style rzadko są usuwane po zmianie projektu. W rezultacie odwiedzający czekają na style, które niczego nie wyświetlają.
Jak to naprawić
- Usuń style, których już nie używasz. Narzędzia do budowania mogą robić to automatycznie, skanując Twoje szablony i zachowując tylko CSS, do którego się odwołują.
- Podziel duże arkusze stylów, aby każda strona ładowała tylko potrzebne style, zamiast jednego pakietu zawierającego style dla wszystkich stron.
- W przypadku stylów, których strona potrzebuje, nadaj priorytet tym, które renderują pierwszy ekran, a pozostałe ładuj bez blokowania:
<!-- Ładuje się bez blokowania pierwszego renderowania -->
<link rel="preload" href="rest.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="rest.css"></noscript>
Zachowaj ostrożność przy automatycznym usuwaniu: style używane tylko przez lub tylko na innych stronach współdzielących arkusz stylów mogą zostać usunięte przez pomyłkę.
Jak Silktide to testuje
- Ładuje stronę w prawdziwej przeglądarce i rejestruje, które reguły CSS są stosowane podczas ładowania strony.
- Dla każdego arkusza stylów mierzy, ile jego bajtów nigdy nie zostało użytych.
- Zgłasza każdy arkusz stylów ze znaczącą ilością zbędnych danych, pokazując jego bieżący rozmiar, procent nieużywanych danych oraz liczbę bajtów, które można zaoszczędzić.
Rozwiązywanie problemów
CSS jest używany, ale nie od razu
Pomiar obejmuje początkowe ładowanie strony. Style stosowane dopiero później — po najechaniu kursorem, w oknach modalnych lub po ujawnieniu treści przez JavaScript — są uznawane za nieużywane, mimo że strona ostatecznie ich potrzebuje. To nadal przydatna informacja: te style nie muszą blokować pierwszego renderowania, więc można je ładować oddzielnie.
Arkusz stylów jest współdzielony w całej witrynie
Współdzielony arkusz stylów jest w większości „nieużywany” na każdej pojedynczej stronie. Może to być rozsądny kompromis, ponieważ plik jest po pierwszym wyświetleniu strony. Przed jego podzieleniem rozważ koszt pierwszej wizyty w stosunku do wygody.