Come ridurre le richieste HTTP in WordPress
Ogni elemento di una pagina web — CSS, JavaScript, immagini, font, icone — genera una richiesta HTTP separata al server. Più richieste significano più tempo per caricare la pagina, specialmente su connessioni lente o mobili. Ridurre il numero di richieste HTTP è una delle ottimizzazioni più efficaci per velocizzare WordPress. In questa guida ti mostro le tecniche principali per minimizzare le richieste HTTP senza sacrificare funzionalità.
Perché le richieste HTTP impattano sulle performance
Ogni richiesta HTTP ha un costo in termini di tempo: il browser deve risolvere il DNS, stabilire la connessione TCP, negoziare TLS (per HTTPS) e poi attendere la risposta. Anche se ogni richiesta richiede solo 50-100 millisecondi, con 80-100 richieste per pagina (non è raro su siti WordPress con molti plugin) il tempo totale si accumula rapidamente. I browser moderni gestiscono le richieste in parallelo, ma c’è un limite al numero di connessioni simultanee per dominio (tipicamente 6). Ridurre le richieste significa meno attesa e un rendering della pagina più veloce.
Identificare quante richieste fa il tuo sito
Prima di ottimizzare, misura la situazione attuale. Apri gli Strumenti per Sviluppatori del browser (F12 in Chrome), vai alla tab Network e ricarica la pagina. In basso vedrai il numero totale di richieste e il peso complessivo. Un sito WordPress ottimizzato dovrebbe avere meno di 40-50 richieste per pagina. Puoi anche usare GTmetrix o WebPageTest per un’analisi dettagliata con suddivisione per tipo di risorsa.
Combinare i file CSS e JavaScript
Ogni plugin WordPress carica i propri file CSS e JS. Con 15 plugin attivi, puoi facilmente avere 20-30 file separati. Combinare (concatenare) questi file in uno o pochi file riduce drasticamente le richieste. Plugin come Autoptimize e WP Rocket combinano automaticamente i file CSS in un unico file e i file JS in un altro.
Dopo la combinazione, è fondamentale testare il sito: a volte la combinazione di JavaScript può causare errori se l’ordine di caricamento viene alterato. In caso di problemi, puoi escludere script specifici dalla combinazione nelle impostazioni del plugin.
Minificare CSS e JavaScript
La minificazione rimuove spazi, commenti e caratteri non necessari dai file CSS e JS, riducendone il peso senza alterare la funzionalità. Autoptimize, WP Rocket e LiteSpeed Cache offrono tutti la minificazione automatica. La riduzione è tipicamente del 10-30% per i CSS e del 15-40% per i JavaScript. Combinata con la combinazione dei file, l’impatto sulle performance è significativo.
Eliminare i plugin che non usi
Ogni plugin attivo può caricare file CSS e JS su ogni pagina, anche quando non servono. Un plugin di slider carica il suo CSS e JS anche sulle pagine senza slider. Un plugin per le recensioni carica le sue risorse anche sulle pagine che non mostrano recensioni. La prima azione è disattivare e eliminare i plugin che non usi realmente. Ogni plugin rimosso è un potenziale risparmio di 2-5 richieste HTTP per pagina.
Caricare gli asset solo dove servono
Per i plugin che usi ma che servono solo su specifiche pagine, puoi usare Asset CleanUp o Perfmatters per disabilitare il caricamento dei loro CSS e JS sulle pagine dove non sono necessari. Ad esempio, puoi disattivare il CSS di Contact Form 7 su tutte le pagine tranne quella di contatto. Questo può ridurre le richieste di 10-20 per pagina senza perdere alcuna funzionalità.
Usare sprite CSS o icon font
Se il tuo sito usa molte piccole icone come immagini separate, ogni icona genera una richiesta. Le soluzioni sono due: gli sprite CSS che combinano tutte le icone in un’unica immagine e usano il posizionamento CSS per mostrare quella giusta, oppure gli icon font come Font Awesome che caricano tutte le icone in un unico file font. La soluzione più moderna è usare SVG inline: le icone vengono inserite direttamente nell’HTML senza generare richieste aggiuntive.
Implementare il lazy loading
Il lazy loading non riduce il numero totale di richieste, ma riduce quelle necessarie per il caricamento iniziale. Le immagini sotto la piega della pagina vengono caricate solo quando l’utente scorre verso di esse. Questo accelera il rendering iniziale e migliora la metrica Largest Contentful Paint. WordPress include il lazy loading nativo dalla versione 5.5, ma plugin come WP Rocket offrono opzioni più granulari, come il lazy loading di iframe e video YouTube.
Ridurre i font esterni
I Google Fonts e altri web font generano richieste aggiuntive verso server esterni. Ogni variante di font (regular, bold, italic) è un file separato. Per ridurre l’impatto, limita il numero di font a massimo 2 famiglie e solo le varianti che usi realmente. Ancora meglio, ospita i font localmente sul tuo server usando il plugin OMGF (Optimize My Google Fonts) o scaricando manualmente i file font. Questo elimina le richieste verso server esterni e dà al browser il pieno controllo sulla priorità di caricamento.
Preconnettere ai domini esterni
Se il tuo sito deve caricare risorse da domini esterni (CDN, Google Fonts, script di analytics), puoi velocizzare la connessione usando i resource hints. Aggiungi nell’header del sito:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="dns-prefetch" href="https://www.google-analytics.com">
Il preconnect stabilisce la connessione TCP e TLS in anticipo, mentre il dns-prefetch risolve il DNS. Entrambi risparmiano tempo quando il browser deve effettivamente scaricare le risorse.
Serve aiuto con l’ottimizzazione?
Se il tuo sito WordPress fa troppe richieste HTTP e vuoi velocizzarlo senza rischiare di rompere qualcosa, il team di SoccorsoWP può ottimizzare le performance del tuo sito con interventi mirati e testati. Apri un ticket e riduci i tempi di caricamento.
