Come fare meno richieste HTTP in WordPress (11 consigli)

Per visualizzare il tuo sito web, il browser di un utente invierà richieste HTTP al tuo server. Tuttavia, se si dispone di più file non ottimizzati, il server deve elaborare molte richieste. Poiché questi possono aumentare significativamente i tempi di caricamento della pagina, vorrai che il tuo sito Web effettui meno richieste HTTP.

Fortunatamente, è possibile ridurli, ed è di questo che tratta questo post.

Un'introduzione alle richieste HTTP

Ogni volta che un utente visita il tuo sito web, il suo browser deve scaricare risorse dal tuo server. Per comunicare con esso, il browser invia richieste con HTTP (Hypertext Transfer Protocol).

I siti Web comprendono diverse forme di dati e i file per HTML, CSS, immagini e video sono tutti archiviati su un server: il rendering di questo contenuto su un browser richiede richieste HTTP.

Ecco i passaggi coinvolti quando qualcuno naviga in Internet:

È importante notare che il rendering di un sito Web non richiede solo una richiesta HTTP. Ogni singolo file di immagine, foglio di stile del plug-in, script JavaScript, font Web e così via di solito ha il proprio. Pertanto, se il tuo sito non è ottimizzato, potrebbe avere un impatto negativo sui tempi di caricamento.

Perché potresti desiderare che il tuo sito WordPress effettui meno richieste HTTP

Durante la creazione di un sito Web, è importante ridurre al minimo i file non necessari. Quindi, il browser di un visitatore non deve richiedere tante risorse dal server. Poiché il tuo sito effettuerà meno richieste HTTP, si caricherà molto più velocemente.

Come regola approssimativa, un numero maggiore di richieste HTTP porta a una velocità della pagina inferiore. Se ci sono più risorse da scaricare prima di eseguire il rendering della pagina, gli utenti dovranno attendere molto tempo per visualizzare il contenuto.

Ad esempio, un sito Web con solo 50 richieste si caricherà generalmente più velocemente di uno con 70 richieste. Questo perché ci sono meno risorse da elaborare e scaricare.

La vera storia è leggermente più complessa, poiché non tutte le richieste HTTP sono uguali. Una grande richiesta HTTP a caricamento lento potrebbe avere un effetto maggiore rispetto a cinque piccole richieste HTTP a caricamento rapido. Ma come regola generale: meno richieste HTTP = sito web che si carica più velocemente .

Riducendo le richieste HTTP sul tuo sito web, migliorerai i tuoi Core Web Vitals, in particolare il tuo punteggio Largest Content Paint (LCP). A sua volta, questo può migliorare l'esperienza utente (UX) poiché i visitatori vedranno i contenuti più rapidamente.

Come testare le richieste HTTP del tuo sito web

Come accennato in precedenza, le richieste HTTP fanno parte del rendering. Tuttavia, non tutte le richieste HTTP sono uguali. Prima di iniziare a ridurli sul tuo sito web, devi sapere esattamente quali scegliere come target.

Per fare ciò, puoi utilizzare uno strumento di analisi delle prestazioni come GTmetrix. Inizia inserendo l'URL del tuo sito web e premi Test your site :

Riceverai un rapporto sul rendimento contenente informazioni sulla dimensione della tua pagina e sul numero totale di richieste. Per visualizzare questi dati, scorri verso il basso fino a Dettagli pagina :

Puoi anche visualizzare le singole richieste facendo clic sulla scheda Cascata . Questo ti mostrerà quanto tempo ha impiegato ogni file per il download:

Utilizzando questo grafico a cascata, puoi identificare quali elementi del tuo sito causano richieste HTTP non necessarie. Una volta individuato il problema, puoi implementare la soluzione giusta e velocizzare il tuo sito web.

Come puoi vedere nel grafico sopra, ogni richiesta HTTP ha una dimensione diversa e impiega una quantità di tempo diversa per essere caricata.

