Ecco una storia che ti piacerà se vuoi velocizzare il tuo sito WordPress.

L’altro giorno mi è capitato di analizzare un sito web di un potenziale cliente. C’era un pò di tutto : WooCommerce, Google Tag Manager, OneSignal, helpdesk, Yoast, banner dei cookie, social media e molti altri plugin.

Il mio cliente era deciso a impressionare i suoi visitatori, o almeno così pensava, ma il sito era drasticamente lento. Dopo i primi indugi, ho aperto GTMetrix per analizzare il problema.

Con mio grande sgomento, ho visto questo:

risultati del test di velocità gtmetrix

Mi ha preso un colpo! Quindi, ho premuto il pulsante re-test, ma indovina un pò? Sempre lo stesso risultato. Ero sconvolto, persino arrabbiato. Ma non mi arrendo facilmente perché questo tipo di cose è inaccettabile.

Sai cosa ho fatto dopo? Ho testato il sito web su Pingdom. Ma, di seguito sono riportati i risultati tristi, ancora una volta:

risultati del test di velocità gtmetrix

Ero esasperato. Il problema erano quelle tante richieste richieste HTTP visto che potevo risolvere molti degli altri problemi rapidamente.

A peggiorare le cose, il sito web del mio cliente stava usando un tema WordPress e-commerce che caricava un miliardo di elementi per renderizzare la homepage. Sembrava incredibile. 

Avevo bisogno di una soluzione e velocemente.

Come ridurre le richieste HTTP su un sito WordPress?

Ogni volta che visiti un sito web WordPress, molti dati si spostano tra il browser e i server del sito web. In altre parole, WordPress invia richieste HTTP a vari server per creare ciò che gli utenti vedono quando caricano il tuo sito.

Se il tuo sito WordPress ha molti elementi da caricare, avrai più richieste HTTP e viceversa. Più richieste HTTP significano un sito web più lento, un’esperienza utente scadente (UX), punteggi SEO pessimi e bassi tassi di conversione.

I siti WordPress sono dinamici, il che significa che ci vogliono parti diverse per renderizzare e visualizzare il tuo sito web in un browser. La buona notizia è che puoi ridurre le richieste HTTP e velocizzare notevolmente il tuo sito.

E nel post di oggi, imparerai esattamente come.

I rapporti di GTMetrix e Pingdom di solito mostrano dove si trova il problema. Pertanto, testa il tuo sito utilizzando entrambi gli strumenti per scoprire le aree che devi migliorare. Con i rapporti pronti, ecco come ridurre le richieste HTTP/S e velocizzare il tuo sito WordPress.

Passaggio 1: Declutter

Se hai un “sacco di roba” sul tuo sito web WordPress, avrai troppe richieste HTTP. Il primo passo per ridurre le richieste HTTP è il decluttering.

Con questo voglio dire che devi liberarti di tutti i plugin che non ti servono. I plugin di WordPress vengono forniti con molti file, siano essi PHP, CSS o JavaScript (JS). Ogni file generato da ciascun plugin creerà una richiesta HTTP.

Se hai un sacco di plugin, avrai sicuramente più richieste HTTP. Meno plugin, meno richieste. È estremamente semplice.

Cosa fare?

Effettua un controllo dei tuoi plugin. Quali plugin devi tassativamente avere per far funzionare il tuo sito web? Ci sono plugin che non ti servono? Hai plugin che si collegano a server di terze parti? Puoi fare a meno di questi plugin?

Per ridurre le richieste HTTP, disinstalla tutti i plugin che non ti servono. Se hai bisogno di un plugin di tanto in tanto, installalo solo quando ti serve. Successivamente, disinstallalo.

Lo stesso vale per i temi e i contenuti di WordPress che non usi. Pulisci tutto. Rimuovi tutto ciò che non ti serve; fa bene alla velocità e alla sicurezza del tuo sito web.

Puoi fare di più e caricare i plugin in modo selettivo. Se ad esempio hai bisogno di caricare solo contact form 7 sulla tua pagina dei contatti, puoi interrompere il caricamento di altri plugin in quella pagina specifica.

Sarebbe fantastico, non sei d’accordo? E pensare che hai solo bisogno del plugin Asset CleanUp: Page Speed Booster.

