Dlaczego rozmiar skryptów to nie wszystko
JavaScript pozwala budować interaktywne elementy strony: menu, filtry produktów, formularze czy koszyk. Problem pojawia się wtedy, gdy przeglądarka musi pobrać i wykonać dużo kodu, zanim użytkownik zobaczy potrzebną treść albo będzie mógł wygodnie z niej skorzystać. Skrypt zajmuje nie tylko miejsce w transferze. Przeglądarka musi go również odczytać, przygotować i uruchomić, a to zużywa czas procesora.
Dlatego dwie strony z plikami o podobnej wielkości mogą działać inaczej. Na jednej kod wykonuje się szybko, na drugiej zajmuje przeglądarkę długimi zadaniami. W tym czasie kliknięcie przycisku lub wpisywanie w pole wyszukiwania może sprawiać wrażenie opóźnionego. Kłopot łatwiej zauważyć na słabszym telefonie niż na komputerze, na którym powstaje witryna.
Wolniejsze działanie może utrudniać korzystanie z serwisu, a sposób udostępniania treści przez JavaScript może mieć znaczenie dla jej odczytania przez wyszukiwarki. Nie oznacza to jednak, że każdy skrypt szkodzi widoczności. Celem porządków jest zachowanie potrzebnych funkcji przy ograniczeniu pracy, której użytkownik nie potrzebuje od razu.
Gdzie najczęściej kryje się nadmiar kodu
W sklepie internetowym filtrowanie produktów może być potrzebne na liście kategorii, lecz niekoniecznie na stronie z regulaminem. Podobnie rozbudowana galeria ma sens na karcie produktu, ale jej kod nie musi trafiać na każdą podstronę. Gdy wspólny pakiet zawiera funkcje przeznaczone tylko dla kilku widoków, wszyscy odwiedzający ponoszą koszt jego pobrania i uruchomienia.
Osobnej uwagi wymagają skrypty zewnętrzne: narzędzia analityczne, czaty, mapy, reklamy i osadzone materiały. Część z nich wspiera ważne zadania serwisu, lecz kolejne integracje łatwo dodać i trudno później zauważyć, że nadal się ładują. Nawet jeśli plik pochodzi z innej domeny, może wykonywać pracę w przeglądarce użytkownika i wpływać na wygodę korzystania ze strony.
Zdarza się też, że witryna buduje większość widoku dopiero po uruchomieniu JavaScriptu. Wtedy warto sprawdzić, czy najważniejsze treści i odnośniki są dostępne bez czekania na dodatkowe działania skryptów. Sposób rozwiązania zależy od użytej technologii; samo wyłączenie JavaScriptu nie zawsze jest rozsądną poprawką.
Jak ustalić, co rzeczywiście spowalnia stronę
Zacznij od kilku reprezentatywnych adresów: strony głównej, listy kategorii, artykułu i podstrony z ważną funkcją, na przykład formularzem. Otwórz je na telefonie oraz w narzędziach deweloperskich przeglądarki. W panelu sieci sprawdź, jakie pliki JavaScript są pobierane, skąd pochodzą i czy ten sam duży pakiet pojawia się także tam, gdzie jego funkcje nie są używane.
Następnie nagraj ładowanie strony i podstawowe działania użytkownika w panelu wydajności. Szukaj okresów, w których przeglądarka intensywnie wykonuje skrypty, oraz sprawdź, co dzieje się po kliknięciu menu, uruchomieniu filtra lub otwarciu formularza. Raport wydajności może wskazać potencjalne problemy, ale nie zastępuje próby wykonanej na rzeczywistej stronie. Jeśli masz dostęp do danych zbieranych od odwiedzających, zestaw je z wynikami testów wykonywanych lokalnie.
Zapisuj obserwacje w prostym zestawieniu: adres strony, nazwa skryptu, jego zadanie, miejsce użycia i zauważony problem. Taka lista pomaga odróżnić koszt potrzebnej funkcji od kodu, który ładuje się bez wyraźnego powodu. Jest też punktem odniesienia do sprawdzenia, czy późniejsze zmiany faktycznie pomogły.
Od czego zacząć porządki
Najpierw przyjrzyj się elementom, które łatwo usunąć lub ograniczyć: nieużywanym wtyczkom, zdublowanym narzędziom i skryptom zewnętrznym bez ustalonego właściciela w zespole. Ustal, które funkcje są potrzebne na każdej podstronie, a które tylko w określonych widokach. Ładowanie kodu wyłącznie tam, gdzie jest potrzebny, bywa bardziej sensownym krokiem niż samo zmniejszanie rozmiaru plików.
Potem rozważ opóźnienie kodu, który nie jest konieczny przy pierwszym wyświetleniu strony, na przykład obsługi elementu otwieranego dopiero po kliknięciu. Atrybuty async i defer mogą zmienić moment wykonania skryptu, lecz nie są zamiennikami, które można stosować bez sprawdzenia zależności między plikami. Jeśli jeden skrypt wymaga wcześniejszego uruchomienia drugiego, nieprzemyślana zmiana kolejności może zepsuć funkcję.
Po każdej zmianie sprawdź nie tylko szybkość, ale też działanie strony. Przejdź przez menu, wyszukiwanie, formularze i ścieżkę zakupową, jeśli występuje. Upewnij się również, że ważne treści i odnośniki nadal są dostępne. Małe, sprawdzone kroki ułatwiają ustalenie, która poprawka pomogła, a która spowodowała błąd.
Krótka lista kontroli na przyszłość
Przy kolejnej zmianie w serwisie zadaj pięć pytań: Czy nowy skrypt jest potrzebny? Na których podstronach ma działać? Czy musi uruchamiać się od razu? Kto odpowiada za jego utrzymanie? Jak sprawdzimy wpływ na stronę po wdrożeniu? Warto wracać do tych pytań także przy narzędziach dodawanych przez zewnętrznych dostawców.
Porządki w JavaScripcie nie polegają na osiągnięciu jednej idealnej liczby kilobajtów. Chodzi o to, by użytkownik mógł szybko zobaczyć treść, sprawnie wykonać zadanie i nie pobierał kodu, który na danej podstronie niczemu nie służy. Regularna kontrola kilku ważnych widoków pomaga utrzymać ten stan, gdy serwis się rozrasta.
