5 modi per migliorare la velocità della pagina del tuo sito Web usando HTTP / 2
Annuncio pubblicitario
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 ciò che HTTP / 2 significa per te e di come configurare il tuo sito Web o server per sfruttare le nuove funzionalità.
Cosa significa HTTP / 2 per te
Per gli utenti regolari, le modifiche da HTTP / 1.1 a HTTP / 2 saranno piuttosto invisibili.
Tutti i browser richiederanno un certificato TLS (Transport Layer Security) valido per la pubblicazione di siti Web su HTTP / 2. Quindi oltre al caricamento più veloce della pagina, ci sarà anche un aumento della sicurezza del sito Web.
Per web designer e 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 influirà sulla progettazione di siti Web?
Le modifiche introdotte in HTTP / 2 influenzeranno il modo in cui ottimizziamo i siti Web e i server per efficienza e velocità.
Le nuove funzionalità introdotte in HTTP / 2 ci consentiranno di ignorare molte delle soluzioni alternative e le tecniche di ottimizzazione di HTTP / 1. Ciò include non incorporare più script in HTML o combinare file per ridurre le richieste del server. Anche lo sharding del dominio non è più utile.
In alcuni casi, queste soluzioni alternative influiranno negativamente anche sulla velocità della tua 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 minimizzare 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. Compressori JavaScript: come e perché minimizzare il tuo JS Compressori JavaScript: come e perché minimizzare il tuo JS Minimizzare il tuo javascript è un modo per accelerare i tempi di risposta del sito Web e, fortunatamente per te, è un processo semplice. Oggi ti mostrerò tutto ciò che devi sapere. Leggi di più
Concetti HTTP che dovresti sapere
Nel caso in cui non si abbia familiarità con i termini indicati in questo articolo, ecco una breve introduzione
Lo script integrato consiste nell'aggiungere JavaScript direttamente in un documento HTML con il tag. In HTML / 1.1 questo elimina i piccoli file JavaScript e riduce le richieste del server e carica gli script più velocemente.
Ridurre il numero di file non è più un grosso problema per la velocità della pagina in HTTP / 2 grazie a Multiplexing, Priorità al flusso e Push del server .
Il multiplexing è una nuova funzionalità di HTML / 2 che consente più flussi di dati su una singola connessione TCP (Transmission Control Protocol).
Data Streams è un termine HTML / 2 utilizzato per flussi bidirezionali di dati. Possiamo dare la priorità a ciascun flusso grazie al loro identificatore univoco, che ci aiuterà a ottimizzare la consegna dei dati.
La prioritizzazione dello stream è un'altra nuova funzionalità in HTML / 2. Questo ci dà la possibilità di dire a un server di allocare risorse e larghezza di banda a flussi di dati prioritari. Garantendo così la consegna ottimale di contenuti ad alta priorità ai clienti.
La frammentazione del dominio è l'atto di suddividere 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 in modo più rapido ed efficiente rispetto al Domain Sharding . Di fatto, al momento non esiste alcun supporto per utilizzare queste funzionalità in più domini.
Server Push consentirà a un server di inviare più risposte per una singola richiesta client. In breve, il server può fare ipotesi su quali file un browser ha bisogno per caricare una pagina, senza che il browser le richieda specificamente.
Ci concentreremo ora su alcune delle modifiche che i proprietari dei siti Web dovrebbero apportare 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 in che modo influisce sul futuro di Internet? Che cos'è HTTP / 2 e in che modo influisce sul futuro di Internet? Che cos'è HTTP / 2 e in che modo influisce sul futuro di Internet? Internet è destinato a diventare più efficiente grazie all'arrivo di HTTP / 2. Ma cos'è e come migliora su HTTP? Leggi di più ".
5 modifiche al sito Web da apportare all'ottimizzazione HTTP / 2
Le principali modifiche che è necessario conoscere come proprietario di un sito Web sono correlate 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 riportate le modifiche più comuni che dovresti esaminare per ottimizzare il tuo sito Web di HTTP / 2.
1. Non combinare CSS o JavaScript
Non devi più concatenare o combinare le risorse del tuo sito web. In HTTP / 1.1, ciò ridurrà il numero di richieste HTTP e i file necessari per essere scaricati per visualizzare il 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 consente inoltre di aggirare il limite dei download simultanei in HTTP / 1.1.
Poiché HTTP / 2 consente download multipli senza richieste di più server, il numero di file è meno importante quando si ottimizza per la velocità. In combinazione con la memorizzazione nella cache, i file specifici sono migliori in HTTP / 2.
In effetti, file più specifici ti consentono di servire la maggior parte del tuo sito web dalla rete di consegna dei contenuti (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 server quando si apportano modifiche minori al sito Web.
2. Non incorporare gli script in HTML
Incorporare 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à il numero di file e le richieste del server.
L'inserimento di script in HTML quando si utilizza HTTP / 2 ridurrà l'ottimizzazione della velocità della pagina dalla memorizzazione nella cache, rimuovendo la capacità di un browser di memorizzare le risorse individualmente.
Inoltre interromperà qualsiasi miglioramento rispetto alla priorizzazione dello stream, poiché tutti gli script e i contenuti incorporati avranno lo stesso livello di priorità del contenuto HTML.
Invece di incorporare risorse per ridurre le richieste HTTP, approfitta del multiplexing e del push del server. 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. Smetti di usare CSS Image Sprites
Gli Sprite di immagini sono immagini composte da molte immagini più piccole (come quella sopra). CSS specifica quindi quali sezioni dell'immagine visualizzare.
Come per la maggior parte delle soluzioni alternative HTTP / 1.1, utilizziamo gli sprite di 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 push del server.
4. Non utilizzare frammenti di dominio
Il frammento di dominio viene utilizzato per aggirare le limitazioni di download simultaneo in HTTP / 1. Questa limitazione è generalmente compresa tra quattro e otto per dominio ed è impostata in parte dai browser per ridurre gli attacchi DDOS.
Suddividere il tuo sito Web su quattro domini, ad esempio, può teoricamente servire risorse in un quarto del tempo in HTTP / 1.1.
Lo sharding del dominio non è più necessario grazie al multiplexing di HTTP / 2.
Si noti che i browser non possono sfruttare i download multipli e paralleli su più domini in HTTP / 2. La frammentazione interromperà anche la definizione delle priorità dello stream di HTTP / 2, riducendo ulteriormente i vantaggi dell'utilizzo di HTTP / 2.
5. Approfitta della spinta del server
Forse il miglioramento più significativo di HTTP / 2 è la spinta del server.
In HTTP / 1.1, quando si richiede di visualizzare una pagina, il server invierà prima il documento HTML. Il browser inizierà quindi ad analizzare questo e richiederà separatamente i file CSS, JS e multimediali a cui si fa riferimento nel documento.
In HTTP / 2, il push del server consente a un server di inviare le risorse richieste a un browser senza una richiesta separata per esse. Ciò include file CSS e JavaScript, nonché file multimediali, e ridurrà le richieste HTTP e accelererà il caricamento della pagina.
Smashing Magazine ha una grande guida completa sulla spinta del server HTTP / 2 con informazioni su come funziona e su come abilitarlo.
Come configurare il server per HTTP / 2
La maggior parte delle implementazioni del 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, tutti i contenuti dei loro server verranno offerti su HTTP / 2 senza che sia necessario 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 è un enorme miglioramento rispetto allo standard precedente e ora dovresti avere alcune informazioni 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 nelle ricerche. HTTP / 3 è già in arrivo e la configurazione del tuo sito Web per HTTP / 2 renderà il tuo passaggio a HTTP / 3 molto più fluido.
Oltre a configurare il tuo sito Web per HTTP / 2, dovresti anche considerare questi modi per rendere più veloce il caricamento del tuo sito Web 7 modi per rendere il tuo sito Web o blog più veloce per i visitatori 7 modi per rendere il tuo sito Web o blog più veloce per i visitatori Ecco alcuni i migliori consigli per velocizzare il tuo sito e assicurarti che i tuoi visitatori restino in giro. Leggi di più .
Ulteriori informazioni su: HTTP / 2, sviluppo Web.
