Każdy kto optymalizuje strony internetowe doskonale wie, jak ważna jest minimalizacja rozmiaru plików CSS i JS. Szybkość witryny w dzisiejszych czasach istotnie wpływa nie tylko na komfort użytkowania, ale znacząco przyczynia się do zmniejszenia współczynnika odrzuceń, który dla stron e-commerce stanowi ważny wskaźnik jakościowy. W tym poradniku przedstawię małe sprytne narzędzie, które pozwoli zmniejszyć rozmiar plików JS i CSS.
Na rynku znajdziemy różnego typu oprogramowanie, które pozwola kompresować tego typu pliki. Również wtyczki, które przeprowadzą optymalizację „w locie”, jednak tego typu optymalizację nie zawsze da się wykonać. Na części hostingów po zastosowaniu wtyczki efekt może być odwrotny od zamierzonego – zwiększenie czasów opóźnienia i spowolnienie witryny. Zastosowanie kompresji „w locie” może również wiązać się z wyższą utylizacją zasobów serwera. W części przypadków automatyczna kompresja nie będzie możliwa, z uwagi na zastosowane elementy w templatkach, które po zoptymalizowaniu mogą stracić swoje funkcjonalności, a w przypadku optymalizacji plików CSS templatka może nawet „rozjechać się”. Częsty błąd po automatycznej minifikacji występuje na mobile, osoba optymalizująca na desktopie nie widzi niczego złego, a na mobile na przykład nie działa rozwijane menu lub występują inne anomalie. Aby lepiej kontrolować proces kompresji, można użyć stacjonarnych aplikacji do minimalizacji kodu.
Czym jest minimalizacja kodu?
Minimalizacja (minifikacja) kodu zwana także kompresją to nic innego jak przeorganizowanie zapisów w pliku JS lub CSS, w celu zredukowania objętości kodu źródłowego, a tym samym zmniejszenia rozmiaru pliku wynikowego, oczywiście przy zachowaniu pełnej funkcjonalności. Zmniejszenie rozmiaru wczytywanego pliku to skrócenie czasu potrzebnego do załadowania witryny.
Przykładowy plik przed zastosowaniem minifikacji…
Ten sam plik po optymalizacji…
W zależności od użytego narzędzia i wyboru użytkownika, z kodu mogą zostać usunięte wszelkie komentarze, białe znaki takie jak spacja, tabulacja czy znaki nowej linii. Oczyszczenie kodu ze zbędników to nie wszystko, w plikach mogą zostać zastosowane skrócone zapisy poszczególnych elementów, na przykład dla definicji koloru #888888 można zastosować skrócony zapis w postaci #888, podobna sytuacja ma się z innymi definicjami jak choćby margin: 2x 4x 2x 4x, gdzie można zastosować zapis margin: 2x 4x. Wiele zapisów w pliku CSS da się w ten sposób zmodyfikować, jednakże zaawansowana minifikacja jest ryzykowna. Musimy pamiętać, że jeżeli witryna ma być dostępna z poziomu wielu przeglądarek i urządzeń, niestety czym większą minifikację zastosujemy, tym szansa, że coś zepsuje się w wyglądzie bądź funkcjonalności rośnie. Optymalizując kod plików trzeba testować różne warianty, z różnym stopniem kompresji i wybrać najodpowiedniejszą opcję, przy której funkcjonalność i wygląd witryny zostaje zachowana.
Kompresja kodu – wady
Kompresja potrafi znacząco zredukować rozmiar pliku wynikowego, niestety jednocześnie dramatycznie pogarsza czytelność kodu, dlatego dobrą praktyką podczas optymalizacji jest zachowanie oryginalnego pliku (ze zmienioną nazwą), tylko po to, by w przypadku modyfikacji lub dodawania nowych funkcjonalności można było w szybki prosty sposób odnaleźć interesujące części kodu. Po zmodyfikowaniu oryginalnego pliku ponownie przeprowadzamy kompresję i nowo powstały plik umieszczamy na serwerze.
Koala – darmowy minifikator plików CSS i JS
Koala jest jednym z lepszych darmowych narzędzi do minifikacji kodu źródłowego. Obsługuje wiele metod kompilacji (Less, Sass, Compass, CoffeScript), zawiera zintegrowane kompresory UglifyJS, Clean-CSS, a całości dopełnia możliwość podpięcia własnego skryptu napisanego w języku programowania Ruby.
Okno główne programu jest przejrzyste. Optymalizacja sprowadza się do ustawienia opcji kompresji oraz wskazania katalogu z plikami CSS/JS. Program wspiera metodę przeciągnij i upuść. Aby za jednym razem skompresować kilka plików, wystarczy w oknie Koala zaznaczyć wszystkie pozycje (CTRL+A) i z menu kontekstowego wybrać Compile.
Przykłady kompresji wybranych plików…
- cookies.js – rozmiar przed kompresją 10,2KB, po kompresji 4,18 (zysk 6,02KB)
- wpo-admin.css – przed 6,15, po 4,82 (zysk 1,33KB)
- font-awesome.css – przed 31,5KB, po 26KB (zysk 5,5KB)
UWAGA! Zastosowanie metody yuicompress pozwoli uzyskać lepszy wynik od zaprezentowanego, aczkolwiek ja osobiście tego sposobu kompresji nie polecam, ciężko będzie zachować 100% kompatybilność, stąd też trzeba się liczyć z dużym ryzykiem wystąpienia problemów w wyświetlaniu witryny na różnych przeglądarkach.
Testowanie szybkość witryny – narzędzia
Okej, zoptymalizowałeś pliki, chcesz zobaczyć w jakim stopniu kompresja poprawiła szybkość wczytywania strony? W tym celu musisz skorzystać z narzędzi online, najpopularniejsze to:
Minifikacja kodu źródłowego jest tylko jedną z metod optymalizacji plików JS, CSS. Może przynieść wymierne korzyści w poprawieniu czasów ładowania Twojej witryny, przy zachowaniu dotychczasowej funkcjonalności. Pamiętaj jednak, że ekstremalna optymalizacja jest ryzykowna, jeżeli ją wdrażasz koniecznie upewnij się, że witryna prawidłowo wyświetla się na urządzeniach mobilnych i na różnych przeglądarkach, oraz czy wszystkie funkcje zostały w pełni zachowane.