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.
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.
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
.
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.
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.
Assicurati di avere l'estensione Firebug installata.
F12
chiave per aprire la console di Firebug.Net Panel
. se è disabilitato, basta abilitarlo.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.
Ispeziona elemento.
Pannello di rete
e aggiorna il tuo sito WordPress.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?
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.
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).
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.
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.