Nieużywany JavaScript
Silktide ładuje Twoje strony w prawdziwej przeglądarce i mierzy, jaka część każdego skryptu jest faktycznie wykonywana podczas ładowania strony. Zgłaszane są skrypty zawierające dużą ilość nieużywanego kodu wraz z informacją o potencjalnej oszczędności.
Dlaczego to ważne
Nieużywany kosztuje Twoich użytkowników podwójnie: pierwszy raz podczas pobierania, a drugi podczas analizowania i kompilowania przez przeglądarkę kodu, który nigdy nie zostaje wykonany. Na telefonach ten drugi koszt jest dominujący — telefon ze średniej półki może poświęcić na przetworzenie skryptu kilkakrotnie więcej czasu niż na jego pobranie, a w tym czasie strona nie może reagować na dotknięcia ani przewijanie.
Nieużywany kod gromadzi się tak samo jak nieużywany CSS: frameworki i biblioteki zawierają funkcje, których nie używasz, a stary kod rzadko jest usuwany. Każdy użytkownik płaci za to przy każdym wyświetleniu strony.
Jak to naprawić
- Usuń skrypty, których strona już nie potrzebuje, w tym tagi usług, z których przestano korzystać.
- Podziel duże pakiety, aby każda strona ładowała tylko kod, którego używa. Nowoczesne narzędzia do budowania obsługują dzielenie kodu, które robi to automatycznie.
- Ładuj kod funkcji znajdujących się poniżej pierwszego ekranu lub dostępnych na żądanie — okien modalnych, odtwarzaczy, widżetów — tylko wtedy, gdy jest potrzebny, zamiast ładować go z góry:
// Ładuje widżet czatu tylko wtedy, gdy użytkownik o to poprosi
button.addEventListener('click', async () => {
const { openChat } = await import('./chat.js');
openChat();
});
Jak Silktide to testuje
- Załaduj stronę w prawdziwej przeglądarce i zapisz, które części każdego skryptu są wykonywane podczas ładowania strony.
- Dla każdego skryptu zmierz, ile jego bajtów nigdy nie zostało wykonanych.
- Zgłoś każdy skrypt ze znaczącą ilością zbędnego kodu, pokazując jego obecny rozmiar, procent nieużywanego kodu oraz liczbę bajtów, które można zaoszczędzić.
Rozwiązywanie problemów
Kod jest wykonywany, ale nie podczas ładowania strony
Pomiar obejmuje początkowe ładowanie. Kod, który jest wykonywany dopiero później — walidacja formularzy, obsługa menu, funkcje uruchamiane po kliknięciu — jest liczony jako nieużywany, mimo że strona ostatecznie go potrzebuje. Ten kod jest dobrym kandydatem do ładowania na żądanie zamiast z góry.
Nieużywany kod znajduje się w skrypcie innej firmy
Zwykle nie można ograniczyć pakietu należącego do kogoś innego, ale można kontrolować, kiedy jest ładowany. Zobacz kod innych firm oraz fasady dla kodu innych firm, aby poznać dostępne podejścia.