Sekcja Możliwości w raporcie Lighthouse z listami wszystkich niezminifikowanych plików CSS, oraz potencjalne oszczędności w kibibajtach (KiB). gdy te pliki są zmniejszone:
![Zrzut ekranu pokazujący audyt CSS Minify](https://developer.chrome.google.cn/static/docs/lighthouse/performance/unminified-css/image/a-screenshot-the-lightho-9935f05e8c4cd.png?authuser=0000&hl=pl)
Jak zmniejszanie plików CSS może poprawić skuteczność
Zmniejszanie plików CSS może poprawić szybkość wczytywania strony. Pliki CSS często są większe, niż muszą być. Na przykład:
/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}
Można ograniczyć do:
h1,
h2 {
background-color: #000000;
}
Z perspektywy przeglądarki te 2 przykłady kodu są równoważne pod względem funkcji, ale drugi przykład wykorzystuje mniej bajtów. Minifilary mogą jeszcze bardziej zwiększyć wydajność bajtów, usuwając spacje:
h1,
h2 {
background-color: #000000;
}
Niektórzy minifikatorzy stosują sprytne sztuczki, aby zminimalizować liczbę bajtów.
Na przykład wartość koloru #000000
można zmniejszyć do #000
,
co jest jego skróconym odpowiednikiem.
Lighthouse podaje oszacowanie potencjalnych oszczędności na podstawie
na komentarzach i odstępach
znajdujących się w kodzie CSS.
To zachowawcze szacunki.
Jak już wspominaliśmy,
Osoby tworzące ustawienia mogą wprowadzać sprytne optymalizacje (np. zredukować #000000
do #000
)
aby jeszcze bardziej zmniejszyć rozmiar pliku.
Jeśli więc używasz minifikatora,
możesz zaobserwować więcej oszczędności niż wynika z raportów Lighthouse.
Zmniejszanie kodu CSS za pomocą minifikatora CSS
W przypadku małych witryn, które rzadko aktualizujesz, prawdopodobnie możesz użyć usługi online do ręcznego zminimalizowania plików. Wklej kod CSS w interfejsie usługi, co spowoduje zwrócenie kodu w wersji zminimalizowanej.
Dla profesjonalnych programistów pewnie wolisz skonfigurować zautomatyzowany proces, który minimalizuje CSS. przed wdrożeniem zaktualizowanego kodu. Można to zwykle robić za pomocą narzędzi do kompilacji, takich jak Gulp czy Webpack.
Dowiedz się, jak zmniejszyć kod CSS w narzędziu Minify CSS.
Wskazówki dotyczące stosu
Drupal
Włącz Aggregate CSS files (Agreguj pliki CSS) w sekcji Administracja > Konfiguracja > Opracowywanie. Możesz też skonfigurować bardziej zaawansowane opcje agregacji w modułach dodatkowych, aby przyspieszyć działanie strony dzięki konkatenacji, minifikacji i kompresji CSS stylów.
Joomla
wiele rozszerzeń Joomli. może przyspieszyć działanie strony dzięki konkatenacji, minifikacji i kompresji pliku CSS stylów. Istnieją też szablony, które zapewniają tę funkcję.
Magento
Włącz minifikację plików CSS. w ustawieniach programisty sklepu.
React
Jeśli Twój system kompilacji automatycznie minifikuje pliki CSS, upewnij się, że pliki CSS wdrażanie kompilacji produkcyjnej, Twojej aplikacji. Możesz to sprawdzić w narzędziach dla programistów React .
WordPress
Wiele wtyczek do WordPressa może przyspieszyć konkatenacji, minifikacji i kompresji stylów. Dodatkowe opcje w miarę możliwości użyć procesu kompilacji, aby od razu przeprowadzić minifikację.