Un report sulla copertura JavaScript mostra quale codice è stato eseguito nel periodo osservato. Il codice non eseguito al caricamento può servire a un menu, al checkout o a un altro percorso. Usa il report per scegliere cosa approfondire, poi verifica i percorsi utente interessati prima di modificare il bundle.
Inizia con la risorsa e le condizioni
Avvia Milten JS Scanner per la pagina da esaminare. Conserva l’URL, la data e le condizioni del test insieme al risultato. Lo scanner osserva un caricamento senza clic né scorrimento. Riporta il caricamento degli script, la copertura e gli errori JavaScript; non dimostra che un file sia superfluo in tutto il sito.
Confronta i dati di caricamento di un file con i suoi dati di esecuzione. Un trasferimento di grandi dimensioni, un lungo periodo di esecuzione e un'elevata quota non eseguita sono osservazioni diverse. Uno script può essere scaricato rapidamente mantenendo occupato il thread principale. Un file che non è stato caricato non ha alcuna misurazione di esecuzione utile per quell'esecuzione.
Segui un esempio illustrativo di pagamento
Supponiamo che app.js contenga il codice della pagina di destinazione e quello del checkout. La funzione di checkout non viene eseguita all’apertura della pagina di destinazione. È un esempio didattico, non un risultato misurato su un sito cliente.
Individua l’URL della risorsa e verifica come la pagina la importa. Apri il checkout, usa il menu e visita altre pagine che condividono il bundle. Registra le azioni provate. Con Chrome DevTools Coverage, la registrazione può continuare durante le interazioni. Questa osservazione copre più di una scansione limitata al caricamento iniziale.
Se il checkout richiede quel codice, rimuoverlo comprometterebbe una funzione utile. Può valere la pena caricarla quando l’utente arriva al checkout. La scelta dipende dall’applicazione e dall’effetto sull’interazione successiva.
Usa le source map disponibili
Una source map collega il bundle generato ai moduli sorgente. La vista dei moduli di Milten richiede una source map valida, supportata e leggibile dallo scanner. Se manca, quella parte del report resta incompleta. Le informazioni su risorse ed errori possono comunque aiutare a individuare il problema.
Senza una source map utilizzabile, esamina il percorso di importazione della risorsa e l’output della build. L’assenza della vista dei moduli non dimostra che tutto il codice sia stato eseguito. La guida MDN alle source map spiega il rapporto tra codice generato e codice originale.
Apporta una modifica e prova il percorso interessato
Scegli un'opportunità confermata, ad esempio la separazione di una funzionalità utilizzata di rado o il ritardo di un'integrazione opzionale. Mantieni la modifica abbastanza piccola da poter essere confrontata. Verifica che la funzionalità richiesta funzioni ancora, che non vengano visualizzati nuovi errori della console e che la rete carichi i file desiderati.
Usa Speed Scanner per esaminare il caricamento e INP Scanner per indagare un’interazione lenta. TBT e attività lunghe al caricamento non misurano la stessa cosa dell’INP delle visite reali. Per gli oggetti che si accumulano dopo navigazioni ripetute, usa Memory Leaks e riproduci il percorso segnalato.
Confronta prove in condizioni equivalenti
Ripeti il test sullo stesso URL con le stesse condizioni di dispositivo, rete e cache. Conserva entrambi i report e annota le interazioni provate manualmente. Dopo aver pubblicato la modifica, verifica la build di produzione: quella di sviluppo può comportarsi diversamente.
Posso rimuovere ogni byte non eseguito?
No. Il risultato descrive un periodo di osservazione, non tutti gli stati possibili dell’applicazione. Prova le azioni pertinenti e i percorsi che condividono il bundle prima di rimuovere il codice.
Un pacchetto più piccolo garantisce una pagina più veloce?
No, contano anche l'ordine di caricamento, la risposta del server, l'esecuzione e le successive interazioni. Confronta il percorso dell'utente e la dimensione del file.
Analizza il JavaScript di una pagina. Per approfondire il contesto del caricamento, leggi velocità del sito e SEO.