Se desideri il massimo ritorno sui tuoi sforzi, prova a concentrarti sull'eliminazione delle richieste HTTP più grandi e più lente.

Dovresti anche concentrarti sulla rimozione delle richieste HTTP di terze parti ( risorse che il tuo sito carica dal server di qualcun altro, come gli script di Google Analytics ). Queste richieste di terze parti richiedono ulteriori ricerche DNS e presentano altri svantaggi in termini di prestazioni.

Come fare meno richieste HTTP in WordPress e velocizzare il tuo sito (11 consigli)

Dopo aver testato il tuo sito Web, è il momento di ridurre le sue richieste HTTP.

Di seguito, esamineremo 11 modi diversi per effettuare meno richieste HTTP e ottimizzare le richieste HTTP che rimangono. Alcuni di questi suggerimenti non elimineranno necessariamente le richieste HTTP, ma ottimizzeranno le richieste per caricarle più velocemente, il che è comunque importante per velocizzare il tuo sito.

1. ELIMINA PLUGIN NON NECESSARI
2. DEFER RENDER-BLOCKING JAVASCRIPT E/O RITARDO ESECUZIONE JAVASCRIPT
3. CARICA CONDIZIONALMENTE SCRIPT
4. RIDUCI AL MINIMO LE RICHIESTE DI TERZE PARTI
5. OTTIMIZZA LE TUE IMMAGINI
6. IMPLEMENTA IL CARICAMENTO LAZY
7. UTILIZZARE UNA STACK DI FONT DI SISTEMA
8. COMBINA CSS E JAVASCRIPT
9. USA SPRITES CSS PER COMBINARE IMMAGINI
10. MINIMIZZA IL CODICE DEL TUO SITO
11. DISABILITA EMOJI

1. Elimina i plug-in non necessari

Potresti avere più plugin installati sul tuo sito web. Anche quando non li stai utilizzando attivamente, i plug-in non necessari possono aumentare le richieste HTTP e rallentare le tue pagine web.

Per analizzare le tue richieste di plug-in, cerca "plug-in" nel rapporto GTmetrix Waterfall. Questo mostrerà solo le richieste HTTP che provengono dalla tua cartella wp-content/plugins :

Vedrai quale plug-in ha creato la richiesta passando il mouse sopra un risultato. Per ottimizzare il tuo sito, passa attraverso l'elenco, alla ricerca di plug-in non necessari. Se un determinato strumento non contribuisce attivamente al tuo sito Web, valuta la possibilità di eliminarlo.

2. Rinviare JavaScript che blocca il rendering e/o ritardare l'esecuzione di JavaScript

Se vuoi fare meno richieste HTTP e ottimizzare le tue richieste HTTP, concentrarti su JavaScript è un'altra ottima tattica.

Esistono due modi principali per ottimizzare il caricamento del codice JavaScript del tuo sito:

1. Rinvia JavaScript che blocca il rendering
2. Ritarda l'esecuzione di JavaScript

Rinvia JavaScript che blocca il rendering

Il rinvio di JavaScript che blocca la visualizzazione non rimuoverà di per sé le richieste HTTP, ma assicurerà che il caricamento JavaScript del tuo sito non stia bloccando richieste HTTP più importanti.

Durante il processo di caricamento, un browser potrebbe imbattersi in una risorsa che blocca il rendering. Questi file CSS o JavaScript sospendono il rendering finché la risorsa non viene elaborata. Se disponi di questi file non necessari, potrebbero allungare il tempo per visualizzare i tuoi contenuti.

L'aggiunta di attributi defer o async a questi file informerà il browser di eseguirli in un secondo momento. Con gli attributi di rinvio, gli script vengono scaricati durante l'analisi HTML e quindi eseguiti. Gli attributi asincroni eseguiranno lo script non appena sarà disponibile.

Per implementare ciò, puoi utilizzare un plug-in specifico per le funzionalità come il plug-in JavaScript Async gratuito.

Oppure, molti plug-in generici per prestazioni/memorizzazione nella cache offrono anche questa funzione, inclusi WP Rocket e FlyingPress.

