Jak zmniejszyć wielkość plików js?

Optymalizacja serwisu 3 komentarze »

Na czas ładowania strony internetowej wpływa wiele różnych czynników takich jak:

  • szybkość serwera
  • wydajność aplikacji np. nieoptymalne zapytania do bazy danych MySQL będą powodowały wydłużenie się ładowania strony
  • wielkość plików: dopóki przeglądarka nie pobierze wszystkich plików, strona nie zostanie w pełni wyświetlona. Wiadomo: łącza mają ograniczoną przepustowość i im większy jest plik do pobrania (plik html, plik graficzny, plik ze skryptem), tym dłużej się plik pobiera

W tym wpisie skupie się na trzecim punkcie. O optymalizacji plików graficznych już pisałem w notce: Jak zmniejszyć rozmiar grafiki nawet o 40% ?

Tym razem skupie się nad plikami JavaScript. Jak wiadomo, skrypty mają to do siebie, że są dość rozwlekłe. Stosując komentarze, wcięcia, nadmiarowe białe znaki powodujemy, że rozmiar pliku szybko rośnie. Owszem, nie odradzam stosowania komentarzy, wcięć, białych znaków. Te zabiegi mają na celu zwiększyć czytelność kodu (kosztem rozmiaru pliku). Jednak można pójść na pewien kompromis: można trzymać na dysku „obszerną” wersję skryptu, a na serwer wrzucać plik „po kompresji”. Nawet wręcz zalecam trzymanie na dysku oryginalnego pliku sprzed kompresji, gdyż edytowanie takiego pliku po kompresji nie należy do rzeczy przyjemnych 😉 Tutaj wada jest w pewnym sensie zaletą: kompresja plików javascript utrudnia ich użycie przez osoby postronne (więc jeśli nie chcesz, aby ktoś używał Twoich autorskich skryptów, to je skompresuj 😉

Jednym z wielu programów kompresujących pliki JavaScript jest JSMin. Przykładowy skrypt zajmujący 1004 bajty został skompresowany do 440 bajtów.

Jeszcze na koniec jedna uwaga: zanim „skompresujesz” plik, upewnij się, że trzymasz na dysku jego pierwotną kopię (sprzed kompresji). Dlaczego? Otóż czasami plik po skompresowaniu może się dziwnie zachowywać (na stronie JSMin został opisany specyficzny przypadek, gdy kompresja „uszkadza” pliki), więc warto mieć możliwość wrócenia do punktu wyjścia!

WordPress - Hosting: Twój hosting - Skórka: N.Design Studio - Spolszczenie: Adam Klimowski.
RSS wpisów RSS komentarzy Zaloguj się