JavaScript di terze parti: quanto costa davvero

Uno script di terze parti sincrono in testa ha spostato il primo paint di 388 ms: nella prova senza script il FCP è 296 ms, con lodash.min.js in testa è 684 ms. Lo stesso file con defer lascia il FCP a 284 ms, quindi il costo non è il file, è il momento in cui lo carichi.

Tre varianti, un solo file

Il divario tra sincrono e defer è 400 ms di FCP: con lo script sincrono il parser si ferma prima di dipingere. I byte delle due varianti differiscono per come il server ha compresso la risposta, non per il contenuto.

Il costo che non si vede

Un host terzo paga un handshake che la connessione già aperta verso la tua origine non può riusare: nella nostra misura 63 ms di TLS e 86 ms al primo byte, prima di scaricare un solo byte utile. Poi arrivano i byte del file: 26.751 per lodash, 153.653 per un tag di Google Analytics demo, letti con curl lo stesso giorno.

for u in https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js \
         "https://www.googletagmanager.com/gtag/js?id=G-DEMO123"; do
  curl -s -o /dev/null -H "Accept-Encoding: gzip, br" \
    -w "$u dns=%{time_namelookup} tls=%{time_appconnect} ttfb=%{time_starttransfer} bytes=%{size_download}\n" "$u"
done

Il comando stampa una riga per host: DNS, fine del TLS, primo byte e byte trasferiti. Il tempo che conta è tls, perché è quello che la tua pagina paga prima di poter chiedere il file.

Come si riduce

• Metti in defer o async tutto ciò che non serve al primo paint: 400 ms di FCP nella nostra prova. Fonte: MDN, CC BY-SA 2.5.
• Ospita il file sulla tua origine quando puoi: elimini l'handshake verso un host terzo e un DNS che non controlli. Fonte: web.dev, CC BY 4.0.
• Aggiungi rel=preconnect solo per gli host che usi davvero, non per ogni tag aperto in ufficio. Fonte: MDN, CC BY-SA 2.5.
• Misura per tag: se non sai a cosa serve uno script, la risposta è rimuoverlo. Il tag demo pesa 153.653 byte.

Il limite da dichiarare

La prova misura un file, una pagina e una rete simulata: un sito con sei tag non paga sei volte lo stesso ritardo, perché le connessioni si riusano e gli script si sovrappongono. defer toglie il blocco del parser ma non il lavoro sul thread principale, e un long task da 61 ms è comparso comunque in una delle cinque run sincrone. Consenso, privacy e cookie banner hanno un costo che qui non è misurato.

Dove continuare

Il catalogo EneUI indicizza 111.985 componenti, l'hero horizon-hero-section e l'icona icon-access-point: un hero con video e un font in più pesa più di uno script di analytics. Leggi come si fissa un performance budget, il bundle splitting e quanto pesa una UI library.