Nel maggio 2015 è stato annunciato che la specifica per HTTP2 era stata finalizzata e rilasciata. Offerte HTTP2 significativi vantaggi in termini di prestazioni a qualsiasi sito web, quindi visto che la maggior parte dei siti web è alimentata da WordPress, era solo una questione di tempo prima che avessimo bisogno di sapere come configurarlo e cosa è HTTP2.
Quindi eccoci qui con una guida completa e / o un tutorial completo su cosa sia HTTP2, perché dovresti abilitare HTTP2 sul tuo sito web, quali sono i vantaggi e, infine, come farlo effettivamente.
Quindi iniziamo con le prime cose.
Cos'è HTTP2?
HTTP2 è l'ultima versione di HTTP (HyperText Transfer Protocol) che è stata ottimizzata in modo tale da rendere il caricamento del tuo sito molto più veloce, senza alcuno sforzo da parte tua. Una volta impostato HTTP2, non sono necessarie ottimizzazioni come la minificazione, la combinazione e altri hack che eseguivamo prima: sono integrati direttamente nel protocollo stesso.
(A CollectiveRay, ci piace realizzare i nostri siti web bellissimo e veloce!)
Prima di passare effettivamente a HTTP2, diamo uno sguardo indietro a HTTP e al motivo per cui era necessaria una nuova versione di HTTP.
Cos'è l'HTTP?
L'HyperText Transfer Protocol (noto anche come HTTP) è semplicemente un modo con cui il tuo browser comunica con il server web del sito web che stai visitando.
Esistono molti modi in cui due (o più) macchine comunicano su Internet. HTTP è quello utilizzato per la navigazione dei siti web. Con l'ascesa di siti come YouTube e Twitch che trasportano molto traffico su HTTP, questo protocollo rimane quello che trasporta la maggior parte del traffico. È sicuramente quello più "visibile" poiché è coinvolto in tutta la navigazione del sito.
Dopo tutto, quante volte digiti https: // ogni singolo giorno?
Senza entrare troppo nel dettaglio, il protocollo HTTP viene utilizzato dal browser del visitatore per richiedere tutto il contenuto di un sito web.
La conversazione va più o meno così:
Browser: Ciao server su www.collectiveray.com - puoi darmi il contenuto di questo sito?
server: Ciao browser, questo è il contenuto HTML di www.collectiveray.com
xmlns: og="https://ogp.me/ns#" xmlns: fb="https://www.facebook.com/2008/fbml" lang="en-gb" dir="litri" classe='com_content Visualizza articolo itemid-388 j35 mm-hover'>
...
Browser: Ottimo, ora vedo che ho bisogno anche del contenuto di questi file js: collectiveray. Js, jquery.min.js, jquery-ui.min.js ... e anche il contenuto di questi file: styles.css, jquery.min.css, ... Inoltre, inviatemi le seguenti immagini: favicon.ico, logo.jpg, intestazione-blog.jpg, annuncio1.jpg...
server:
- Ecco il contenuto del file collectiveray. Js
- Ed ecco il contenuto del file jquery.min.js
- Ed ecco qui jquery-ui.min.js
- ...
- ed ecco l'immagine footer-icon.jpg ...
In verità, il server e il browser stanno giocando a tennis digitale con i dati del sito web che stai visitando.
Ciascuno avanti e indietro dal server invia una piccola parte del sito web. Ciò continua finché tutto il contenuto non viene inviato dal server del sito al browser.
Un'altra ottima analogia che è stata usata per descrivere HTTP1 è quella di un cameriere che va a prendere le bevande al bar, ottenendo solo un drink ogni volta che visitano il bar.
Ovviamente, questo metodo per ottenere una "cosa" alla volta non è particolarmente efficiente, ed è qui che iniziano i problemi con HTTP ...
Il Web è cresciuto più velocemente delle capacità di HTTP
HTTP esiste da molto tempo. Quando è stato pensato e creato, Internet era un posto molto diverso.
La larghezza di banda è stata misurata in bit, non in decine di megabit. Di conseguenza, per essere utilizzabili, i siti web sono stati realizzati principalmente con testo e collegamenti ipertestuali. Le immagini erano poche e lontane tra loro.
Avanti veloce ai tempi moderni.
Siti web, temi e tutti i tipi di funzionalità hanno reso i siti web sempre più pesanti in termini di risorse. Il tuo sito web medio contiene centinaia di file e immagini diversi.
I siti web che devono utilizzare centinaia di risorse sono all'ordine del giorno.
Ad esempio, se stai pianificando di creare un sito di abbonamento WordPress, utilizzando questa guida scritta da CollectiveRay, avrai bisogno di temi di abbonamento, plugin e molte altre risorse, che richiedono tutte varie risorse per poter funzionare correttamente.
A complicare le cose, ogni sito richiede informazioni da diversi server diversi per tutti i tipi di script di terze parti (ad esempio, script di Google Analytics, pulsanti di condivisione di Facebook, Google Ads o AdSense, email marketing e tutti i tipi di altre piattaforme).
La quantità di volte che un browser ha bisogno di recuperare i file dal server del sito Web continua a crescere e crescere.
Questo non è un problema in sé, anche se il numero sempre crescente di file significa che la dimensione dei dati scaricati continua a crescere e crescere.
Ciò significa che l'enorme quantità di dati da scaricare diventa sempre più grande. Ciò rende il caricamento dei siti più lento in generale.
A peggiorare le cose, la creazione di una connessione tra il browser e il server è un file operazione tecnicamente costosa e richiede tempo. Man mano che il numero di risorse diverse richieste su un sito Web cresce, aumenta anche il tempo necessario per caricare un sito.
Questo perché utilizzando HTTP versione 1, ogni volta che è necessario un nuovo file, è necessario creare una nuova (costosa) connessione.
Ciò significa che i siti che desideravano caricarsi velocemente dovevano passare attraverso un intero esercizio di ottimizzazione.
Come rendere più veloce un sito web (versione pre-HTTP2)
Come si può vedere dal nostro semplice esempio, HTTP v1 aveva una serie di limitazioni dato lo stato attuale del web, con conseguente rallentamento dei siti web. Ora, probabilmente hai visto centinaia di articoli che ti mostrano come creare il tuo file Sito web WordPress più veloce.
Abbiamo anche noi stessi un articolo del genere perché come Gli sviluppatori di WordPress, inseguiamo sempre la necessità di velocità e siamo felici solo quando raggiungiamo un punteggio di velocità A.
Per inciso, presentiamo molti articoli diversi per coloro che vogliono conoscere WordPress, controlla la sezione tutorial su Collectiveray.
Ciò che fa la maggior parte di questi articoli che cercano di accelerare WordPress è trovare un modo per aggirare i limiti di HTTP1. Eseguono soluzioni alternative per garantire che i siti non vengano rallentati da tutte queste connessioni.
Questo è il motivo per cui c'era un bisogno così pressante di HTTP2, non solo per WordPress, ma per ogni altro sito web là fuori. Qualcosa doveva essere fatto per affrontare i problemi intrinseci di HTTP1 (sia a livello di browser che a livello di webserver).
Quindi quali erano le soluzioni / soluzioni alternative per rendere più veloce un sito Web utilizzando HTTP v1? Di solito ci riferivamo a loro come Riduce, Riutilizzo, Riciclare. Per ulteriori spiegazioni, ti suggeriamo di leggere il nostro articolo su come rendere i siti Web più veloci sopra.
- Crea un sito leggero che utilizzi un file quantità minima di JS, CSS e file di immagine
- Riduci il numero di richieste per diversi file CSS e file JS combinando il maggior numero possibile di questi file insieme (riducendo le richieste attraverso la combinazione di file)
- Riduzione del numero di richieste di immagini di creando un'immagine che li combina tutti in uno e utilizzando gli sprite CSS
- Rimuovi eventuali plug-in aggiuntivi (per ridurre il numero di immagini, file CSS e file JS che aggiungono al sito)
- Comprimere i dati richiesti in modo che sia di dimensioni inferiori (e quindi più veloce da trasportare) (ad esempio, normalmente abilitare la compressione GZIP di WordPress per ridurre la dimensione dei dati che devono essere trasferiti)
- Sfrutta la memorizzazione nella cache del browser in WordPress utilizzando un plug-in, in modo tale che se un utente visita nuovamente il tuo sito web entro un breve lasso di tempo, non potrà più scaricare gli stessi file
- Altre azioni...
In sostanza, volevamo ridurre il numero di richieste separate tra il server e il browser. Volevamo anche ridurre le dimensioni di queste richieste.
In che modo HTTP / 2 migliora tutto questo?
Immettere HTTP / 2
HTTP / 2 è stato scritto con l'intento di risolvere questi problemi intrinseci. Uno degli obiettivi principali di HTTP2 è
Riduci la latenza per migliorare la velocità di caricamento della pagina nei browser web. (Fonte: WikiPedia)
e introduce i seguenti miglioramenti
- è binario, anziché testuale
- è completamente multiplex, invece di essere ordinato e bloccante
- può, quindi, utilizzare una connessione per il parallelismo
- utilizza la compressione dell'intestazione per ridurre il sovraccarico
- consente ai server di "spingere" le risposte in modo proattivo nelle cache dei client
Aspetta cosa? Non preoccuparti, proviamo a spiegarlo un po 'in termini più semplici.
- Binario invece che testuale: questo è qualcosa che rende molto più efficiente il trasferimento e l'analisi dei dati. Anche il trasferimento di dati binari è molto less incline agli errori. I dati testuali sono destinati al consumo umano. I dati binari sono progettati per il consumo della macchina, l'utilizzo del binario per il trasferimento dei dati è intrinsecamente più veloce.
- Completamente multiplex: di nuovo, in poche parole, con HTTP il problema era che ogni connessione era incline a bloccare le connessioni che dovevano avvenire dopo di essa. Immagina di essere in coda per entrare nella tua partita sportiva preferita, ma invece di avere più punti di ingresso, avevi solo 1 tornello. Puoi immaginare che le cose possano diventare molto lente. Il multiplexing consente di trasferire più file e richieste contemporaneamente. Nell'esempio della partita di calcio, invece di avere una persona alla volta, abbiamo 10 cancelli, con 10 tornelli che entrano insieme.
- Usa una connessione per il parallelismo: come accennato prima, quando una connessione è costosa da creare se continui a crearla e chiuderla per ogni risorsa di cui hai bisogno, creerai un serio problema di overhead. Il multiplexing consente di riutilizzare la stessa connessione più e più volte. Immagina la connessione come un tubo attraverso il quale i dati continuano a fluire finché non hai più dati. Inoltre, tieni presente che per qualsiasi sito Web, in genere il browser comunica con più server Web per vari script e risorse di terze parti (script di condivisione di Facebook, Twitter, Google Analytics, reti pubblicitarie, ecc.) Avendo una connessione per ciascuno di questi è più efficiente.
- Compressione dell'intestazione è anche un altro modo efficiente per rimuovere molti dei sovraccarichi associati alla necessità di recuperare diverse risorse dallo stesso o da più server web. Ancora una volta, in genere piuttosto che dover eseguire più viaggi avanti e indietro, un viaggio è in genere sufficiente.
- Consente ai server di spingere le risorse in modo proattivo: questo è un modo in cui il server, invece di aspettare che il browser del client richieda le diverse risorse come nel nostro primo esempio, invierà proattivamente le risorse di cui il browser avrà bisogno o richiederà. Questo è chiamato HTTP / 2 Server push.
Se dovessimo tornare all'analogia del cameriere che portava un drink alla volta, il vantaggio più grande è che ora il cameriere usa un vassoio per le bevande per prendere tutte le bevande insieme. E stanno anche prendendo le bevande dal bar di cui avranno probabilmente bisogno quando sono al ristorante.
Cos'è SPDY? (aka Speedy)
Prima che HTTP2 nascesse, qualcun altro aveva effettivamente provato a risolvere i problemi con HTTP. Questo era un progetto di ricerca di un paio di ingegneri di Google, che avevano tentato di risolvere alcuni dei problemi di HTTP1.1.
Gli obiettivi SPDY dovevano
- Consenti il multiplexing per consentire richieste simultanee, risolvendo così i problemi di latenza creati dall'avere più connessioni
- Dai la priorità alle risorse come le risorse più importanti di un sito che viene inviato per prime
- Comprimi le intestazioni HTTP per migliorare l'efficienza come discusso sopra
- Implementa anche il server push come discusso sopra
In un blog iniziale pubblicato dagli ingegneri che hanno scritto il protocollo, si affermava che lo avrebbe fatto rendere il web 2 volte più veloce. Sebbene sia i principali browser che i principali server web supportassero SPDY, l'adozione reale è stata scarsa.
Tuttavia, la sua ricerca è stata fondamentale per l'eventuale rilascio di HTTP2, poiché la prima bozza di HTTP2 utilizzava SPDY come base di lavoro.
Cosa devo fare per abilitare HTTP / 2?
Prima di abilitare HTTP2 devi sapere quali implicazioni ci sono sul tuo sito.
Quali browser supportano HTTP / 2?
Al momento della scrittura, i browser client più diffusi supportano completamente HTTP/2. FireFox, Chrome e i browser basati su Blink (cioè Opera e Yandex) supportano HTTP2. Microsoft Edge supporta anche HTTP2, mentre Apple lo supporta anche su Safari. Statistiche da siti come Posso usare? mostrano che l'attuale supporto alla distribuzione globale è superiore al 95%.
Se il browser non supporta HTTP2 e il sito Web supporta HTTP2, ci sarà un grazioso fallback su HTTP1, quindi non ci sono assolutamente problemi per nessun visitatore se abiliti HTTP / 2. Ci possono essere solo vantaggi.
Quali server supportano HTTP / 2
Apache, Nginx, LiteSpeed, IIS e le implementazioni server più diffuse supportano HTTP / 2: puoi verificare se il tuo server web preferito o il server web che utilizzi ha il supporto per http2 qui.
Tuttavia, se puoi utilizzare HTTP2 dipende effettivamente dal fatto che la tua società di hosting lo abbia attivato. Quindi dovrai confermare l'effettiva disponibilità di HTTP / 2 con la tua società di hosting. L'immagine sotto è un elenco di server che supportano http / 2.
In poche parole, se il tuo sito web attualmente supporta HTTP / 2 dipende completamente dalla tua società di hosting o dal server in cui ospiti il tuo sito web. Noi usiamo InMotion hosting (ed ecco il nostro Recensione di hosting InMotion ed essenzialmente come il nostro VPS tariffe), che supportano completamente HTTP2 da diversi anni.
Tuttavia, usiamo anche StackPath per servire le nostre risorse, che supporta anche HTTP / 2.
La maggior parte delle società di hosting oggi supporta HTTP2 sui propri server, quindi questo non dovrebbe essere un problema.
Puoi usare questo strumento di KeyCDN per determinare se il tuo sito ha attualmente il supporto per HTTP / 2. Questo test HTTP / 2 può dirti se devi eseguire o meno azioni aggiuntive.
Il tuo sito web deve essere sicuro per abilitare HTTP2
Attualmente, tutti i browser disponibili supportano solo HTTP2 crittografato.
Ciò significa che affinché il tuo sito sia in grado di supportare HTTP / 2, dovrai che il tuo sito sia servito su una connessione sicura (TLS / SSL). Ne abbiamo parlato abbastanza a fondo nel nostro articolo su configurare un certificato sicuro di WordPress sul tuo server.
Ricapitolando però
- I siti protetti ottengono un aumento del segnale di posizionamento SEO
- Proteggono i dati trasferiti da e verso il sito (particolarmente importanti per password, dati di carte di credito e altri dati sensibili)
- C'è un forte movimento verso siti Web completamente sicuri e se non si implementa la sicurezza sul proprio sito, il sito Web è destinato a rimanere indietro
Dovrai acquisire un certificato sicuro tramite la tua società di servizi di hosting. Società di hosting come In movimento ti consentono di utilizzare un certificato condiviso, anche se se desideri utilizzarlo con il tuo dominio è altamente consigliato acquistare il tuo certificato.
Hai bisogno di aiuto con il tuo sito web?
Assumi un esperto di siti web controllato per un minimo di $ 65. Iscriviti oggi per iniziare a chattare gratuitamente.
Chatta con un espertoAltri siti come WordPress.com (al contrario di WordPress.org) - leggi qui la differenza - fornire già certificati sicuri.
L'installazione del certificato è qualcosa che in genere viene eseguita dal tuo server di hosting. È una cosa una tantum, quindi non devi preoccuparti.
Una volta fatto, dovrai semplicemente eseguire un reindirizzamento permanente 301 tramite il tuo file .htaccess.
Ancora una volta, host come InMotion hosting può gestire tutto questo per te, se non sei incline a fare questo tipo di aggiustamento tecnico da solo (che ha un po 'di rischio di downtime se non fatto bene).
C'è un plugin che posso usare per HTTP2?
Abbiamo menzionato uno dei vantaggi dell'utilizzo di HTTP2 per essere la possibilità di eseguire un push del server di elementi che saranno necessari dal browser. Questo, ovviamente, è qualcosa che deve essere fatto a livello di CMS, quindi ha bisogno del supporto di WordPress o del tuo CMS preferito.
Sebbene questo non sia ancora supportato a livello di base, puoi modificare i tuoi temi o plugin in modo che implementino la capacità di inviare un
Link:<...> rel="prefetch"
intestazione per ogni script e stile accodato mentre WordPress li invia al sorgente della pagina.
Se stai cercando di rendere il tuo sito più veloce in generale, abilitando il precaricamento e altri comandi per rendere veloce il tuo sito, ti consigliamo vivamente WP Rocket - un plugin premium che aumenta in modo significativo la velocità del tuo sito. Se vuoi un plugin gratuito, puoi usare questo.
Dai un'occhiata a WP Rocket per rendere il tuo sito più veloce
Questo in realtà sta sfruttando un ulteriore vantaggio reale delle funzionalità abilitate da HTTP / 2.
Raccomandazione finale
Quindi sei qui perché volevi rendere il tuo sito più veloce inserendo HTTP2, giusto?
Questo è solo uno dei tanti modi per rendere più veloce il tuo sito web. Oltre a questa tecnologia, dovrai fare un sacco di altre ottimizzazioni se vuoi rendere il tuo sito web più veloce come
- Implementa un plug-in per la memorizzazione nella cache delle pagine
- Abilita la memorizzazione nella cache a livello PHP come OpCache
- Ottimizza le immagini per le prestazioni
- Abilita una CDN (gratuita o meno)
- Abilita la memorizzazione nella cache del browser e la compressione gzip
- Ottimizza Google Fonts
- Abilita il prefetching DNS
- Abilita il caricamento lento dell'immagine
- Abilita la minificazione e la concatenazione
- etc etc
Sembra un sacco di lavoro, giusto? È!
At CollectiveRay, a volte spendiamo diversi giorni lavorando per spingere il nostro sito web solo poche frazioni di secondo più velocemente. Questo perché il nostro sito web funziona su Joomla, quindi non abbiamo molti dei plugin disponibili per altre popolari opzioni CMS come WordPress.
Ad esempio, per i nostri clienti, installiamo sempre WP Rocket. Sui siti Web in cui viene installato, li facciamo sempre caricare in meno di 3 secondi, con risultati tipici che il sito Web si carica in meno di 1 secondo.
Il bello però è che non dobbiamo intraprendere nessuno dei lavori manuali che dovevamo fare prima, quindi risparmiare ore di tempo e frustrazione e otteniamo ottimi risultati per l'avvio.
Dai un'occhiata a WP Rocket per rendere veloce il tuo sito
Domande frequenti
Devo usare HTTP2?
Sì, dovresti abilitare e utilizzare HTTP2 sul tuo sito web se puoi. HTTP2 renderà il tuo sito web più veloce e non ci sono assolutamente inconvenienti rispetto alla versione HTTP 1. Anche se un client utilizza un vecchio browser che non supporta HTTP2, c'è un grazioso fallback su HTTP.
Qual è la differenza tra HTTP e HTTP2?
Esistono numerose differenze e miglioramenti tra HTTP e HTTP2. HTTP2 è binario, anziché testuale, il che lo rende intrinsecamente più veloce. È completamente multiplex, invece di essere ordinato e bloccante, quindi è possibile utilizzare più connessioni contemporaneamente. Utilizza la compressione dell'intestazione per ridurre il sovraccarico e consente ai server di "spingere" le risposte in modo proattivo nelle cache dei client. Tutti questi miglioramenti rendono HTTP2 molto più veloce di HTTP.
HTTP2 richiede SSL?
Sì, HTTP2 è supportato solo in modalità crittografata, quindi il tuo sito web deve anche implementare certificati SSL / TLS sicuri per poter utilizzare HTTP2.
I browser supportano HTTP2?
Oltre il 95% dei browser di siti Web attualmente in uso supporta HTTP2. Anche se il browser non supporta HTTP2, ci sarà un grazioso fallback su HTTP.
Conclusione: rendiamo il Web più veloce con HTTP2
At CollectiveRay, siamo sempre stati fissati nel rendere i nostri siti Web veloci. HTTP2 è un'evoluzione e una rivoluzione allo stesso tempo, e speriamo davvero che questo articolo ti aiuti ad avanzare verso la configurazione di WordPress HTTP2.
Lascia un commento qui sotto e dicci cos'altro vorresti sapere.
Hai bisogno di aiuto per fare le cose? Prova questi concerti economici di prim'ordine su Fiverr!
Fai clic qui per trovare esperti sull'ottimizzazione della velocità di WordPress.
Fare clic qui per creare un sito Web WordPress completo.
Per favore, lasciare un utile commenta con i tuoi pensieri, quindi condividi questo articolo sui tuoi gruppi di Facebook che lo troverebbero utile e raccogliamo insieme i frutti. Grazie per la condivisione e per essere gentile!
Disclosure: Questa pagina può contenere collegamenti a siti esterni per prodotti che amiamo e consigliamo vivamente. Se acquisti prodotti che ti suggeriamo, potremmo guadagnare una commissione per segnalazione. Tali commissioni non influenzano le nostre raccomandazioni e non accettiamo pagamenti per recensioni positive.
e molti altri ...