Come fare meno richieste HTTP su WordPress e velocizzare il tuo sito

Stai riscontrando un sito WordPress lento? Troppe richieste HTTP potrebbero essere l'origine del problema. La riduzione del tempo di caricamento della pagina del tuo sito effettuando un minor numero di richieste HTTP migliora la velocità con cui gli utenti possono accedere a quel contenuto e influisce sulle loro esperienze di navigazione web complessive. La velocità di caricamento della pagina è importante e influisce direttamente sul modo in cui gli utenti si sentono riguardo all'utilizzo di un'app o di un sito Web.

Ma cosa sono le richieste HTTP? Quanti dovrebbero essere fatti per pagina? Con quante richieste hai attualmente a che fare? Resta con noi: in questo articolo definiremo le richieste HTTP, spiegheremo perché sono importanti, come misurarle e come mantenerle basse .

Cosa sono le richieste HTTP?

HTTP è un protocollo di comunicazione utilizzato per fornire contenuti e dati (file HTML, CSS, immagini, video, ecc.) su Internet. Il World Wide Web è un luogo espansivo con molte informazioni ospitate su server, giusto? Se vuoi accedere a questo contenuto, il tuo browser deve inviare richieste e ricevere risposte. Senza le richieste, non c'è comunicazione efficace tra te e il server.

Una richiesta HTTP può anche essere vista come un livello di comunicazione tra l'utente e il server. Il messaggio inviato dal client è chiamato HTTP (Hypertext Transfer Protocol), che aiuta a strutturare efficacemente i messaggi di richiesta in tre parti: riga di richiesta, intestazione e corpo.

Come puoi vedere, ogni volta che visiti un sito, vengono fatte alcune richieste HTTP per visualizzare il contenuto. Di conseguenza, maggiore è il numero di richieste HTTP effettuate su una pagina, maggiore sarà il tempo necessario per il caricamento.

Ti starai chiedendo, quante richieste HTTP sono "troppe" richieste HTTP? Esaminiamo alcune cifre chiave in modo da sapere dove posizionare il tuo sito WordPress:

• Prestazioni eccezionali: ottenere richieste HTTP inferiori a 25 per pagina
• Prestazioni sane: mantenere le richieste HTTP al di sotto di 50 per pagina
• Richieste HTTP medie sul Web: 70 richieste HTTP

È importante mantenere il tuo sito in salute perché troppe richieste HTTP rallenteranno il tuo sito. Spieghiamo perché nella prossima sezione.

Perché dovresti ridurre le richieste HTTP

Dovresti effettuare meno richieste HTTP per mantenere velocità e prestazioni elevate. Yahoo ha affermato che "l'80% del tempo di risposta dell'utente finale viene speso nel front-end". In altre parole, le tue prestazioni sono principalmente influenzate da immagini, fogli di stile e script, che vengono tutti renderizzati grazie a richieste HTTP.

Sono un componente chiave per la visualizzazione del contenuto, ma la chat tra il server e l'utente richiede tempo per essere caricata. Questo roundtrip di dati è chiamato tempo di risposta di andata e ritorno (RTT):

Un altro motivo per fare meno richieste HTTP è mantenere integri i tuoi Core Web Vitals, in particolare il tuo KPI Largest Content Paint (LCP).

LCP determina la velocità di caricamento del primo contenuto significativo. Riguarda la percezione della velocità da parte degli utenti.

Tre fattori influenzano il punteggio LCP del tuo sito WordPress: tempi di risposta del server lenti, JavaScript e CSS che bloccano il rendering e tempo di caricamento delle risorse lento. Pertanto, ridurre il numero di richieste HTTP è la chiave per pagine più veloci. Meno richieste HTTP effettua il tuo sito web, più velocemente può caricare il contenuto più importante (LCP) per l'utente.

Per riassumere:

E ricorda, se gli utenti possono accedere ai tuoi contenuti più velocemente, aumenterai le possibilità che rimangano sulla pagina e interagiscano con il tuo sito. Interagire significa anche che potrebbero acquistare i tuoi prodotti... E non solo eviti la frustrazione dei visitatori, ma anche Google amerà il tuo sito.

