Sekcja Możliwości w raporcie Lighthouse zawiera wszystkie niezminimalizowane pliki CSS oraz potencjalne oszczędności w kibibajtach (KiB) w ich przypadku:
Jak zmniejszenie plików CSS może poprawić wydajność
Zmniejszenie plików CSS może przyspieszyć wczytywanie stron. Pliki CSS są często większe, niż muszą być. Na przykład:
/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}
Można zmniejszyć do:
h1,
h2 {
background-color: #000000;
}
Z perspektywy przeglądarki te 2 przykłady kodu są równoważne funkcjonalnie, ale 2 przykład ma mniej bajtów. Minimalizatory mogą dodatkowo zwiększyć wydajność bajtów, usuwając odstępy:
h1,
h2 {
background-color: #000000;
}
Niektóre programy do minifikacji stosują sprytne sztuczki, aby zminimalizować liczbę bajtów.
Na przykład wartość koloru #000000 można dodatkowo zmniejszyć do #000, co jest odpowiednikiem tego atrybutu.
Lighthouse podaje szacunkowe oszczędności na podstawie komentarzy i odstępów znalezionych w CSS.
To zachowawcze szacunki.
Jak już wspomnieliśmy, minifikatory mogą przeprowadzać sprytną optymalizację (np. zmniejszać #000000 do #000), aby jeszcze bardziej zmniejszyć rozmiar pliku.
Jeśli więc używasz minifikatora,
możesz uzyskać więcej oszczędności niż w raportach Lighthouse.
Używanie minifikatora CSS do minifikacji kodu CSS
W przypadku małych witryn, których nie aktualizujesz zbyt często, do ręcznego minifikacji plików możesz użyć usługi online. Wystarczy wkleić kod CSS w interfejsie użytkownika usługi. Spowoduje to zwrócenie zmniejszonej wersji kodu.
Profesjonalni programiści prawdopodobnie najlepiej skonfigurować automatyczny przepływ pracy, który automatycznie minifikuje kod CSS przed wdrożeniem zaktualizowanego kodu. Zwykle odbywa się to za pomocą narzędzi do kompilacji, takich jak Gulp lub Webpack.
Dowiedz się, jak zmniejszyć kod CSS w narzędziu Minify CSS.
Wskazówki dotyczące stosu
Drupal
Włącz Zbiorcze pliki CSS w sekcji Administracja > Konfiguracja > Programowanie. Możesz też skonfigurować bardziej zaawansowane opcje agregacji za pomocą dodatkowych modułów, aby przyspieszyć działanie witryny dzięki konkatenacji, minifikacji i kompresji stylów CSS.
Joomla
Kilka rozszerzeń Joomli może przyspieszyć działanie witryny dzięki konkatenacji, minifikacji i kompresji stylów CSS. Istnieją też szablony z tą funkcją.
Magento
Włącz opcję Minify CSS Files (Minifikuj pliki CSS) w ustawieniach programisty sklepu.
Dodaj reakcję
Jeśli Twój system kompilacji automatycznie minifikuje pliki CSS, upewnij się, że wdrażasz kompilację produkcyjną aplikacji. Możesz to sprawdzić za pomocą rozszerzenia Narzędzia dla programistów React.
WordPress
Kilka wtyczek WordPress może przyspieszyć działanie witryny dzięki konkatenacji, minifikacji i kompresji stylów. Jeśli masz taką możliwość, możesz też od razu przeprowadzić minifikację za pomocą procesu kompilacji.