Jak zwiększyć szybkość wczytywania kodu JavaScript?

Jeśli Twoja strona internetowa wczytuje się wolno, odwiedzający mogą szybko zrezygnować i kliknąć przycisk „Wstecz”. Szybkość ładowania strony jest kluczowa, a optymalizacja kodu JavaScript jest jednym z głównych kroków w poprawie wydajności witryny. Zanim jednak zaczniemy, nie bój się – nie musisz być ekspertem, aby wprowadzić te zmiany. Omówimy proste, praktyczne i skuteczne strategie, dzięki którym Twój kod JavaScript stanie się szybszy jak błyskawica.

1. Minifikacja kodu JavaScript

Co to jest minifikacja?

Minifikacja to proces usuwania zbędnych znaków z kodu, takich jak spacje, komentarze, czy nieużywane linie, bez wpływu na jego działanie. Wyobraź sobie, że skracasz wiadomość tekstową, usuwając wszystkie „eeee”, ale sens zostaje ten sam.

Jak to zrobić?

Nie musisz ręcznie usuwać spacji z każdej linii (chyba, że lubisz wyzwania 😜). Istnieją narzędzia, które zrobią to za Ciebie:

Terser (popularny i wydajny)
UglifyJS
Google Closure Compiler

Przykład:

Kod przed minifikacją:

function powitanie() {
    console.log("Cześć, świecie!");
}
powitanie();

Kod po minifikacji:

function powitanie(){console.log("Cześć, świecie!")}powitanie();

Widzisz różnicę? Po minifikacji plik zajmuje mniej miejsca i ładuje się szybciej.

2. Asynchroniczne ładowanie skryptów

Co to znaczy?

Normalnie przeglądarka wczytuje pliki JavaScript w kolejności, co może blokować ładowanie innych zasobów (np. obrazów czy CSS). Rozwiązaniem jest asynchroniczne lub opóźnione ładowanie skryptów, dzięki czemu kod JS nie zatrzymuje całego procesu.

Jak to zrobić?

Wystarczy dodać odpowiednie atrybuty do tagu <script>:

async – skrypt ładuje się równolegle z innymi zasobami.
defer – skrypt ładuje się równolegle, ale wykona się dopiero po załadowaniu całego HTML.

Przykład:

<!-- Normalne ładowanie -->
<script src="script.js"></script>

<!-- Asynchroniczne ładowanie -->
<script src="script.js" async></script>

<!-- Opóźnione ładowanie -->
<script src="script.js" defer></script>

Jeśli Twój skrypt nie zależy od innych zasobów, użyj async. W przeciwnym razie defer jest bardziej bezpieczny.

3. Ładowanie skryptów tylko tam, gdzie są potrzebne

Czy Twój skrypt JavaScript działa na każdej stronie witryny? Pewnie nie! Na przykład, jeśli masz kod do obsługi formularza kontaktowego, załaduj go tylko na stronie kontaktowej.

Jak to zrobić?

Możesz to zrobić dynamicznie w kodzie backendowym lub przy użyciu menedżera zasobów. Przykładowy fragment w JavaScript:

if (document.body.classList.contains('strona-kontaktowa')) {
    const script = document.createElement('script');
    script.src = 'formularz.js';
    document.body.appendChild(script);
}

4. Kompresja Gzip lub Brotli

Co to daje?

Gzip i Brotli to metody kompresji, które znacząco zmniejszają rozmiar plików przed przesłaniem ich do przeglądarki użytkownika. Mniejszy plik = szybsze ładowanie.

Jak to włączyć?

To zadanie zazwyczaj dotyczy serwera. Jeśli korzystasz z Apache lub Nginx, wystarczy dodać odpowiednie reguły. Przykład dla Apache:

AddOutputFilterByType DEFLATE application/javascript

Dla Nginx:

gzip on;
gzip_types application/javascript;

5. Unikaj zbędnych bibliotek

Czasami korzystamy z ogromnych bibliotek (np. jQuery) tylko po to, by zrobić coś prostego, co można napisać w czystym JavaScript. Przykład? Oto klasyk:

Kod z jQuery:

$('#przycisk').on('click', function() {
    alert('Kliknięto!');
});

To samo w czystym JS:

document.getElementById('przycisk').addEventListener('click', function() {
    alert('Kliknięto!');
});

Unikając niepotrzebnych bibliotek, zmniejszasz rozmiar plików do załadowania.

6. Lazy Loading – leniwe ładowanie

Nie wszystko musi być wczytane natychmiast! Funkcja lazy loading umożliwia ładowanie zasobów dopiero wtedy, gdy są one potrzebne.

Jak to wdrożyć dla JavaScript?

Możesz wykorzystać IntersectionObserver, aby dynamicznie ładować skrypty. Przykład:

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const script = document.createElement('script');
            script.src = 'lazy-script.js';
            document.body.appendChild(script);
            observer.unobserve(entry.target);
        }
    });
});

observer.observe(document.getElementById('element-ladowania'));

7. Zoptymalizuj kod w przeglądarce (bundle i tree-shaking)

Co to jest bundle i tree-shaking?

Bundlowanie – łączenie wielu plików JavaScript w jeden.
Tree-shaking – usuwanie nieużywanego kodu podczas procesu bundlowania.

Dzięki narzędziom takim jak Webpack, możesz zautomatyzować te procesy.

Przykład konfiguracji Webpack:

module.exports = {
    mode: 'production',
    optimization: {
        usedExports: true, // Tree-shaking
    },
};

8. Używaj CDN

Hostowanie plików JavaScript na Content Delivery Network (CDN) sprawia, że pliki są serwowane z najbliższego serwera do użytkownika, co znacznie skraca czas ładowania.

Przykład:

Zamiast trzymać jQuery lokalnie:

<script src="/js/jquery.min.js"></script>

Skorzystaj z CDN:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

9. Analizuj i monitoruj wydajność

Aby wiedzieć, co dokładnie spowalnia Twoje skrypty, użyj narzędzi takich jak:

Google Lighthouse
Chrome DevTools (zakładka Performance)

Optymalizacja JavaScript to nie czarna magia. Kilka prostych kroków, takich jak minifikacja, asynchroniczne ładowanie, czy używanie CDN, może znacząco przyspieszyć Twoją stronę. Zacznij od analizy wydajności i stopniowo wdrażaj zmiany. Nie bój się eksperymentować, bo każdy kod da się ulepszyć.