Questo ci porta alla prossima domanda cruciale: quante richieste HTTP sta facendo il tuo sito WordPress?

Come testare e misurare le richieste HTTP del tuo sito

Esistono alcuni strumenti online che simulano le richieste HTTP sul tuo sito WordPress, vale a dire:

• GTmetrix ( devi avere un account gratuito per accedere ai dettagli della tua pagina ): inserisci semplicemente l'URL del tuo sito, esegui l'audit e apri la scheda "Riepilogo " . Scorri verso il basso fino all'ultima sezione chiamata "Dettagli pagina" per scoprire quante richieste sta facendo la tua pagina.

La scheda a cascata è un ottimo modo per vedere quanto tempo impiegano le singole richieste HTTP sul tuo sito:

Puoi anche guardare le richieste HTTP provenienti da un plug-in specifico, come Elementor:

• Pingdom: inserisci semplicemente il tuo URL nella casella per scoprire quante richieste HTTP richiede la tua pagina:

• Query Monitor: uno strumento di debug gratuito per identificare plug-in o script che rallentano il caricamento delle pagine. Il pannello Chiamate API HTTP mostra le informazioni sulle richieste HTTP eseguite durante il caricamento della pagina.

10 modi per fare meno richieste HTTP al tuo sito web (manualmente e con un plug-in)

Meno richieste HTTP significano meno byte da scaricare, ma può essere scoraggiante avviare questa ottimizzazione. Non preoccuparti. Grazie al nostro elenco di tecniche di seguito, sarai in grado di ridurre le tue richieste HTTP. Per ogni tattica, daremo sempre due soluzioni: utilizzare un plugin per WordPress e uno manuale.

1. Combina CSS e JavaScript

Impatto: alto

Un modo semplice per ridurre le richieste HTTP è combinare più file JS e CSS.

Con il tuo tema e plug-in WordPress, è necessario caricare molti fogli di stile CSS e JS. Ciò richiede che il browser carichi tutte queste risorse per il rendering di pagine Web, il che significa più richieste HTTP.

Combinazione di CSS e JS utilizzando strumenti online:

• Minimizza: combina più file CSS o JavaScript.
• Combina: script PHP combinato con la riscrittura degli URL per concatenare e comprimere file CSS e JavaScript.
• csscompressor.net (solo CSS) — Compressore CSS online, veloce e gratuito da usare.
• jscompress.com (solo JS): questo strumento di compressione JavaScript consente di combinare file JavaScript in un unico file.
• SmartOptimizer — Una libreria PHP che migliora le prestazioni del tuo sito Web ottimizzando il front-end utilizzando tecniche di concatenazione.
• CSS-JS-Booster — Concatena, minimizza e comprime i file CSS e JavaScript.
• CSS Crush — Concatena e minimizza i file CSS.
• csscompressor.net (solo CSS) — compressore CSS online, veloce e gratuito da usare.
• jscompress.com (solo JS): questo strumento di compressione JavaScript consente di combinare file JavaScript in un unico file.

Caricare i tuoi nuovi file CSS e JS combinati sul tuo sito WordPress:

Il nostro obiettivo è riunire tutte le richieste separate in un unico file.

• Copia/incolla semplicemente tutto il tuo codice CSS in un file principale e ricarica il file sul server (fallo solo se sei a tuo agio con i tuoi file WordPress)
• Se stai usando il pannello C:
  • Accedi al tuo cPanel
  • Vai al tuo "Gestione file"
  • Clicca sulla cartella che contiene il tuo sito WordPress
  • Crea una cartella nella tua directory principale con il nuovo file combinato

Combinazione di file CSS e JS utilizzando un plug-in (il modo più rapido e sicuro):

• WP Rocket: combina i file minimizzati in un file per tipo di file (CSS o JavaScript)

• Autoptimize: ti aiuta con la concatenazione dei tuoi script (CSS o JavaScript).

2. Combina immagini con Sprite CSS

Impatto: alto

Gli sprite CSS sono un ottimo modo per ridurre il numero di richieste HTTP fatte per le risorse di immagine. Tutti i file CSS sul tuo sito bloccano la visualizzazione, il che significa che più file CSS vengono caricati, più è probabile che questo rallenti il ​​tuo sito.

