W dzisiejszej sieci czas wczytywania strony www jest jednym z najważniejszych wskaźników witryny. Nawet milisekundy mogą mieć ogromny wpływ na wyniki finansowe, a powolne ładowanie stron może z łatwością sabotować współczynniki konwersji. Istnieje wiele narzędzi i technik, które można zastosować w celu przyspieszenia witryny. W tym artykule przyjrzymy się najlepszym wskazówkom dotyczącym optymalizacji CSS, których możesz użyć, aby poprawić wydajność.
Elementy spowalniające
Najważniejszą rzeczą, z wszelkiego rodzaju optymalizacji zaczyna się od dokładnego badania. Na szczęście istnieje wiele narzędzi diagnostycznych CSS, które mogą pomóc Ci znaleźć wszelkie elementy spowalniające wydajność. Przede wszystkim możesz użyć narzędzi DevTools przeglądarki, aby sprawdzić, jak szybko ładują się Twoje zasoby. W większości przeglądarek możesz otworzyć DevTools, naciskając przycisk F12.
Na przykład w przeglądarce Firefox DevTools możesz sprawdzić rozmiar i czas ładowania wszystkich plików CSS ładowanych przez twoją stronę, korzystając z karty Sieć. Możesz także przetestować szybkość ładowania CSS z pamięcią podręczną i bez niej. Ponieważ DevTools pokazuje również zewnętrzne CSS, takie jak pliki czcionek Google i zasoby CSS pobrane od innych firm, możesz znaleźć wiele źródeł, o których nawet wcześniej nie wiedziałeś.
Pingdom Tools i Lighthouse firmy Google to dwa inne bezpłatne narzędzia, które programiści często używają do analizy szybkości witryny i wydajności frontendu. Na przykład Pingdom Tools daje kilka przydatnych wskazówek dotyczących optymalizacji CSS, jeśli przeprowadzisz prosty test szybkości witryny.
Kompresja plików
Większość stron internetowych korzysta z wielu plików CSS. Chociaż w większości przypadków modułowy CSS jest uważany za najlepszą praktykę, ładowanie wszystkich plików może chwilę potrwać. Ale właśnie z tego powodu istnieją narzędzia do minimalizacji i kompresji CSS. Jeśli używasz ich mądrze, możesz znacznie skrócić czas ładowania strony.
Istnieją narzędzia online, takie jak CSS Minify, które pozwalają zminimalizować plik CSS, kopiując go i wklejając w prosty formularz. Tego typu narzędzia mogą dobrze współpracować z mniejszymi projektami. Jednak korzystanie z nich może być kłopotliwe i czasochłonne w przypadku większych projektów z wieloma plikami CSS. W takich przypadkach lepiej wybrać zautomatyzowane rozwiązanie.
Obecnie większość narzędzi do kompilacji umożliwia automatyczne wykonywanie kompresji w bazie kodu. Na przykład Webpack domyślnie zwraca wszystkie pliki jako zminimalizowany pakiet. PostCSS ma również inteligentne wtyczki, takie jak CSS Nano, które nie tylko minimalizują pliki, ale także uruchamiają je poprzez wiele ukierunkowanych optymalizacji.