W dzisiejszych czasach mało która strona internetowa nie korzysta ze sławnego JS, czyli skryptów JavaScript. Stosunkowo mały procent ludzi wie, że żeby strona internetowa działała szybko i bez zacięć, to trzeba te skrypty zoptymalizować.
Zapewne jesteś już bywalcem w Internecie, dlatego też wiesz, że czekanie dłużej niż 3 sekundy na wykonanie zapytania nie jest przez nikogo pożądane. Do tego też robot Google przychylniej patrzy na szybsze strony.
W tym artykule wytłumaczymy Ci, co warto wiedzieć o optymalizacji kodu i jakie techniki przyczyniają się do szybszego wykonywania skryptów JavaScript.
Optymalizacja plików JS
Pliki kodu JavaScript to swego rodzaju pliki tekstowe, które można dość prosto zoptymalizować bez utraty funkcjonalności. Oto niektóre techniki optymalizacji.
Minifikacja kodu JavaScript
To maksymalne zmniejszenie rozmiaru pliku JS. Polega na usunięciu wszystkich zbędnych elementów z kodu takich jak spacje, komentarze, czy znaki. Strona to nie człowiek, który potrzebuje, żeby kod wyglądał ładnie i przejrzyście. Tak naprawdę najlepiej jest, gdy kod to wielki ciąg znaków… I tak właśnie działa minifikacja.
Zabieg ten skraca czas ładowania, który może przeważyć o Twojej pozycji w wyszukiwarce. Pamiętaj, liczy się każda zaoszczędzona milisekunda!
Do wykonania zabiegu minifikacji możesz użyć jakiejkolwiek wtyczki WordPress, czy narzędzi online.
Kompresja kodu JavaScript
Jak zapewne wiemy, pliki tekstowe można skompresować, a jako że JS, to plik tekstowy, to nic nie stoi na przeszkodzie, żebyś nie mógł tego zrobić.
Do kompresji możesz wykorzystać standardowe algorytmy kompresji. Najprościej jest zainstalować na serwerze stworzony przez Google “Brotli”, czy moduł deflate, co sprawi, że kompresja będzie nieinwazyjna i niewidoczna dla userów.
Usunięcie niewykorzystywanych skryptów JavaScript
Po instalacji różnych wtyczek lub bibliotek czasami na stronie pojawiają się śmieci w postaci nieużywanego kodu JavaScript, które spowalniają stronę. Kod ten należy jak najszybciej usunąć.
Najlepiej byś użył na swoim kodzie narzędzia Coverage, które pokazuje, w jakim stopniu załadowane skrypty JS są wykorzystywane.
Działanie JS w tle
Zapewne nie będziesz chciał, by Twoja aplikacja przeszkadzała użytkownikom. By taki wynik osiągnąć, istnieje parę sztuczek:
- setTimeout()
Sprawi to, że funkcja będzie wykonywana w tle, przez co użytkownicy nie będą musieli czekać na jej wykonanie. A dokładnie to metoda ta wywołuje funkcję po określonym czasie oczekiwania.
- Import pliku z kodem przed </body>
Ta sztuczka sprawi, że Twój kod nie spowolni ładowania zawartości strony.
Pisanie kodu JavaScript w osobnych plikach
Jak logika może Ci podpowiadać, pisanie kodu w innym pliku niż HTML, jest bardzo pożądaną praktyką. Między innymi sprawi to, że zmiany w jednym pliku JavaScript zastosują się globalnie do wszystkich stron, na których ów plik jest zaimportowany.
Require.js
To framework JavaScript, który efektownie zarządza zależnościami pomiędzy bibliotekami. Upraszcza on ładowanie plików i modułów, co przekłada się na szybsze ładowanie strony.
By zacząć z nim pracować, wystarczy, że dodasz do kodu HTML następującą linijkę:
<script data-main="scripts/main" src="/scripts/require.js"></script>
Podsumowanie
A zatem poznałeś już to, co warto wiedzieć o optymalizacji kodu JavaScript. Mimo wszystko technik optymalizacji jest jeszcze dużo więcej, więc zachęcamy do kontynuowania nauki!