Per evitare ciò, dovresti ottimizzare le immagini sul tuo sito e combinarle in un unico file. Fatto ciò, è il momento di orientarsi verso la tecnica degli sprite CSS: usa CSS per visualizzare solo una parte di quel file immagine dove è necessario. Questa tecnica migliora le prestazioni del sito in cui vengono utilizzate molte piccole immagini, loghi o icone.

Puoi saperne di più nel nostro articolo dedicato sulla combinazione di immagini utilizzando sprite CSS in WordPress.

Combinazione di immagini con sprite CSS utilizzando strumenti basati sul Web:

• Generatore, editor e codice di sprite CSS
• CSSspritestool
  • Vai al sito CSSspritestool per combinare più immagini in una usando il builder drag-and-drop.
  • Ottieni un file immagine combinato, insieme ad un codice CSS per ogni immagine che carichi.
  • Carica il file immagine combinato sul tuo sito WordPress
  • Aggiungi il codice CSS al tuo sito WordPress utilizzando il Customizer
  • Visualizza ogni immagine dove vuoi usando HTML

3. Ottimizza le immagini (ed elimina quelle non importanti)

Impatto: alto

Sebbene non esista alcun plug-in WordPress esistente che ti consenta di combinare in modo specifico immagini con sprite CSS, puoi comunque utilizzare alcuni incredibili plug-in per ottimizzare le tue immagini. Le immagini sono un must per l'esperienza dell'utente, ma ecco il trucco: ogni immagine sul tuo sito è una richiesta HTTP separata! Di conseguenza, sceglili con saggezza e considera solo di avere immagini che apportino valore ai tuoi contenuti.

Ottimizzare le immagini significa ridurne il peso senza compromettere la qualità. Non ha senso avere un'immagine chiara sfocata dove il contenuto non può nemmeno essere identificato, giusto?

Ecco alcuni strumenti di ridimensionamento che puoi utilizzare:

• Photoshop
• GIMP: gratuito, Windows e Mac
• IrfanView — Gratuito per Windows
• Anteprima per Mac — Già installato!

Per ottimizzare automaticamente le tue immagini, ti consigliamo di utilizzare un plugin per WordPress:

• Imagify — di WP Media, la stessa azienda dietro WP Rocket. Ottimizza gratuitamente fino a 20 MB di immagini al mese.
• Optimole (ottimizzazione dell'immagine e carico pigro di Optimole)

Leggi il nostro articolo dedicato per scoprire altri plugin di ottimizzazione delle immagini.

Nota : l'ottimizzazione delle immagini non ridurrà direttamente il numero di richieste HTTP, ma ne ridurrà le dimensioni e le farà caricare più velocemente.

4. Abilita il Lazy Load sulle immagini

Impatto: alto

Implementare il "carico pigro" significa posticipare il caricamento delle immagini al di fuori del viewport del browser. In parole semplici, se il tuo visitatore non scorre fino in fondo, le immagini poste alla fine della pagina non verranno nemmeno caricate. Grazie allo script di caricamento lento, riduci il numero di richieste HTTP perché carichi solo le immagini above the fold.

Implementazione manuale dello script di caricamento lento:

Innanzitutto, devi determinare come caricherai le tue immagini: stai usando il tag <img> o CSS? Web.Dev spiega molto bene come implementare lo script di caricamento lento per entrambi i metodi. È inoltre necessario verificare se l'elemento è nella finestra utilizzando l'API Intersection Observer.

Ecco come può apparire il carico pigro rispettivamente su un'immagine e su un iframe:

<img src=”image.jpg” alt=”…” loading=”lazy”><iframe src=”video-player.html” title=”…” loading=”lazy”></iframe>

​​Utilizzare un plug-in di caricamento lento per applicare automaticamente lo script:

• Lazy Load di WP Rocket (gratuito): mostra il contenuto solo quando è visibile all'utente.
• WP Rocket: viene fornito con le funzionalità di carico pigro. È un plug-in premium che offre molti altri vantaggi come la memorizzazione nella cache, la pulizia del codice, ecc.)
• Se stai cercando più plug-in per il carico pigro, dai un'occhiata al nostro articolo.

5. Minimizza HTML, CSS e JavaScript

Impatto: medio

