Analisi ed effetti delle richieste HTTP sulle prestazioni di WordPress

Nel mondo di oggi, i siti Web che portano rapidamente a un maggiore coinvolgimento, conservazione e conversione dei visitatori. Ci sono molti fattori che contribuiscono alla velocità del sito web; uno di questi è il numero di richiesta HTTP.

In questo tutorial, spiegherò quali sono le richieste HTTP, come determinare il numero di richieste HTTP, gli effetti che hanno sulle prestazioni di WordPress, come i plugin e i temi non stanno aiutando le cose e le soluzioni al problema.

Cos'è una richiesta HTTP?

Quando un browser Web esegue il rendering di una pagina Web, invia una richiesta al server Web tramite HTTP per risorse o componenti statici (come immagini, CSS e JavaScript) e il server risponde e invia i file al browser. Quindi, una richiesta inviata dal browser al server utilizzando HTTP è indicato come una richiesta HTTP.

Analisi di una richiesta HTTP

Per capire meglio il significato di una richiesta HTTP, dai un'occhiata al codice HTML di una semplice pagina web:

Dall'immagine in alto, puoi vedere che ci sono un totale di quattro Richieste HTTP.

L'effetto delle richieste HTTP su WordPress

Secondo la regola delle prestazioni di Yahoo:

L'80% del tempo di risposta dell'utente finale viene speso sul front-end. La maggior parte di questo tempo è legata al download di tutti i componenti della pagina: immagini, fogli di stile, script, Flash e così via. La riduzione del numero di componenti a sua volta riduce il numero di richieste HTTP richieste per il rendering della pagina. Questa è la chiave per pagine più veloci.

Dall'estratto sopra, abbiamo ragione di dedurre che, minore è il numero di richieste HTTP, più veloce è il sito web; pertanto, un sito alimentato da WordPress con molte immagini e file CSS e JavaScript con riferimenti esterni tendono ad essere lenti.

Conteggio del numero di richieste HTTP

Utilizzando l'estensione Firebug di Firefox, e Ispeziona elemento strumento per Google Chrome e Opera, puoi facilmente determinare il numero di richieste HTTP di una pagina web.

Vediamo come controllare il numero di richieste HTTP del nostro blog WordPress.

Utilizzando Firefox

Assicurati di avere l'estensione Firebug installata.

  • Carica il tuo blog WordPress e premi il tasto F12 chiave per aprire la console di Firebug.
  • Vai a Net Panel. se è disabilitato, basta abilitarlo.
  • Aggiorna il tuo sito WordPress in modo che Net Panel catturi e registri le richieste HTTP.
  • Dovresti vedere il numero di richieste HTTP mostrato in basso.

Utilizzo di Chrome e Opera

A differenza di Firefox, non è necessaria un'estensione in Chrome e Opera per controllare la richiesta HTTP piuttosto che incorporata Ispeziona elemento strumento è usato.

I passaggi seguenti sono validi sia per Chrome che per Opera.

  • Carica il tuo blog WordPress.
  • Fare clic con il tasto destro e selezionare la selezione Ispeziona elemento.
  • Vai a Pannello di rete e aggiorna il tuo sito WordPress.
  • Dovresti vedere il numero di richiesta HTTP mostrato in basso.

Lo sai che installando la maggior parte dei plugin di WordPress, aumenta il numero di componenti della pagina web aumentando così il numero di richieste HTTP?

In che modo plug-in e temi aumentano le richieste HTTP

Molti plug-in che installiamo aumentano il numero di richieste HTTP inconsapevolmente.

La maggior parte dei plug-in si basa sulle loro immagini personalizzate, CSS e file JavaScript per il loro funzionamento. Lo fanno aggiungendo un collegamento che fa riferimento a questi componenti in WordPress che, a sua volta, aumenta il numero di richieste HTTP.

Come un caso robusto, utilizzeremo il modulo di iscrizione WP per comprendere appieno come aumentano i plug-in Richiesta HTTP.

L'attivazione del plugin aggiungerà un modulo di iscrizione alla newsletter alla fine del contenuto del post e includerà anche un link al suo foglio di stile esterno a WordPress.

Visualizzazione del origine della pagina del tuo sito WordPress dopo l'attivazione del plugin rivelerà l'aggiunta di un nuovo componente CSS come mostrato di seguito, il che significa un aumento delle richieste HTTP.

Come i plugin, i temi WordPress contengono molti componenti CSS e JavaScript. Un tema tipico è costituito da caratteri incorporati, CSS e componenti JavaScript che portano ad aumentare il numero di richieste.

Relazione tra Minificazione e Richiesta HTTP

Anche le dimensioni di ogni singolo componente del sito web hanno un effetto sulle prestazioni di WordPress. più piccola è la dimensione, più velocemente la richiesta HTTP al componente viene completata perché il browser impiega meno tempo a scaricarlo come risultato di una piccola dimensione.
Le dimensioni del componente CSS e JavaScript possono essere ridotte mediante la minificazione (rimuovendo tutti i caratteri non necessari e gli spazi bianchi dal codice sorgente).

Come ridurre le richieste HTTP in WordPress

Per ridurre il numero di richieste HTTP, dobbiamo ridurre il numero di immagini, file CSS e JavaScript su WordPress.

So che l'idea di ridurre il numero di immagini sul tuo blog potrebbe non andare bene con alcuni di noi, ma dovresti provare il più possibile a rimuovere le immagini che non sono fondamentali per il layout del nostro sito.

Usa temi WordPress sfondo-immagini nel loro CSS per migliorare la sua bellezza. È possibile ridurre il numero delle immagini trasformandole in sprite. Vedi questo articolo di A List Apart e Tuts + Screencast per capire come funzionano gli sprite CSS.

Le prestazioni di WordPress possono essere migliorate in modo significativo quando i temi CSS e JavaScript sono rispettivamente combinati e minimizzati.

Ci sono un paio di plugin per WordPress come WP Minify e Better WordPress Minify (ho usato e raccomanderò questi plugin) che combina rispettivamente JavaScript e CSS in un singolo file riducendo così il numero di richiesta HTTP.

Se utilizzi il plug-in W3 Total Cache, non è necessario installare i plug-in di cui sopra perché ha un'opzione per minimizzare e combinare CSS e JavaScript.

Come sviluppatore, modifico plug-in che aggiungono componenti extra al mio blog WordPress, tagliando CSS e JavaScript aggiunti dai plugin e incollandoli al file CSS e JavaScript del mio tema in modo che siano unificati.

Conclusione

L'importanza della velocità del sito Web non può essere eccessivamente enfatizzata. Un sito web lento allontana i visitatori.

Esistono molte best practice per accelerare il sito web e una delle quali sta riducendo il numero di richieste HTTP che abbiamo appreso in questo articolo.