Il plugin è facile da usare e abbastanza efficiente, come dice lo sviluppatore:

“Asset CleanUp” esegue la scansione della pagina e rileva tutte le risorse caricate. Tutto quello che devi fare quando modifichi una pagina / post è solo selezionare i CSS / JS che non sono necessari, riducendone così la pesantezza.

Pulisci la tua installazione; sbarazzati della spazzatura, commenti spam inclusi. Elimina i link interrotti e ottimizza anche il tuo database di WordPress . Queste sono aree significative da considerare per quanto riguarda l’aumento della velocità del tuo sito, ma sto divagando.

Torniamo a come ridurre le richieste HTTP.

Passaggio 2: ottimizza le immagini

Un sito web senza immagini è triste. Dicono che un’immagine valga più di mille parole. Ma ogni immagine rappresenta una richiesta HTTP e per peggiorare le cose, le immagini sono gli elementi che impiegano più tempo a caricarsi.

Tuttavia, non possiamo ignorare il fatto che la maggior parte dei temi WordPress si basano soprattutto sulle immagini. Quindi, alla luce di ciò, come puoi ridurre le richieste HTTP ottimizzando le tue immagini?

Per cominciare, sbarazzati di tutte le immagini che non usi. Sii spietato; sbarazzati di tutto quella pesantezza, non ne hai bisogno. Successivamente, comprimi e ottimizza le immagini per rimuovere dai file i dati non necessari.

Esistono diversi plugin tra cui scegliere ma WP Compress ci piace molto. Sebbene sia un servizio premium, la potente ottimizzazione automatica delle immagini, la compressione senza perdita di dati, l’elaborazione cloud per ridurre il carico del server, il supporto delle immagini webP, il ridimensionamento automatico e altro lo rendono un investimento degno di considerazione. Inoltre puoi iniziare con 100 immagini gratis, quindi puoi almeno provarlo.

L’ottimizzazione delle immagini non riduce di per sé le tue richieste HTTP, ma riduce le dimensioni dei tuoi file di immagini, il che si traduce in una migliore velocità di caricamento della pagina.

In alternativa, per ridurre le richieste HTTP, puoi sfruttare la potenza degli sprite di immagini CSS . Per chi non lo sapesse, uno sprite è una raccolta di immagini inserite in un singolo file di immagine.

Quindi, usando i CSS, puoi scegliere quale parte dell’immagine mostrare. Ma come si riducono le richieste HTTP? Te lo spiego con un esempio.

Supponi di aver bisogno di cinque immagini sulla tua home page. Per caricare il tuo sito, l’installazione di WordPress effettuerà cinque viaggi sul server per ottenere quelle immagini. Ora, se metti tutte e cinque le immagini in un unico file di immagine (sprite), l’installazione di WordPress farà un solo “viaggio” per recuperarle..

Meno “viaggi”, meno richieste HTTP. La parte migliore è che non è necessario sudare per creare e implementare sprite di immagini CSS. Puoi usare uno strumento come CSS Sprite Generator . L’implementazione di sprite di immagini CSS è semplice, a patto che tu sappia cavartela con i CSS.

Suggerimento  : puoi dimenticare tutto sugli sprite di immagini CSS se il tuo sito web utilizza HTTP/2 che supporta il caricamento asincrono di immagini e script. GTMetrix non tiene conto di HTTP/2 durante il calcolo del punteggio delle prestazioni, quindi non preoccuparti se sembra che le tue immagini stiano creando tonnellate di richieste HTTP.

Ma io ti dico: se gli sprite di immagini CSS possono ridurre significativamente le richieste HTTP sul tuo sito e sai come implementare lo stesso, provaci e dedica quei secondi in più dal tempo di caricamento della pagina. Che tu abbia o meno HTTP/2.

Dopotutto, un singolo file di immagine richiede una singola richiesta HTTP. Dieci immagini separate richiedono 10 richieste HTTP e così via. 

Passaggio 3: Combina e minimizza HTML, CSS e JavaScript

La causa principale di molte richieste HTTP sul sito web WordPress del mio cliente era costituita da file CSS e JavaScript esterni. Sì, stavo litigando con 60 script JS e 32 file CSS. Un numero enorme, 92 richieste HTTP.

