Più richieste HTTP include il vostro sito, più lento sarà il suo caricamento. Ridurre il numero di richieste HTTP e ottimizzare il loro caricamento, è possibile migliorare le prestazioni del vostro sito web.
In questo post, vi spiegheremo tutto quello che dovete sapere su come fare meno richieste HTTP su WordPress.
Inizieremo con un’introduzione di base alle richieste HTTP, perché sono importanti e come analizzare le richieste del vostro sito WordPress.
Condivideremo poi alcuni consigli e strategie che potrete implementare per ridurre le richieste del vostro sito. Oltre ad aiutarvi con il messaggio “Make Fewer HTTP Requests” in GTmetrix, queste strategie vi aiuteranno anche con il suggerimento “Avoid chaining critical requests” in Google PageSpeed Insights.
Preferite guardare la versione video?
Cosa Sono le Richieste HTTP?
Quando si costruisce un sito web, ci sono molte parti diverse da tenere in considerazione. Ci sono i diversi file di immagine usati in una pagina, i fogli di stile CSS che controllano l’aspetto del contenuto, i file JavaScript che aggiungono tutte quelle funzionalità interessanti, e così via.
Quando qualcuno visita il vostro sito web, il suo browser ha bisogno di un modo per scaricare tutte le risorse necessarie per quella pagina dal vostro server. Per fare questo, invia richieste HTTP al server per ogni singola risorsa.
Per esempio, potrebbe dire, “hey server, ho bisogno del file bellaimmagine.png” e “hey server, ho anche bisogno del foglio di stile CSS per quel plugin per i moduli di contatto“. Il server risponde a queste richieste con i file in questione.
Una volta che il browser web ottiene quei file, può assemblare la pagina web per chi la sta visitando. Naturalmente è un po’ più complicato di così, ma questa è l’idea di base.
HTTP, abbreviazione di Hypertext Transfer Protocol, è il modo in cui questi computer (il browser del visitatore e il vostro webserver) comunicano.
Una cosa importante da capire è che ogni elemento separato è una richiesta HTTP separata. Per esempio, se avete cinque file immagine su una pagina web, il browser deve fare cinque richieste HTTP separate, una per ogni immagine.
Allo stesso modo, se usate quattro plugin WordPress e ogni plugin aggiunge il proprio foglio di stile CSS, il browser del visitatore dovrà effettuare quattro richieste HTTP separate, una per ogni foglio di stile del plugin.
Perché È Importante Ridurre le Richieste HTTP?
In generale, più richieste HTTP fa il vostro sito web, più lento sarà il caricamento. Quindi, se volete che il vostro sito web si carichi più velocemente, dovete ottimizzare e ridurre il numero di richieste HTTP che il vostro sito richiede.
Anche se questa è una semplificazione un po’ eccessiva, l’idea di base è che il browser web visualizzerà il sito web ai visitatori solo quando avrà finito di scaricare tutte le richieste HTTP (anche se ci sono alcune tattiche per dire al browser che va bene aspettare per certi file).
Quindi, se un sito web deve fare 70 richieste HTTP prima di poter visualizzare la pagina, ci vorrà più tempo che se deve fare 40 richieste HTTP.
Inoltre, alcune richieste HTTP “bloccheranno” altre richieste HTTP, il che significa che il browser non può iniziare a scaricare alcune richieste HTTP finché non ha finito di scaricare le richieste HTTP che vengono prima.
In conclusione: riducendo il numero delle richieste HTTP, rendete più veloce il caricamento del sito web.
Come Vedere e Analizzare le Richieste HTTP del Vostro Sito
Per il momento avete imparato che, a parità di condizioni, la riduzione del numero di richieste HTTP accelererà il vostro sito. Tuttavia, le richieste HTTP non sono sempre tutte “uguali”. Alcune richieste HTTP sono più grandi di altre. Alcune sono più lente di altre.
Ad esempio, la richiesta di un enorme file immagine da 3 MB richiederà molto più tempo rispetto alla richiesta di una piccola immagine da 20 KB.
Se volete apportare il più grande miglioramento al vostro sito, concentratevi prima sulle grandi richieste HTTP a caricamento lento in modo da avere il maggiore ritorno sul vostro investimento.
Per analizzare le richieste HTTP del vostro sito, potete usare una cosa chiamata Waterfall analysis.
La maggior parte degli strumenti di test della velocità offrono questa funzione, ma le interfacce di GTMetrix e Pingdom sono molto pratiche. Potete anche usare gli strumenti di sviluppo del browser (le funzioni “developers tools”). In questo articolo, useremo GTmetrix per le nostre schermate.
Una volta indicato il vostro URL, vedrete un riquadro riassuntivo con le informazioni di base in alto. Questo mostra quante richieste HTTP ha il vostro sito, ma non suddivide le singole richieste:
Per analizzare le vostre richieste individuali, andate alla scheda Waterfallqui sotto.
Qui, vedrete un elenco di ogni singola richiesta HTTP sul vostro sito insieme alle informazioni su quanto tempo ha richiesto il download di quella richiesta:
Si può notare come non tutte le richieste HTTP siano uguali. Per esempio, l’immagine di 839,3 KB prende 1,12s mentre l’immagine di 57,6 KB prende solo 87,5 ms:
Potete anche trovare le richieste HTTP dai diversi plugin di WordPress che state usando: vi basta cercare il nome della cartella di quel plugin sul vostro server. Per esempio, si può vedere che WooCommerce aggiunge sette richieste HTTP:
In questo modo, vedrete subito se qualche plugin che state usando sta aggiungendo molte richieste HTTP (e se queste caricano lentamente).
Come Ottimizzare e Ridurre le Richieste HTTP in WordPress
Ad alto livello, ci sono due strategie generali per ridurre le richieste HTTP:
- Rimuovere le richieste HTTP. Se possibile, dovreste rimuovere completamente ogni richiesta HTTP non necessaria. Per esempio, se disponete di un plugin che non aggiunge alcun valore al vostro sito e che sta caricando i suoi CSS e JavaScript, è sufficiente rimuovere completamente quel plugin per eliminare tutte le sue richieste HTTP.
- Combinare le richieste HTTP. Se avete richieste HTTP che dovete assolutamente caricare, potete combinarle in un unico file. Per esempio, invece di sei piccoli file CSS, potete combinarle in un unico file CSS più grande, che si caricherà comunque più velocemente perché il browser deve fare meno richieste (questo non è sempre vero con HTTP/2, di cui parleremo più avanti).
Inizieremo con le tattiche che si concentrano sulla rimozione delle richieste HTTP e poi ci occuperemo di come combinare le rimanenti richieste HTTP. L’idea di base è quella di rimuovere ciò che è possibile e poi combinare ciò che rimane.
1. Rimuovere i Plugin WordPress Non Necessari
Per iniziare, usate l’analisi Waterfall per avere una lista di tutte le richieste dei plugin. Potete farlo cercando “plugins”, così da richiamare ogni richiesta HTTP proveniente dalla cartella wp-content/plugins.
Se passate il mouse sul nome del file, potete vedere da quale plugin proviene. Ad esempio, nell’immagine potete vedere una richiesta da un plugin per slider che potreste utilizzare.
Approfondendo un po’ di più, potrebbe emergere che Slider Revolution aggiunge tre delle proprie richieste HTTP, anche se questa pagina di prova non contiene alcun cursore:
Se usate Slider Revolution per uno slider cruciale per il vostro sito, allora forse è necessario tenerlo. Ma se lo avete installato per prova, poi in seguito avete rimosso lo slider e ora non lo state usando veramente…beh, dovreste rimuoverlo per sbarazzarvi di quelle richieste HTTP.
In pratica dovete esaminare l’intera lista e chiedervi se ogni plugin sta realmente aggiungendo valore al vostro sito. Se un plugin non ha valore per voi (ma sta aggiungendo richieste HTTP), allora sarà meglio rimuoverlo.
2. Sostituire i Plugin Pesanti con Altri Più Leggeri
Una volta eliminati i plugin non necessari, il passo successivo è quello di vedere se è possibile sostituire i plugin che state usando con alternative più leggere.
Per esempio, diciamo che voelte aggiungere pulsanti di condivisione social al vostro sito. Questa è una buona caratteristica da avere, ma alcuni plugin di condivisione social possono aggiungere un sacco di richieste HTTP.
Per esempio, il popolare plugin AddThis aggiunge sei delle proprie richieste HTTP (incluse alcune richieste esterne – e su questo ci soffermeremo tra un po’):
Si potrebbe tagliare molto di questo surplus usando un’alternativa più ottimizzata come NovaShare o Grow by MediaVine.
3. Caricamento Condizionale degli Script Che Non Sono Necessari in Tutto il Sito
A questo punto, avreste dovuto rimuovere tutti i plugin che non sono necessari per il vostro sito. Tuttavia, c’è un’altra classe di plugin che potrebbe causare problemi: i plugin che sono necessari solo su specifiche parti del vostro sito ma che caricano i loro script ovunque.
Prendete per esempio, il popolare Contact Form 7 plugin. Probabilmente avrete bisogno di questo plugin solo su un paio di pagine (ad esempio la vostra pagina “Contattaci”). Tuttavia, il Contact Form 7 carica i suoi script su ogni singola pagina del vostro sito. Così, per esempio, Contact Form 7 sta ancora aggiungendo alcune richieste HTTP ai vostri articoli del blog, anche se in quelle pagine non compare alcun modulo di contatto.
Un altro esempio potrebbe essere WooCommerce se lo usate solo come processore di pagamento. WooCommerce caricherà comunque i suoi script ovunque, anche se in realtà ne avete bisogno solo sulle pagine carrello e pagamenti.
Una tattica avanzata è quella di caricare condizionatamente i plugin solo dove sono necessari. Per esempio, potreste lasciare che il Contact Form 7 venga caricato nella vostra pagina “Contattaci”, ma disabilitarlo in qualsiasi altro posto.
Se non la programmazione non è il vostro mestiere, potete usare plugin come AssetCleanUp o Perfmatters per ottenere lo stesso risultato senza toccare il codice. Con Perfmatters, dovrete prima abilitare il gestore di script. Potete poi aprire lo script manager per visualizzare tutti gli script che si caricano su una pagina e disabilitare quelli che non sono necessari:
Fate attenzione perché potreste causare problemi se accidentalmente disabilitate uno script che è davvero necessario. Anche se questa è una tecnica utile, si tratta pur sempre di una tecnica avanzata.
Se avete dubbi, meglio saltare questo passaggio o assumere un/a professionista che vi aiuti.
4. Rimuovere le Immagini Non Necessarie (e Ottimizzare il Resto)
Se usate bene, le immagini rendono il vostro sito web più user-friendly e coinvolgente. Aggiungono valore al vostro sito.
Tuttavia, ogni immagine sul vostro sito crea una richiesta HTTP separata. Quindi, se avete immagini che non aggiungono valore, è meglio rimuoverle per eliminare quelle richieste HTTP.
Ad esempio, vale la pena mantenere quella divertente GIF? Forse…ma forse anche no: pensate ai compromessi ogni volta che aggiungete altre immagini ai vostri contenuti.
Infine, assicuratevi di ridimensionare e comprimere le immagini che rimangono. Questo da solo non servirà a diminuire il numero di richieste HTTP, ma ridurrà la dimensione di tali richieste HTTP e le renderà più veloci.
5. Usare il Lazy Loading per Immagini e Video
Con il lazy loading, il vostro sito caricherà in modo differito le immagini, video e gli iframe che si trovano nella parte bassa della pagina (below-the-fold) fino a quando un utente non inizierà a scorrerla verso il basso.
Poiché queste risorse non si caricano subito, non c’è bisogno di fare una richiesta HTTP per il caricamento della pagina iniziale.
A partire da WordPress 5.5, WordPress include il lazy loading per le immagini usando l’attributo HTML loading . Per scoprire altri modi di implementare il lazy loading (anche per i file video), potete consultare la nostra guida completa al lazy loading in WordPress.
6. Limitare l’Uso di Font Personalizzati e/o Usare Font di Sistema (Idem per gli Icon Fonts)
I font personalizzati sono ottimi per migliorare il design e l’esperienza utente sul vostro sito. Tuttavia, è necessario fare attenzione a come li si usa, perché ogni tipo di font personalizzato che inserite aggiunge un’altra richiesta HTTP.
Se intendete usare font personalizzati, assicuratevi di ridurne il numero. Avete davvero bisogno di un font diverso per il titolo del vostro post e per il corpo del post? O potreste usare lo stesso font? Avete davvero bisogno di tutti e cinque i pesi dei font? O potreste sceglierne solo due?
Lo stesso vale per gli icon fonts come Font Awesome e IcoMoon. Gli icon fonts possono essere utili, ma probabilmente non è necessario caricare più librerie di icon fonts. È meglio scegliere una sola libreria e attenersi a quella.
Infine, se volete fare un passo avanti ed eliminare completamente le richieste HTTP relative ai font del vostro sito, potete considerare l’uso di uno stack di font di sistema. Se da un lato questo vi darà meno flessibilità in termini di design, significa anche che i vostri visitatori non dovranno caricare tutti i file di font per vedere il vostro sito.
(Lettura suggerita: Come Cambiare i Font in WordPress).
7. Disattivare gli Emoji di WordPress
Per impostazione predefinita, WordPress aggiunge la propria richiesta HTTP per gli emojis. Anche se è solo una singola richiesta HTTP di 5,1 KB, questo file è stato a lungo una spina nel fianco dei fan delle prestazioni di WordPress. Noi di Kinsta amiamo le prestazioni di WordPress, ed è per questo che abbiamo scritto un’intera guida su come disabilitare gli emoji di WordPress.
L’opzione più semplice è quella di installare e attivare il plugin gratuito Disable Emojis (GDPR friendly). Leggete la nostra guida completa per scoprire altre opzioni.
Dopo aver fatto questo, il conteggio delle vostre richieste HTTP diminuirà e potrete comunque utilizzare gli emojis 😃
8. Ridurre/Eliminare le Richieste HTTP di Terzi
Finora ci siamo concentrati principalmente sulla riduzione delle richieste HTTP per i file ospitati sul server del vostro sito WordPress. Tuttavia, i browser dei vostri visitatori potrebbero anche avere bisogno di richiedere file da server di terze parti.
Queste richieste possono essere ancora più fastidiose perché il vostro sito è alla mercé della velocità di quei server di terze parti.
Alcuni esempi:
- Google Analytics – lo script di tracciamento è ospitato sui server di Google, ma i browser dei visitatori devono comunque scaricare quel file.
- Video YouTube integrati – vedrete molte richieste HTTP ai server di YouTube.
- Servizi pubblicitari di terze parti – vedrete tonnellate di richieste di terze parti legate ai vostri annunci.
- Google Fonts (sul CDN di Google) – vedrete le richieste ai server di Google per caricare i vostri file di font.
Potete applicare molte delle tattiche viste finora a queste richieste HTTP di terze parti.
Per esempio, se un plugin aggiunge le proprie richieste di terze parti (come fa il plugin AddThis di cui sopra), potete rimuoverlo e usare qualcosa di più ottimizzato.
Per i video di YouTube, potete caricarli con lazy loading e sostituire il caricamento iniziale della pagina con una miniatura dell’immagine. Questo ritarderà l’aggiunta di quelle richieste HTTP fino a quando un visitatore non vorrà riprodurre il video.
Per gli script di terze parti che sono necessari, come Google Analytics o Facebook Pixel, potete sperimentare l’hosting locale di questi script.
WP Rocket dispone di add-on integrati per ospitare localmente Google Analytics e Facebook Pixel; in alternativa, potete usare un plugin come CAOS (Complete Analytics Optimization Suite).
Abbiamo anche alcune guide che potrebbero esservi d’aiuto:
- In-Depth Guide on Hosting Local Fonts in WordPress
- Sincronizzare Google Analytics Localmente per Motivi di Performance
9. Combinare le Immagini con i CSS Sprites
A questo punto, dovreste già essere in grado di ridurre le richieste HTTP dal vostro sito. Ora è il momento di capire come combinare le richieste HTTP che rimangono, a partire dalle immagini.
Un altro modo per ottimizzare le immagini sul vostro sito è quello di combinare immagini separate in un unico file immagine. Potete poi usare i CSS per visualizzare solo una parte di quel file immagine dove necessario. Questa è una tecnica chiamata CSS Sprites.
I CSS Sprites funzionano meglio per immagini decorative come variazioni di logo o icone. Non dovreste usarli per immagini informative (come le immagini nel corpo di un articolo del blog) perché ci sono due grandi svantaggi:
- SEO – poiché si combinano le immagini in un unico file immagine, non è possibile classificare le singole immagini in Google Search.
- Accessibilità – poiché non è possibile aggiungere alt-text alle immagini, le persone che usano lettori di schermo non saranno in grado di capire le immagini caricate con i CSS Sprites (anche se ci sono alcune tecniche per risolvere questo problema).
Se questo argomento non vi è ancora super chiaro, ecco un esempio del file CSS Sprites di Amazon: potete vedere come include sia una serie di variazioni di logo sia alcune icone. Amazon usa i CSS per assicurarsi che solo la relativa “porzione” di quel file immagine venga visualizzata in ogni posizione:
Purtroppo non c’è un plugin WordPress di quelli “installalo e dimenticatene” per i CSS Sprites. Tuttavia, potete trovare strumenti che vi aiutano, come CSS Sprite Tool:
- Caricate nello strumento le immagini che volete combinare.
- Lo strumento vi darà un file di immagine combinato, insieme a un po’ di codice CSS per ogni immagine che avete caricato.
- Caricate il file immagine combinato sul vostro sito WordPress.
- Usate il codice CSS per visualizzare l’immagine nel contenuto. Il CSS fornito selezionerà automaticamente solo la parte appropriata del file di immagine combinata.
10. Combinare i File CSS e JavaScript
Tra tema WordPress e plugin, il vostro sito sta probabilmente caricando diversi fogli di stile CSS e file JavaScript, il che significa più richieste HTTP dovute al fatto che il browser deve scaricare i CSS e JavaScript di cui ha bisogno per rendere la pagina.
Per ridurre tutte queste richieste separate, è possibile combinare questi file/fogli di stile in un unico file/foglio di stile. Questa tecnica si chiama combinazione di file o concatenazione di file, a seconda dello strumento che state usando.
Molti plugin per il caching di WordPress includono funzioni per combinare file CSS e JavaScript. Ad esempio, WP Rocket, che potete usare su Kinsta, consente di abilitare entrambi con pochi clic.
Andate alla scheda File Optimization nelle impostazioni di WP Rocket. Quindi, abilitate la minificazione e poi combinate i file:
Per informazioni più dettagliate, consultate la nostra guida completa su WP Rocket.
Potete anche usare Autoptimize per combinare file CSS e JavaScript. Per combinarli, andate su Settings → Autoptimize e scegliete le opzioni per:
- Aggregare i file JS
- Aggregare i file CSS
Per un aspetto più dettagliato, date un’occhiata al nostro tutorial completo su Autoptimize.
I vantaggi della combinazione di file non sono molto chiari con HTTP/2, che è ciò che il vostro sito usa se si trova su Kinsta. HTTP/2 è progettato per essere più efficiente nel trasferimento di molteplici file piccoli: questo significa che c’è meno differenza tra un grande file CSS/JS e molteplici file piccoli.
Fondamentalmente, se il vostro sito si trova su Kinsta, potreste non aver bisogno di fare questo passo per migliorare i tempi di caricamento delle vostre pagine. Questo perché i clienti Kinsta possono accedere alla funzione di minificazione del codice direttamente nel loro cruscotto MyKinsta. Questo aiuterà a migliorare l’ottimizzazione complessiva consentendo ai clienti di abilitare la minificazione automatica di CSS e JavaScript con un semplice clic.
Vi consigliamo comunque di testarlo, in quanto può essere ancora vantaggioso per alcuni siti, ma potreste anche non notare alcuna differenza nei tempi di caricamento delle pagine reali.
Tuttavia, molti strumenti di test delle prestazioni come GTmetrix non riconoscono ancora l’HTTP/2, quindi GTmetrix potrebbe ancora visualizzare il messaggio “Make Fewer HTTP Requests” e ridurre il vostro punteggio. Ricordate, però, che i punteggi non sono importanti quanto i tempi reali di caricamento delle pagine.
11. Rinviare i JavaScript Che Bloccano il Rendering
Rinviare il JavaScript che blocca il rendering non elimina di per sé le richieste HTTP. Tuttavia, con questa tecnica state ottimizzando il loro caricamento, e quindi può finire per avere un effetto sui tempi di caricamento percepiti dal vostro sito.
Questo metodo vi può anche aiutare per risolvere il messaggio “Avoid chaining critical requests” in Google PageSpeed Insights/Lighthouse.
Rinviando le richieste di alcuni file o caricandoli in modo asincrono, potete evitare che alcune risorse non importanti “blocchino” le risorse necessarie per caricare rapidamente la parte visibile del sito.
Per saperne di più sul perché questo accade, potete leggere la nostra guida per capire il percorso di rendering critico di una pagina web.
Potete poi seguire la nostra guida dettagliata per eliminare le risorse che bloccano il rendering su WordPress.
I Migliori Plugin WordPress per Ridurre le Richieste HTTP
Se siete alla ricerca di alcuni plugin “tutto in uno” di WordPress per ridurre il numero di richieste HTTP, vi consigliamo due dei plugin che citiamo nel tutorial di cui sopra:
Anche se avrete ancora bisogno di valutare manualmente il vostro tema e i plugin per vedere se stanno facendo troppe richieste HTTP, entrambi questi plugin possono aiutarvi a ottimizzare tutto ciò che rimane sul vostro sito una volta che avete fatto la pulizia.
Riepilogo
Ogni risorsa separata sul vostro sito aggiunge una richiesta HTTP. Un’immagine è una richiesta HTTP, un foglio di stile CSS è una richiesta HTTP, un file di font è una richiesta HTTP, e così via.
Se state usando WordPress, il vostro tema aggiungerà sicuramente le sue richieste HTTP e molti plugin aggiungeranno le loro. Avrete anche richieste HTTP provenienti da qualsiasi immagine che usate e dagli script di terze parti che aggiungete (come gli strumenti di analisi).
Richieste HTTP più numerose e/o più grandi porteranno a un sito web più lento. Questo è il motivo per cui vedrete comunemente messaggi che vi invitano a ridurle, come “make fewer HTTP requests” o “optimize HTTP requests” o “avoid chaining critical requests” nei risultati di strumenti di test di velocità come GTmetrix o PageSpeed Insights.
Per ridurre il numero di richieste HTTP sul vostro sito, potete seguire i passi che abbiamo dettagliato sopra.
Avete ancora domande su come fare meno richieste HTTP in WordPress? Fatecelo sapere nei commenti!
Redattore Capo presso Kinsta e Content Marketing Consultant per sviluppatori di plugin WordPress. Entra in contatto con Matteo su Twitter.
Lascia un commento