Puoi anche impostarlo manualmente nel codice del tuo sito, se ti senti a tuo agio nel farlo.

Per implementare un attributo defer, devi semplicemente aprire il tuo file functions.php e trovare il tag <script> per la risorsa. Qui, inserisci un attributo di rinvio:

 <script src="resource.js" defer></script>

Ecco come appare un attributo asincrono:

 <script src="resource.js" async></script>

In genere, è preferibile utilizzare gli attributi asincroni. Tuttavia, dovrai utilizzare gli attributi di rinvio quando lo script si basa su un altro script.

Ritarda l'esecuzione di JavaScript

Se desideri effettuare meno richieste HTTP per il caricamento iniziale della pagina, un'altra tattica popolare consiste nel ritardare parte/tutta l'esecuzione di JavaScript del tuo sito fino all'interazione dell'utente.

Quando lo imposti, il tuo sito attenderà di caricare i file fino a quando un utente non effettuerà alcuna interazione, come fare clic, scorrere o così via.

Spostando queste richieste HTTP in una fase successiva della visita, puoi effettuare meno richieste HTTP per il caricamento iniziale e velocizzare notevolmente le metriche incentrate sull'esperienza dell'utente come Largest Contentful Paint.

Per configurarlo, puoi utilizzare uno di questi plug-in per le prestazioni:

• WP Razzo
• FlyingPress
• Perfmatters

Ecco come appare in FlyingPress: puoi ritardare tutti i tuoi script ad eccezione degli script selezionati o ritardare solo gli script selezionati:

3. Caricamento condizionale degli script

Alcuni plugin caricano inutilmente script in tutto il tuo sito. Ad esempio, un plug-in può gestire solo i moduli sulla tua pagina Contattaci ma aggiungere script a un'altra area. In questo caso, consigliamo di caricare in modo condizionale gli script del plugin.

Per caricare in modo condizionale i tuoi plugin, considera l'installazione di uno strumento come Perfmatters. Viene fornito con un gestore di script integrato per disabilitare plug-in o singoli script su pagine o post specifici:

Per un'opzione gratuita, puoi anche prendere in considerazione il plug-in Asset CleanUp.

Carica in modo condizionale i tuoi plug-in e quindi esegui nuovamente il tuo sito Web tramite GTmetrix. Se noti ancora un eccesso di richieste HTTP, è ora di passare al metodo successivo.

4. Riduci al minimo le richieste di terze parti

Quando il tuo sito web viene caricato, il browser di un visitatore potrebbe dover estrarre dati da una piattaforma di terze parti, il che richiede ulteriori richieste HTTP. Inoltre, poiché ti affidi a un server di terze parti, queste richieste possono rallentare notevolmente il tuo sito web.

Ecco alcuni esempi di script di terze parti:

• Video di YouTube incorporati
• Script di monitoraggio di Google Analytics
• Google Font
• Annunci di terze parti

Analogamente alle risorse che bloccano il rendering, puoi applicare attributi asincroni o differire agli script di terze parti.

Per servizi come Google Analytics e Google Fonts, puoi anche considerare di ospitarli localmente utilizzando plug-in come questi:

• OMGF: ospita Google Fonts localmente.
• CAOS: ospita Google Analytics localmente.

5. Ottimizza le tue immagini

Proprio come con i plugin, è importante rimuovere le immagini non necessarie dal tuo sito web. Poiché ogni immagine richiede la propria richiesta HTTP, ti consigliamo di ridurre al minimo il numero di foto sul tuo sito.

Quindi, tutte le tue immagini devono essere ottimizzate. Anche se questo non ridurrà il numero di richieste HTTP, ne ridurrà le dimensioni. Questo può effettivamente migliorare il tempo di caricamento della pagina.

Uno dei migliori ottimizzatori di immagini è Optimole. Questo plug-in freemium offre una suite all-in-one di funzionalità di ottimizzazione delle immagini, tra cui:

