5 modi per migliorare il PageSpeed ​​del tuo sito web usando HTTP / 2

SpeedUp-sito

HyperText Transfer Protocol versione 2, o HTTP / 2, è l'ultimo standard di HTTP. Gli aggiornamenti del protocollo miglioreranno la velocità, l'efficienza e la sicurezza del traffico web. Tuttavia, la transizione non è automatica.

Questo articolo ha lo scopo di darti un'idea di cosa significa HTTP / 2 per te e come configurare il tuo sito web o server per sfruttare le nuove funzionalità.

Quale mezzo HTTP / 2 per te

Per gli utenti regolari, le modifiche da HTTP / 1.1 a HTTP / 2 saranno piuttosto invisibili.

Tutti i browser richiedono un certificato TLS (Transport Layer Security) valido per servire siti Web su HTTP / 2. Quindi, al di là del più veloce caricamento della pagina, ci sarà anche un aumento della sicurezza del sito web.

Per i web designer e i proprietari, HTTP / 2 può migliorare la velocità di caricamento del tuo sito su tutti i dispositivi.

Ogni browser moderno supporta già il nuovo standard di protocollo (sebbene questi browser mobili non supportino HTTP / 2 ). Tuttavia, nei casi in cui il browser o il server non supporta HTTP / 2, lo standard HTTP / 1.1 verrà utilizzato automaticamente.

In che modo HTTP / 2 influenzerà la progettazione di siti Web?

Le modifiche introdotte in HTTP / 2 influenzeranno il modo in cui ottimizziamo siti Web e server per efficienza e velocità.

Le nuove funzionalità introdotte in HTTP / 2 ci consentiranno di ignorare molti dei workaround e delle tecniche di ottimizzazione di HTTP / 1. Ciò include non più inlining gli script in HTML o la combinazione di file per ridurre le richieste del server. Anche la condivisione del dominio non è più utile.

In alcuni casi, queste soluzioni alternative influiscono negativamente anche sulla velocità della pagina se viene pubblicata HTTP / 2.

La maggior parte del traffico Internet è mobile, quindi considera la velocità di Internet mobile e mantieni i tuoi file multimediali piccoli e ottimizzati per questi dispositivi. Dovresti anche continuare a ridurre il tuo JavaScript (JS), HTML e CSS.

Se non sei sicuro del motivo per cui dovresti minimizzare i tuoi file, un buon inizio sarebbe il nostro articolo su come e perché minimizzare il tuo JavaScript.

Concetti HTTP che dovresti sapere

Nel caso in cui non si abbia familiarità con i termini indicati in questo articolo, ecco una breve introduzione

Inlining Script consente di aggiungere JavaScript direttamente in un documento HTML con il tag <script>. In HTML / 1.1 questo elimina i piccoli file JavaScript e riduce le richieste del server e carica gli script più velocemente.

La riduzione del numero di file non è più un grosso problema per la velocità della pagina in HTTP / 2 grazie a Multiplexing , Stream Prioritization e Server Push .

Il multiplexing è una nuova funzionalità in HTML / 2 che consente più flussi di dati su una singola connessione TCP (Transmission Control Protocol).

Flussi di dati è un termine HTML / 2 utilizzato per flussi di dati bidirezionali. Possiamo dare la priorità a ciascun flusso grazie al loro identificatore univoco, che ci aiuterà a ottimizzare la consegna dei dati.

La priorità dei flussi è un'altra nuova funzionalità di HTML / 2. Questo ci dà la possibilità di dire a un server di allocare risorse e larghezza di banda ai flussi di dati prioritari. Assicurando così la consegna ottimale di contenuti ad alta priorità ai clienti.

Domain Sharding è l'atto di dividere le risorse del sito web su più siti o domini per aggirare la limitazione del download simultaneo in HTML / 1.1.

In HTML / 2, Multiplexing e Server Push eseguiranno download simultanei più rapidi e più efficienti rispetto a Domain Sharding . In effetti, non esiste attualmente alcun supporto per l'utilizzo di queste funzionalità su più domini.

Server Push consentirà a un server di inviare più risposte per una singola richiesta client. In breve, il server può formulare ipotesi su quali file debba essere caricato da un browser per caricare una pagina, senza che il browser lo richieda specificamente.

Ora ci concentreremo su alcuni dei cambiamenti che i proprietari dei siti web dovrebbero fare per ottimizzare i siti web per HTTP / 2. Per una visione più approfondita di questi concetti, leggi il nostro precedente articolo: " Che cos'è HTTP / 2 e come influisce sul futuro di Internet? “.

5 modifiche al sito Web per l'ottimizzazione HTTP / 2

I principali cambiamenti che dovresti sapere come proprietario del sito web sono legati a come gestire le risorse del sito web. In particolare per quanto riguarda il modo in cui il server del tuo sito web parlerà con un browser e come vengono consegnati i file.

Di seguito sono elencate le modifiche più comuni che dovresti esaminare per ottimizzare il tuo sito web di HTTP / 2.

1. Non combinare il tuo CSS o JavaScript

Non dovresti più concatenare o combinare le risorse del tuo sito web. In HTTP / 1.1, questo ridurrà il numero di richieste HTTP e i file necessari per il download del tuo sito web.

Ogni richiesta HTTP aggiungerà latenza, quindi in HTTP / 1.1 il download di un singolo file è spesso più efficiente del download di più file. Un numero inferiore di file aiuta anche a superare il limite dei download simultanei in HTTP / 1.1.

Poiché HTTP / 2 consente download multipli senza più richieste del server, il numero di file è meno importante quando si ottimizza la velocità. Combinato con il caching, i file specifici sono migliori in HTTP / 2.