Su circa 210 richieste HTTP, le richieste CSS e JavaScript esterne rappresentavno circa il 50% del problema ! È semplicemente ridicolo. Grazie, GTMetrix,

Se combino e minimizzo quei 60file CSS e 32 JS, posso ridurre significativamente le mie richieste HTTP, le dimensioni del sito web e il tempo necessario per il caricamento. Ma in cosa consiste questa “combinazione” e “minificazione”?

Secondo Raelene Morey of Words by Birds la minificazione è il processo di :

.. rimozione di caratteri non necessari, come commenti, formattazione, spazi bianchi e nuove righe da file HTML, CSS e JavaScript che non sono necessari per l’esecuzione del codice.

La riduzione riduce le dimensioni del file eliminando tutti gli altri caratteri e lascia solo il codice. Ma se hai più di 66 script esterni, la minimizzazione non farà molto per minimizzare le richieste HTTP. Per questo, è necessario combinare i file CSS e JavaScript.

Ancora una volta, Raelene dice:

La combinazione di file, invece, è proprio quello che sembra .Se la tua pagina web carica ad esempio 5 file CSS esterni e 5 file JavaScript esterni, combinando CSS e JavaScript in un singolo file separato, ciascuno comporterebbe solo 2 richieste anziché 10.

Capito? Lo spero proprio. La combinazione di file riduce le richieste HTTP. La minimizzazione, d’altra parte, riduce la dimensione del file. Combina i due e prendi due piccioni con una fava…

Esistono dei plugin per questo? Sì, naturalmente!

Esistono moltissimi plugin WordPress per combinare e minimizzare i tuoi file. Un buon esempio è il plugin WP Rocket. È fondamentalmente uno dei migliori plugin di memorizzazione nella cache che offre funzionalità per combinare e minimizzare i file in pochi clic (puoi leggere la nostra recensione dettagliata di WP Rocket).

Un’altra opzione molto conosciuta (e gratuita ) è il plugin Autoptimize .

Passaggio 4: regola i file CSS e JavaScript che bloccano il rendering

In alcuni casi, la combinazione di file potrebbe non essere una soluzione, in particolare per file e script di terze parti che cambiano frequentemente. In tali casi, è possibile posticipare il caricamento di tali risorse. HTTP/2 supporta il caricamento asincrono di file, il che significa che tutti i file vengono caricati contemporaneamente.

Se non hai un caricamento asincrono in corso per qualche motivo (forse non stai usando HTTP/2, o gli script non sono asincroni), questi file possono rallentare significativamente il tuo sito web.

Tieni presente che le tue pagine web vengono caricate dall’alto verso il basso. Se nella parte superiore della pagina sono presenti CSS e JS che bloccano il rendering, il browser interromperà il caricamento fino a quando i file non saranno stati caricati completamente. Pertanto, gli utenti vedranno una pagina vuota fino al caricamento degli script, il che richiede tempo.

Come risolvere? Sposta gli script che bloccano il rendering della pagina web dall’alto verso il basso . Ma fai attenzione; non è necessario spostare tutti gli script in basso. Lo dico poiché la tua pagina potrebbe aver bisogno di CSS e JS per offrire un’esperienza davvero coinvolgente.

Se rinvii alcuni file CSS o JavaScript, i tuoi utenti potrebbero vedere una versione distorta della tua pagina web fino a quando la pagina non viene caricata completamente, il che è esattamente l’opposto di ciò che desideri ottenere.

Quindi, differisci solo gli script che non sono necessari per il caricamento della pagina. In questo modo, i tuoi utenti non aspetteranno anni per il caricamento della tua pagina. Perché? Perché avrai bisogno di meno richieste HTTP per recapitare il tuo messaggio.

Non riduce di per sé le richieste HTTP (poiché alla fine verranno caricati tutti gli script e i file), ma riduce il numero di richieste HTTP necessarie per il rendering della tua pagina.

È molto simile al lazy loading delle immagini; l’immagine viene caricata solo quando è nella viewport, non quando viene caricato il ​​resto (e le parti più importanti) della pagina.

A proposito, la correzione di CSS e JS che bloccano il rendering potrebbe rivelare file e script non necessari per visualizzare la pagina stessa.

Se ad esempio alcuni script JS di condivisione social esterni impiegano molto tempo a caricarsi, è possibile rimandarli. Inoltre, puoi eliminarli e integrare la condivisione sociale nel tuo tema.