• Fornire immagini adattive ottimizzate per il dispositivo di ciascun utente.
• Compressione delle immagini.
• Ridimensionamento delle immagini.
• Conversione di immagini in formati ottimali.
• Servizio di immagini tramite la sua rete di distribuzione dei contenuti (CDN) integrata.

Man mano che carichi nuove immagini, Optimole le comprime e le ridimensiona. Pertanto, non dovrai preoccuparti di file immagine di grandi dimensioni che richiedono risorse eccessive.

6. Implementare il caricamento lento

È anche una buona idea implementare il caricamento lento. Ciò impedisce il caricamento di immagini e video below the fold fino a quando un visitatore non scorre la pagina verso il basso.

Questo sposta quelle richieste HTTP più avanti durante la visita dell'utente, il che ti consente di effettuare meno richieste HTTP per il caricamento iniziale e accelerare il tempo di Paint più grande e contenuto.

WordPress 5.5 ha aggiunto il caricamento lento integrato per le immagini utilizzando il caricamento lento del browser nativo.

Tuttavia, non tutti i browser supportano ancora il lazy loading nativo. Inoltre, l'utilizzo di un plug-in di caricamento lento dedicato ti offre un maggiore controllo sulla funzionalità di caricamento lento sul tuo sito.

Ad esempio, potresti voler escludere le prime immagini dal caricamento lento per evitare di influire negativamente sui tempi di Paint con contenuto più grande.

Se utilizzi il plug-in Optimole della sezione precedente, include anche una funzione integrata per il caricamento lento delle immagini del tuo sito in modo ottimale.

Puoi anche regolare ulteriormente il comportamento di caricamento lento dalle impostazioni del plug-in.

7. Utilizzare una pila di caratteri di sistema

Puoi utilizzare una varietà di caratteri personalizzati per rendere unico il tuo sito web. Tuttavia, ogni nuovo carattere aggiungerà un'altra richiesta HTTP durante il caricamento del sito.

Per questo motivo, è meglio limitare il numero di caratteri personalizzati che stai utilizzando.

In alternativa, puoi attenersi a una pila di caratteri di sistema, che utilizza i caratteri nativi del sistema operativo di un visitatore.

Alcuni temi, come Neve, GeneratePress o Astra, ti consentono di ripristinare i caratteri di sistema. Tuttavia, puoi anche modificare la pila di caratteri con i CSS.

8. Combina CSS e JavaScript

Un altro modo per effettuare meno richieste HTTP per i file CSS e JavaScript consiste nel combinare file CSS e JavaScript separati in un singolo foglio di stile o file.

Con il plug-in Autoptimize, sarai in grado di aggregare facilmente i file del sito in pochi passaggi:

In Impostazioni > Autoptimize , abilita il plug-in per ottimizzare il codice JavaScript e CSS. Quindi, seleziona le caselle accanto a Aggrega file JS e Aggrega file CSS :

Questo compilerà il tuo CSS in un file e JavaScript in un altro. Invece di inviare molte richieste per più file, Autoptimize consente al tuo sito di effettuare meno richieste HTTP.

Nota : mentre la combinazione di CSS e JavaScript è un modo infallibile per ridurre le richieste HTTP, potrebbe non avere alcun impatto sulle prestazioni del mondo reale a seconda del tuo host web.