In effetti, file più specifici ti consentono di servire gran parte del tuo sito web dalla rete di Content Delivery (CDN) e dalla cache del browser dell'utente. Significa anche che il browser non dovrà scaricare e analizzare un singolo file di grandi dimensioni dal tuo server quando apporti modifiche minori al tuo sito web.

2. Non inserire script in HTML

L'incorporamento di file CSS e JS nel documento HTML migliorerà la velocità di caricamento della pagina in HTTP / 1.1. Come con la combinazione di file, ridurrà i numeri di file e le richieste del server.

Inlining gli script in HTML quando si utilizza HTTP / 2 ridurrà l'ottimizzazione della velocità della pagina dalla cache, rimuovendo la capacità di un browser di memorizzare le risorse singolarmente.

Inoltre, interromperà qualsiasi miglioramento da Stream Prioritization, poiché tutti gli script e i contenuti incorporati avranno lo stesso livello di priorità del contenuto HTML.

Invece di allineare le risorse per ridurre le richieste HTTP, sfruttare il multiplexing e il server push. Ciò consentirà ai browser di scaricare più risorse con meno richieste e migliorare la velocità di caricamento della pagina.

In breve, mantieni le tue risorse separate e piccole quando possibile.

3. Interrompere l'uso di CSS Image Sprites

Esempio di sprite di immagini usando pezzi di scacchi
Immagine di credito: jurgenwesterhof / Wikimedia

Gli sprite di immagini sono immagini composte da molte immagini più piccole (come quella sopra). CSS specifica quindi quali sezioni dell'immagine visualizzare.

Come con la maggior parte delle soluzioni alternative HTTP / 1.1, utilizziamo gli sprite delle immagini in parte per ridurre le richieste del server. In HTTP / 2, puoi tranquillamente utilizzare immagini separate senza influire negativamente sulla velocità di caricamento della tua pagina.

I file più piccoli verranno scaricati più velocemente e in modo più efficiente grazie al multiplexing e al server push.

4. Non utilizzare i sharding di dominio

Lo sharding di dominio viene utilizzato per aggirare le limitazioni di download simultanee in HTTP / 1. Questa limitazione è solitamente compresa tra quattro e otto per dominio ed è impostata dai browser in parte per ridurre gli attacchi DDOS.

Sharding del tuo sito web su quattro domini, ad esempio, può teoricamente servire le risorse in un quarto del tempo in HTTP / 1.1.

Lo sharding di dominio non è più necessario grazie al multiplexing di HTTP / 2.

Tieni presente che i browser non possono sfruttare il download multiplexing e parallelo su più domini in HTTP / 2. Sharding interromperà anche la prioritizzazione del flusso di HTTP / 2, riducendo ulteriormente i benefici dell'utilizzo di HTTP / 2.

5. Approfitta di Server Push

http1 vs http2 con server push

Probabilmente il miglioramento più significativo di HTTP / 2 è il server push.

In HTTP / 1.1, quando si richiede di visualizzare una pagina, il server invierà prima il documento HTML. Il browser inizierà quindi a analizzarlo e a richiedere separatamente CSS, JS e file multimediali a cui si fa riferimento nel documento.

In HTTP / 2, il server push consente a un server di inviare le risorse richieste a un browser senza una richiesta separata. Questo include file CSS e JavaScript, così come i media, e ridurrà le richieste HTTP e accelererà il caricamento delle pagine.

Smashing Magazine ha una guida completa e completa sul server push di HTTP / 2 con informazioni dettagliate su come funziona e su come abilitarlo.

Come configurare il server per HTTP / 2

Strumento di test HTTP / 2

La maggior parte delle implementazioni server supporta già HTTP / 2. Tuttavia, se si utilizza un host condiviso, è necessario verificare con l'amministratore del server se hanno attivato HTTP / 2. Se sei curioso, GitHub ha un elenco di implementazioni server che supportano HTTP / 2.

I server Nginx hanno il supporto nativo per HTTP / 2, mentre potrebbe essere necessario configurare i server Apache per abilitare il supporto HTTP / 2.

Se il tuo sito web è abilitato per HTTPS, (un requisito HTTP / 2) puoi verificare se il tuo sito web viene fornito con HTTP / 2 su http2.pro . Detto questo, se si utilizza Cloudflare come CDN, qualsiasi contenuto dei propri server viene pubblicato su HTTP / 2 senza dover apportare modifiche.

Gli host specifici di WordPress a volte limitano le modifiche alla configurazione che puoi apportare, specialmente nei loro servizi di livello inferiore. Detto questo, consigliamo Bluehost per i tuoi siti WordPress. Bluehost offre SSL e CDN gratuiti e servirà i tuoi siti web su HTTP / 2.

HTTP / 2 è solo il primo passo

HTTP / 2 rappresenta un enorme miglioramento rispetto allo standard precedente e dovresti ora avere alcuni dettagli sui vantaggi che puoi ottenere dall'implementazione.

I siti Web abilitati verranno caricati più velocemente e saranno più sicuri, il che aumenterà anche il posizionamento nella ricerca. HTTP / 3 è già in arrivo e la configurazione del tuo sito web per HTTP / 2 renderà il tuo eventuale salto verso HTTP / 3 molto più agevole.

Oltre a configurare il tuo sito web per HTTP / 2, dovresti considerare anche questi modi per velocizzare il caricamento del tuo sito web .

Leggi l'articolo completo: 5 modi per migliorare il PageSpeed ​​del tuo sito web usando HTTP / 2

Fonte: Utilizzare