Come identificare quali script bloccano il rendering della tua pagina
Apri Chrome DevTools (F12) → tab Performance → registra un caricamento della pagina. Cerca le barre rosse nella sezione “Main Thread”: ogni picco lungo corrisponde a uno script che blocca il browser. In alternativa, usa PageSpeed Insights: nella sezione “Opportunità” trovi “Elimina le risorse che bloccano il rendering” con una lista ordinata per impatto.
La strategia per non rinunciare ai tuoi strumenti di marketing mantenendo la velocità
Non devi eliminare i tuoi strumenti. Devi cambiare il modo in cui li carichi:
- Aggiungi
defer a tutti gli script non critici (quelli che non servono prima che la pagina sia visibile).
- Usa Google Tag Manager come unico punto di ingresso per tutti i tag marketing: riduce i DNS lookup aggiuntivi.
- Per i casi più estremi, valuta Partytown, una libreria che sposta l’esecuzione degli script di terze parti in un Web Worker separato, liberando il thread principale.
Ogni strumento che installi introduce tre costi nascosti: un DNS lookup (la risoluzione del nome di dominio del servizio), un TCP handshake e spesso un TLS negotiation. Con 12-15 servizi terzi attivi (pixel Meta, Hotjar, Intercom, Trustpilot, LinkedIn Insight Tag, Google Analytics, heatmap tools) stai potenzialmente aggiungendo centinaia di millisecondi solo in overhead di connessione.
Secondo il Web Almanac 2024 di HTTP Archive, il 92% delle pagine web carica almeno una risorsa di terze parti. Non è solo una questione di peso: il vero danno è la dipendenza dalla disponibilità dei loro server. Se Hotjar ha un’interruzione o rallentamento quel giorno, il tuo sito ne risente, indipendentemente dall’eccellenza della tua infrastruttura.
Come fare un audit dei servizi terzi attivi sul tuo sito
Vai su webpagetest.org, inserisci il tuo URL e avvia un test. Nel report risultante, clicca sulla tab “Third-Party Summary”: troverai la lista completa di tutti i domini esterni caricati dalla pagina, con il numero di richieste, il peso in KB e il tempo di blocco sul main thread di ciascuno.
È spesso rivelatorio: trovi pixel di campagne terminate mesi fa, widget non più in uso, script duplicati.
- <link rel=”preconnect”>: inserisci nell’
<head> un tag preconnect per i domini critici (es. Google Fonts, GTM). Il browser avvierà la connessione in anticipo, prima che le risorse vengano richieste.
- Audit trimestrale dei tag in GTM: rimuovi tutti i tag non usati nelle ultime campagne. Un pixel orfano continua a caricarsi a ogni pagina view.
- Self-hosting selettivo: alcuni script (es. Google Analytics GA4) possono essere serviti tramite server proxy sul tuo dominio, eliminando il DNS lookup esterno.
Fattore #4: Come i font web rubano secondi preziosi all’esperienza utente
I Google Font sono gratuiti, eleganti, facili da usare. Sono anche, senza la configurazione giusta, una delle cause più frequenti di testo invisibile durante il caricamento, tecnicamente noto come FOIT (Flash of Invisible Text).
Il problema funziona così: il browser scarica l’HTML, vede il testo, ma il font web non è ancora arrivato. Aspetta. Durante quell’attesa, il testo non esiste visivamente. Il Largest Contentful Paint non si attiva. Google lo registra come “pagina lenta” anche se strutturalmente è velocissima.
Perché caricare i font da Google invece che dal tuo server ti costa in ranking
Ogni font caricato da fonts.googleapis.com richiede una connessione a un dominio esterno. Quel dominio non è sul tuo CDN. Non è nella tua cache. È un DNS lookup aggiuntivo per ogni visita, su ogni browser che non ha già quella risorsa in cache locale.
La soluzione migliore in assoluto è il self-hosting dei font: scarichi i file .woff2 e li servi dal tuo server (o CDN). Elimini la dipendenza esterna, controlli la cache, guadagni in performance.
Come eliminare il testo invisibile con font-display: swap
Aggiungi font-display: swap alla dichiarazione @font-face. Questo dice al browser: “mostra il testo con un font di sistema mentre aspetti, poi sostituisci”, così l’utente vede sempre del testo. Abbinalo a <link rel="preload"> per i font above-the-fold e il tuo LCP migliorerà in modo misurabile.
Fattore #5: La trappola dei redirect a catena
Ogni redirect aggiunge latenza. Un redirect 301 ben fatto costa circa 200-300ms. Una catena di tre redirect (A → B → C → D) può costare quasi un secondo intero, prima ancora che il browser abbia iniziato a scaricare qualcosa.
Le catene di redirect si accumulano nel tempo: la migrazione da HTTP a HTTPS, il passaggio da www a non-www, il cambio di CMS, la ristrutturazione degli URL di categoria. Ognuno lascia tracce e nessuno le pulisce.
L’impatto dei redirect sul crawl budget e sul ranking organico
Google ha un crawl budget limitato per ogni sito: un numero di pagine che Googlebot è disposto a scansionare in un dato arco di tempo. Ogni redirect consuma parte di quel budget. Su siti grandi (e-commerce con migliaia di SKU, portali editoriali) le catene di redirect possono ridurre significativamente la frequenza con cui le nuove pagine vengono indicizzate.
Come mappare e “appiattire” i redirect del tuo sito in un pomeriggio
Usa Screaming Frog SEO Spider (gratuito fino a 500 URL) in modalità crawl e filtra per “Response Code → Redirect”. Identifica tutte le catene e imposta redirect diretti (A→D in un solo hop). Converti ogni 302 esistente da più di 6 mesi in 301 permanente.
Fattore #6: Perché le tue immagini “ottimizzate” continuano a pesare troppo
“Le abbiamo convertite in WebP e compresse con TinyPNG.” Bene. Ma questo risolve solo metà del problema.
L’altra metà si chiama responsive image sizing: servire un’immagine da 1.400px a un telefono con viewport di 390px significa scaricare circa 13 volte i pixel necessari. Il file WebP pesa 60KB invece di 200KB, ottimo, ma un file WebP da 60KB a dimensione piena, su mobile, potrebbe essere ottimizzato a 12KB con le dimensioni corrette.
Quella differenza si moltiplica per ogni immagine above-the-fold.
| Formato |
Supporto browser |
Riduzione vs JPEG |
Consigliato per |
| JPEG |
Universale |
Baseline |
Fotografie complesse |
| WebP |
97%+ |
–25/35% |
Uso generale |
| AVIF |
91%+ |
–50% vs JPEG |
Immagini hero, prodotto |
| SVG |
Universale |
N/A (vettoriale) |
Loghi, icone, illustrazioni |
Come implementare il lazy loading e il responsive sizing senza toccare il codice
L’attributo HTML loading="lazy" è supportato nativamente da tutti i browser moderni e posticipa il caricamento delle immagini fuori schermo. Per il responsive sizing, gli attributi srcset e sizes sono lo strumento corretto, ma se il CMS li genera male, la soluzione scalabile è un image CDN come Cloudinary o Imgix: ridimensionano, convertono e ottimizzano le immagini in tempo reale in base al dispositivo dell’utente, senza intervento manuale.
Fattore #7: La cache HTTP mal configurata che scarica le risorse da zero ad ogni visita
La cache del browser è il meccanismo più potente per la performance degli utenti di ritorno ed è sistematicamente mal configurata nel 70% dei siti. Quando funziona correttamente, un utente che torna sul sito carica CSS, JavaScript e immagini dalla memoria locale senza fare nemmeno una richiesta al server. Zero latenza. Caricamento istantaneo.
Il problema classico: header Cache-Control assenti (il browser decide da solo, spesso male), max-age troppo brevi che scadono in pochi minuti, oppure caching troppo aggressivo su file che cambiano frequentemente.
La strategia del content hashing che permette cache infinita senza rischi
La soluzione di riferimento si chiama cache busting tramite content hashing: i framework moderni (Next.js, Nuxt, Vite, Astro) rinominano automaticamente ogni file statico includendo un hash del suo contenuto nel nome (es. main.a3f92b.js). Questo permette di impostare Cache-Control: max-age=31536000, immutable, un anno intero, in totale sicurezza.
Quando aggiorni il file, il suo contenuto cambia, l’hash cambia, il nome del file cambia, il browser scarica la nuova versione. Se non usi un framework moderno, puoi ottenere lo stesso risultato configurando il tuo processo di build con Webpack o Gulp.
Fattore #8: Il layout che si sposta dopo il caricamento e distrugge l’esperienza mobile
Il Cumulative Layout Shift (CLS) misura quanto gli elementi della pagina si spostano dopo il caricamento iniziale. È la metrica Core Web Vitals più legata alla frustrazione dell’utente: stai per cliccare un link, la pagina si sposta, premi qualcosa di completamente diverso. Su mobile, dove lo spazio è limitato, ogni shift è amplificato.
Google considera un CLS sopra 0,1 come “da migliorare”, sopra 0,25 come “scarso” e le penalizzazioni di ranking per CLS elevato sono documentate e misurabili.