Se il tuo host utilizza HTTP/2 o versioni successive (cosa che fa la maggior parte degli host al giorno d'oggi), in realtà può essere meglio non combinare i file perché HTTP/2 supporta il multiplexing (il che significa che può scaricare più file dal server senza più richieste del server).

Se non sei sicuro che il tuo host utilizzi HTTP/2, puoi contattare l'assistenza.

9. Usa gli sprite CSS per combinare le immagini

Su un tipico sito WordPress, ogni immagine è un singolo file. Se ci sono più foto su una pagina, il browser invia diverse richieste HTTP. Tuttavia, uno sprite CSS combinerà queste immagini in un unico file.

Lo strumento CSS Sprites è un software gratuito per creare e personalizzare gli sprite CSS. Per iniziare, rilascia le tue immagini nella casella di caricamento:

Dopo aver generato lo sprite CSS, aggiungilo alla libreria multimediale di WordPress. Quindi, puoi utilizzare il codice HTML e CSS generato per posizionare ciascuna immagine sul tuo sito web.

10. Minimizza il codice del tuo sito

Minimizzare i file del tuo sito non ti aiuterà a fare meno richieste HTTP, ma ti aiuterà a ottimizzare le inevitabili richieste HTTP per il codice HTML, CSS e JavaScript del tuo sito.

Mentre scrivi il codice, potresti includere caratteri e spazi bianchi che migliorano la leggibilità. Poiché non sono necessari per l'elaborazione di una richiesta, puoi rimuoverli.

Il modo più semplice per minimizzare il codice del tuo sito WordPress è con un plug-in come il plug-in Autoptimize che abbiamo menzionato in precedenza.

La maggior parte dei plug-in di memorizzazione nella cache di WordPress include anche funzionalità di minimizzazione del codice, tra cui WP Rocket, FlyingPress, WP Fastest Cache e altro.

Oppure, se stai utilizzando il CDN di Cloudflare, puoi anche fare in modo che Cloudflare minimizzi il tuo codice per te.

Dopo aver minimizzato i file del tuo sito, le richieste HTTP avranno tempi di esecuzione più rapidi. Con un codice più leggero, accelererai il tuo sito Web e ridurrai al minimo le richieste ingombranti.

11. Disabilita gli emoji

Per impostazione predefinita, gli emoji di WordPress aggiungono una richiesta HTTP aggiuntiva al tuo sito. Per eliminare un'altra richiesta HTTP, puoi disabilitare gli emoji di WordPress.

Per l'opzione più semplice, puoi semplicemente installare il leggero plug-in Disable Emojis.

In alternativa, puoi aggiungere questo codice al file functions.php del tema child o a un plug-in di gestione del codice come Code Snippets:

 /** * Disable the emojis */ function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 ); } add_action( 'init', 'disable_emojis' ); /** * Filter function used to remove the tinymce emoji plugin. * * @param array $plugins * @return array Difference betwen the two arrays */ function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } } /** * Remove emoji CDN hostname from DNS prefetching hints. * * @param array $urls URLs to print for resource hints. * @param string $relation_type The relation type the URLs are printed for. * @return array Difference between the two arrays. */ function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) { if ( 'dns-prefetch' == $relation_type ) { /** This filter is documented in wp-includes/formatting.php */ $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://sworg/images/core/emoji/2/svg/' ); $urls = array_diff( $urls, array( $emoji_svg_url ) ); } return $urls; }

Dopo aver implementato tutti questi suggerimenti, dovresti avere un sito con meno richieste HTTP!

Fai meno richieste HTTP sul tuo sito web 🎯

Come regola generale, più richieste HTTP ha il tuo sito web, più lentamente si carica. Ciò può influire negativamente sull'esperienza utente (UX) del tuo sito, inducendo i visitatori ad andarsene senza leggere i tuoi contenuti o acquistare un prodotto.

Per velocizzare il tuo sito web, vuoi eliminare il maggior numero possibile di richieste HTTP e ottimizzare le richieste HTTP che rimangono in modo che si carichino il più rapidamente possibile.

Con i suggerimenti in questo post, puoi svolgere entrambi i lavori e creare un sito a caricamento rapido per i tuoi visitatori.

👉 Tuttavia, ricorda che l'ottimizzazione delle richieste HTTP del tuo sito è solo una parte del puzzle delle prestazioni. Avrai anche bisogno di un hosting WordPress di qualità se desideri che il tuo sito si carichi velocemente: dai un'occhiata al nostro miglior riepilogo dell'hosting WordPress per vedere le migliori opzioni.

Hai domande sulla riduzione del numero di richieste HTTP in WordPress? Chiedicelo nella sezione commenti qui sotto!