Eliminerai le richieste HTTP e accelererai il tuo sito mantenendo la stessa funzionalità. Capisco che mettere mano al codice del tuo tema sia un compito arduo per la maggior parte dei principianti, ma puoi sempre contattare uno sviluppatore WP avanzato.

In alternativa, puoi utilizzare il plugin WP Rocket per correggere gli script di blocco del rendering, ma fai attenzione. Leggi la documentazione del plugin perché se sbagli le cose, puoi facilmente bloccare il tuo sito web.

Ma esistono anche opzioni gratuite? Ovviamente! Stiamo lavorando con WordPress, ricordi? È possibile utilizzare Async JavaScript , tra gli altri plugin.

Passaggio 5: utilizzare cache e CDN

Sapevi che la cache e le CDN possono ridurre le tue richieste HTTP? Non sembra, ma se consideri cosa succede dietro le quinte, puoi usare la cache e la CDN a tuo vantaggio.

La memorizzazione nella cache comporta la memorizzazione di file statici su un browser in modo che gli utenti non scarichino i file nelle visite successive. Supponi di avere un plugin di cache e che l’utente scarichi i contenuti memorizzati nella cache alla prima visita.

Nelle visite successive, il tuo sito non farà richieste al server. Al contrario, servirà le risorse memorizzate nella cache dal browser, riducendo le richieste HTTP e aumentando la velocità del tuo sito.

Una CDN (o Content Delivery Network) è una rete di server collocati in tutto il mondo che utilizza anche la memorizzazione nella cache, ma per velocità ancora più elevate, il provider CDN fornisce il contenuto memorizzato nella cache da un server più vicino al visitatore.

distanze più brevi significano una consegna più rapida dei contenuti e la memorizzazione nella cache significa che il tuo sito web non deve scaricare di nuovo lo stesso contenuto dal server centrale. Ha senso per te?

E soprattutto ci sono una serie di CDN gratuite (o almeno prove gratuite in modo da poter vedere letteralmente la differenza che fa). 

Bonus: assicurati che sia supportato HTTP/2

Puoi fare di tutto per ridurre le richieste HTTP, ma il tuo host web potrebbe essere la causa dei tuoi problemi. 

Probabilmente non sai nemmeno di cosa tratta HTTP/2 . Bene, per cominciare, HTTP/2 supporta il caricamento asincrono di file, tra le altre cose. Ha altri vantaggi rispetto a HTTP 1.0, ma questa è una lezione per un altro giorno.

Se usi HTTP 1.0 o versioni precedenti, noterai un numero considerevole di richieste HTTP.

Non avere fretta nel giudicare; ho visto provider di web hosting che usano ancora HTTP 1.0 e versioni precedenti di PHP. Sì, anche con i vantaggi apparenti di HTTP/2 e PHP 7. Non sto bluffando, alcuni dei loro clienti vengono da me quando alcuni dei loro plugin non funzionano.

Ma davvero, perché? Il fatto che alcuni provider di web hosting non siano infastiditi dal fatto che PHP 5.6 è obsoleto e presenta vulnerabilità di sicurezza ci puà stare. Ma che non supportino HTTP / 2, è davvero gtave.

Test KeyCDN HTTP / 2

Contatta il tuo host o utilizza lo strumento KeyCDN per verificare se il tuo server supporta HTTP/2. I migliori host web supportano HTTP/2 e l’ultima versione di PHP. Se il tuo host non è aggiornato in entrambi i casi, chiedi di aggiornare o scegli un hosting migliore.

Conclusione

Ridurre le richieste HTTP sul tuo sito WordPress significa eliminare le cose che non ti servono. Se hai “tanta roba” sul tuo sito web WordPress, avrai anche molte richieste HTTP e velocità delle pagine relativamente lente.

Per ridurre le richieste HTTP, fai un declutter sul tuo sito, ottimizza le immagini, correggi gli script di blocco del rendering, usa la memorizzazione nella cache e assicurati che il tuo host supporti HTTP/2. Oltre a ciò, cerca di creare siti web semplici e puliti che non richiedono un sacco di risorse da caricare.

Saluti a siti web più veloci e un grande futuro a venire!

Buon lavoro!