Minimizzare il codice significa rimuovere spazi bianchi, commenti e caratteri extra non necessari da un file per alleggerirlo. Questa tecnica può essere applicata a file JavaScript, CSS e HTML. Naturalmente, si tratta di ripulire il codice che non è cruciale per gli utenti finali.

Esempio di JS non minimizzato	Esempio di un JS minimizzato

Minimizzare il codice manualmente :

Prima di modificare il file, scarica una copia dal tuo server per salvarla sul tuo computer per tenerla al sicuro.

• Minimizzare HTML: apri il foglio di codice e rimuovi commenti (<!– … –>), spazi extra, interruzioni di riga e contenuti simili
• Minimizzare CSS: rimuovere spazi e commenti extra dai file CSS (/* … */) Abbreviare il più possibile ID, classi o nomi di variabili
• Minimizzare JS: rimuovere i commenti JS (//) e gli spazi extra dal codice sorgente. Trasforma gli array in oggetti quando possibile, ottimizza le tue istruzioni condizionali e trova le risposte alle espressioni costanti di base.

Minimizzare il codice utilizzando uno strumento online :

• Usa un editor di codice come Sublime text per modificare il file
• Incolla il tuo codice in uno di quegli strumenti online: Closure Compiler, CSS nano, JS nano, UNCSS. (Abbiamo un elenco completo di codici di minimizzazione gratuiti da verificare).
• Sostituisci il tuo vecchio codice con il nuovo codice ridotto e caricalo di nuovo sul tuo sito

Utilizzo di un plug-in WordPress per minimizzare il codice :

• WP Rocket: riduci automaticamente CSS e JS. Tutto quello che devi fare è selezionare due caselle. WP Rocket ha una sezione dedicata per l'ottimizzazione dei file.

6. Sostituisci i plugin pesanti con quelli leggeri

Impatto: medio

Le lente velocità di caricamento del tuo sito potrebbero derivare da uno o due plug-in che stanno sovraccaricando il tuo sito WordPress con troppe richieste HTTP. Per classificare un plug-in come leggero, dovresti considerare: qualità e professionalità del codice, le funzionalità, l'efficienza con cui il codice le esegue e la dimensione del file.

Come segnalare i plug-in lenti del tuo sito WordPress?

Diciamo che stai esitando tra due plug-in dei moduli di contatto (A e B). Usa i nostri 5 passaggi per eseguire la tua diagnosi:

1. Esegui un test delle prestazioni utilizzando Pingdom per verificare il numero di richieste HTTP: annota il tuo punteggio
2. Attiva il plug-in A ed esegui di nuovo il test: annota il tuo punteggio
3. Disattiva il plug-in A e installa il plug-in B per eseguire lo stesso controllo
4. Confronta quante richieste HTTP sono state aggiunte per ciascun plugin
5. Scegli quello con meno richieste HTTP ed elimina quello lento!

Utilizzo di un plug-in per identificare quali plug-in stanno rallentando il tuo sito con troppe richieste HTTP:

• Il plug-in Query Monitor può essere utilizzato per identificare quali plug-in stanno danneggiando il tuo sito e aiutarti a rimuoverli

7. Carica gli script solo quando necessario (e solo su pagine specifiche)

Impatto: medio

Un altro modo per effettuare meno richieste HTTP è disabilitare selettivamente script e plug-in da pagine/post specifici che non devono essere caricati.

Usa un plugin per WordPress per caricare lo script solo quando necessario:

• Perfmatters : consente di disabilitare uno script su una pagina o un post.

• Asset Cleanup Pro — che è un po' meno intuitivo ma fa anche il suo lavoro.

8. Riduci script esterni/richieste HTTP

Impatto: medio

Il caricamento di ogni script di terze parti è una richiesta HTTP aggiuntiva che il browser effettua, rallentando le prestazioni della pagina (ecco come puoi ridurre l'impatto degli script di terze parti). Tenere traccia di tutte le integrazioni di terze parti è fondamentale per capire quali risorse esterne rallentano la velocità del tuo sito. Abbiamo spiegato come ridurre le tue richieste HTTP. Non lasciamoci influenzare da quelli esterni, giusto?

Troppe richieste HTTP spesso costringeranno le risorse a essere recuperate dalla rete e non lo vogliamo per le nostre prestazioni.

Gli script esterni provengono principalmente da tag di Google Analytics, pixel di Facebook, video di YouTube, pulsanti di condivisione social e tag di test A/B. Si consiglia vivamente di identificare tutti i file che stanno aggiungendo richieste.

Utilizzo degli strumenti per identificare gli script esterni più pesanti:

• Strumenti per le prestazioni come questi Chrome DevTools, PageSpeed ​​Insights e WebPageTest possono aiutarti a identificarli.

Ottimizzazione manuale delle richieste di terze parti :

Ora che hai identificato quali script esterni influiscono sulle prestazioni, puoi utilizzare l'attributo async o defer su di essi:

< script asincrono src= “script.js”> < differimento script src= “script.js”>

Se vuoi saperne di più sull'utilizzo di entrambi gli attributi, ti consigliamo di leggere Web.Dev, che elenca tutti i passaggi per caricare in modo efficiente JS di terze parti.

Utilizzo di un plug-in per ridurre l'impatto degli script esterni sulle prestazioni:

• WP Rocket ti aiuta a ridurre l'impatto del codice di terze parti in molti modi:
  • Hosting di file e tag di Google Analytics in locale.
  • Prelettura delle richieste DNS, il che significa che i file esterni verranno caricati più velocemente.
  • Precaricamento dei caratteri per aiutare i browser a scoprire più velocemente i caratteri di Google nei tuoi file CSS.

• ​​Rimandando il tuo JS di terze parti come annunci e analisi, dì al tuo browser cosa dovrebbe caricare prima.

Per la storia, Telegraph ha recentemente rinviato tutte le sceneggiature e ha migliorato il tempo di caricamento degli annunci di una media di quattro secondi.

9. Usa una CDN

Impatto: medio

Una Content Delivery Network (CDN) si riferisce a server geograficamente distribuiti che servono contenuto dalla posizione più vicina possibile. Indipendentemente da dove si trovi un utente, può accedere ai contenuti del tuo sito in modo rapido ed efficiente. Ogni richiesta HTTP da loro effettuata sarà servita dalla posizione più vicina possibile.

I migliori CDN disponibili sul mercato:

• Rocket CDN
• CDN Cloudflare

Abbiamo anche scritto una guida per aiutarti a scegliere il CDN giusto per te.

10. Rinvia JavaScript e CSS che bloccano il rendering

Impatto: medio

Questa risorsa è molto utile o va bene caricarla in un secondo momento? La necessità immediata di utilizzare la risorsa determinerà se la risorsa sta bloccando il rendering o meno. Per eliminare JavaScript e CSS che bloccano la visualizzazione, è necessario utilizzare l'opzione di rinvio o l'opzione asincrona.

Rimozione manuale delle risorse che bloccano il rendering :

Innanzitutto, esegui un controllo su Google PageSpeed ​​Insights e controlla la sezione delle tue opportunità. Se hai una sezione "Elimina le risorse che bloccano il rendering", probabilmente devi fare qualcosa proprio come nel nostro esempio di seguito:

Per eliminare questo problema manualmente, è necessario utilizzare gli attributi di differimento e asincrono.

Ecco un esempio dell'attributo defer per rinviare JS:

<script defer src="/example-js-script"></script>

Segui il nostro tutorial approfondito che spiega come eliminare le risorse che bloccano il rendering utilizzando entrambi gli script manualmente.

Se vuoi qualcosa di più semplice, usa semplicemente un plugin per WordPress.

Utilizzo di un plug-in WordPress per rinviare JS e CSS :

• WP Rocket — che ti aiuta a rinviare i tuoi file JS nel modo più semplice.   Il plug-in offre anche la funzione "Ottimizza la consegna CSS" che costituisce le risorse di blocco del rendering. Puoi anche escludere qualsiasi file JS o CSS dal differimento, se necessario.

Come ridurre le richieste HTTP con un plug-in

Un plugin come WP Rocket aiuta a ridurre le richieste HTTP e a velocizzare notevolmente il tuo sito. Eseguiamo un controllo delle prestazioni di un sito WordPress con e senza WP Rocket. Vedrai dopo il confronto che è uno dei migliori plugin di memorizzazione nella cache per WordPress.

Useremo GTmetrix per misurare i seguenti KPI:

• Grado di prestazione complessivo (da A a F)
• Punteggi Core Web Vitals (LCP, CLS e FID) + TTI e TBT (Nota: se FID non è disponibile, misureremo FCP)
• Numero di richieste HTTP (Richieste di pagine totali)

In termini di contenuto, il mio sito WordPress contiene del testo, alcune icone dei social media, 8 immagini, un video incorporato da YouTube, una mappa con una puntina (da Google Maps) e 3 testimonianze di clienti con le loro foto.

Scenario 1: misurazione delle prestazioni e delle richieste HTTP: nessun WP Rocket

Diamo un'occhiata ai risultati delle prestazioni utilizzando GTmetrix. Non sono molto incoraggianti e ho ottenuto una "E" per il mio voto complessivo di prestazione:

Notiamo che la mia pagina sta effettuando 140 richieste HTTP e che il 42,9% di esse è dovuto a JS. Ci vogliono 10,2 secondi per caricare completamente la mia pagina e la dimensione della pagina è 5,11 MB.

Le principali raccomandazioni di GTmetrix sono le seguenti:

• Carica in modo efficiente JS di terze parti (rinvia JS, stabilisci connessioni anticipate alle origini richieste e applica lazy-load su risorse di terze parti incorporate)
• Elimina le risorse di blocco del rendering (considera la possibilità di fornire CSS e JS critici in linea e di rinviare tutti gli stili/JS non critici. Scopri di più su cosa sono i CSS critici nel nostro articolo)
• Ottimizza il mio codice (combina e minimizza JS e CSS / ottimizza la consegna CSS)
• Implementa la memorizzazione nella cache delle pagine

Indovina un po? Questo è esattamente ciò che WP Rocket può fare per il tuo sito WordPress (tra le altre cose). Nello scenario 2, attiveremo WP Rocket e controlleremo nuovamente lo stato di salute del nostro sito web. Le cose belle stanno arrivando.

Scenario 2 — Misurazione delle prestazioni e delle richieste HTTP — Con WP Rocket

Ora che WP Rocket è attivato, eseguiamo un altro controllo delle prestazioni utilizzando la stessa pagina.

Questa volta, i risultati sono molto incoraggianti e siamo passati da "E" ad "A" per quanto riguarda il mio voto complessivo di prestazione:

Un altro progresso impressionante è il numero delle mie richieste HTTP che è sceso da 140 a 18 dopo l'attivazione di WP Rocket (-87%).

A livello globale, tutti i miei KPI sono migliori e il mio sito Web è molto più veloce quando si utilizza WP Rocket:

Le nostre prestazioni sono migliorate a livello globale con il plug-in della cache WP Rocket attivato.

WP Rocket ha applicato automaticamente quasi tutte le tecniche elencate nella sezione "Come fare meno richieste HTTP al tuo sito web".

Dalla dashboard di WP Rocket, puoi vedere che il mio codice CSS è stato minimizzato, combinato e ottimizzato:

La stessa ottimizzazione è stata applicata automaticamente al mio JS:

Avvolgendo

WP Rocket ha contribuito a ridurre dell'87% le richieste HTTP del mio sito WordPress . Nel nostro caso di studio abbiamo visto che le nostre richieste sono passate da 140 a 18 semplicemente dopo l'attivazione del plugin. Risparmia tempo e fatica!

Senza WP Rocket	Con WP Rocket
140 Richieste HTTP	18 Richieste HTTP (-87%)

Per mantenere un'ottima performance del tuo sito, ti consigliamo di mantenere le richieste HTTP sotto 50. WP Rocket è un ottimo strumento automatico per non superare mai quel numero! Aumenterà le prestazioni riducendo ed eliminando le richieste HTTP non necessarie, senza alcuna conoscenza tecnica richiesta da parte tua.

Lavora meno e ottieni risultati migliori grazie a WP Rocket oggi! Abbiamo una garanzia di rimborso di 14 giorni: se non sei soddisfatto, ti rimborsiamo. Dai, provalo e dicci come stanno andando le tue richieste HTTP nei commenti.