La maggior parte di noi ha svolto audit sulla velocità del sito o visto audit eseguiti da altri. Questi possono essere davvero utili per le aziende, ma trovo spesso che siano piuttosto focalizzati. In genere utilizziamo strumenti noti che generano un sacco di cose da guardare, e poi ci immergiamo nelle cose da lì.

Tuttavia, se scaviamo più a fondo, ci sono spesso altre idee su come migliorare la velocità del sito. Vedo spesso molte opportunità che non sono mai coperte negli audit di velocità del sito. La maggior parte dei miglioramenti della velocità del sito sono il risultato di una serie di piccole modifiche, quindi in questo post tratterò alcune idee che non ho mai visto in alcun controllo della velocità del sito, che possono fare la differenza.

Un’angolazione diversa per l’ottimizzazione dell’immagine

Prendi in considerazione SVG ottimizzati su PNG

Di recente stavo cercando di prenotare alcuni biglietti per vedere Frozen 2 (a causa di, erm, i miei figli …) e quindi sono atterrato su questa pagina . Utilizza tre immagini SVG per le icone di trasporto:

Le immagini SVG sono immagini vettoriali, quindi sono adatte per cose come le icone; se hai immagini visualizzate come PNG, potresti chiedere ai tuoi progettisti gli SVG originali,  poiché potrebbero esserci risparmi considerevoli . Anche se non sempre meglio, l’uso di un SVG può far risparmiare il 60% della dimensione del file.

In questo caso, queste icone arrivano a circa 1,2k ciascuna, quindi sono piuttosto piccole. Probabilmente volerebbero sotto il radar degli audit di velocità del sito (e né Page Speed ​​Insights né GTMetrix menzionano affatto queste immagini per questa pagina).

Quindi potresti pensare: “Sono meno di 5k combinati – dovresti cercare problemi più grandi!”, Ma diamo un’occhiata. In primo luogo, possiamo eseguirli tutti tramite lo strumento di compressione SVG di Jake Archibald ; questo è un ottimo strumento gratuito e su SVG più grandi può fare una grande differenza.

In questo caso i file sono piccoli, quindi potresti ancora pensare “Perché preoccuparsi?” Lo strumento li comprime senza alcuna perdita di qualità da ~ 1240 byte a ~ 630 byte – un buon rapporto ma non molto di un risparmio complessivo.

Tuttavia … ora che li abbiamo compressi, possiamo pensare diversamente a consegnarli …

Immagini incorporate

GTMetrix fornisce suggerimenti sull’integrazione di piccoli frammenti di CSS o JS, ma non menziona le immagini in linea. Le immagini possono anche essere incorporate, e talvolta questo può essere l’approccio giusto.

Se consideri che anche un file di immagine molto piccolo richiede un round trip completo (che può avere un impatto molto reale sulla velocità ), anche per file di piccole dimensioni questo può richiedere molto tempo. Nel caso delle immagini di trasporto di Cineworld sopra, ho simulato una connessione “Fast 3G” e ho visto:

Il sito non sta usando HTTP2, quindi c’è un lungo periodo di attesa, quindi l’immagine (che è 1,2kb) impiega quasi 600ms per caricarsi (nessun HTTP2 significa che questo sta bloccando altre richieste). Esistono tre di queste immagini, quindi tra loro possono avere un impatto reale sulla velocità della pagina.

Tuttavia, ora li abbiamo compressi a poche centinaia di byte ciascuno e le immagini SVG sono in realtà costituite da markup in modo simile all’HTML:

Puoi effettivamente inserire il markup SVG direttamente in un documento HTML!

Se lo facciamo con tutte e tre le immagini di trasporto, l’HTML compresso per questa pagina che viene inviato dal server al nostro browser aumenta da 31.182 byte a 31.532 byte – un aumento di soli 350 byte per tutte e 3 le immagini!

Quindi, per ricapitolare:

  • La nostra richiesta HTML ha aumentato 350 byte, praticamente nulla
  • Possiamo scartare tre round trip sul server, che vediamo impiegare molto tempo

Alcuni di voi potrebbero aver capito che se le immagini non fossero in linea potrebbero essere memorizzate nella cache separatamente, quindi le richieste di pagine future non avrebbero bisogno di recuperarle. Ma se consideriamo:

  • Ogni immagine era originariamente di circa 1,5 KB sulla rete (non stanno comprimendo gli SVG), con circa 350 byte di intestazioni HTTP in cima per un totale di circa 5,5 KB. Quindi, nel complesso, abbiamo ridotto la quantità di contenuti sulla rete.
  • Ciò significa anche che occorrerebbero oltre 20 visualizzazioni di pagina per trarre vantaggio dalla loro memorizzazione nella cache.

Takeaway: considera dove ci sono opportunità di usare SVG invece di PNG.

Takeaway: assicurati di ottimizzare le immagini SVG, usa lo strumento gratuito a cui ho collegato.

Takeaway: L’ allineamento di immagini di piccole dimensioni può avere un senso e portare miglioramenti prestazionali fuori misura.

Nota: puoi anche incorporare PNG:  consulta questa guida .

Nota: per immagini PNG / JPG ottimizzate, prova Kraken .

Indietro, JavaScript! HTML può gestire questo …

Così spesso al giorno d’oggi, grazie alla prevalenza di librerie JavaScript che offrono una soluzione standard, trovo JavaScript utilizzato per funzionalità che potrebbero essere raggiunte senza di essa. Più librerie JS significano più download, forse più round trip per file aggiuntivi dal server, quindi i tempi e i costi di esecuzione di JavaScript.

Ho molta simpatia per come sei arrivato a questo punto. Gli sviluppatori ricevono spesso brevi riassunti / specifiche che non riescono a specificare nulla sulle prestazioni, solo sulla funzione. Spesso sono a corto di tempo ed è quindi facile finire per far cadere qualcosa.

Tuttavia, sono stati compiuti molti progressi in termini di funzionalità che è possibile ottenere con HTML e CSS. Diamo un’occhiata ad alcuni esempi.

Casella combinata con ricerca

Al giorno d’oggi le caselle a discesa con un’opzione di ricerca di testo sono un elemento di interfaccia abbastanza comune. Un recente articolo che ho trovato ha descritto come utilizzare la libreria Javascript Select2 per creare un tale elenco:

È un utile elemento dell’interfaccia utente e può aiutare i tuoi utenti. Tuttavia, nella libreria Select2 è presente una libreria JavaScript, che a sua volta si basa su alcuni CSS e la libreria JQuery. Ciò significa che tre round trip per raccogliere un mucchio di file di varie dimensioni:

  • JQuery – 101kb
  • Seleziona2 JavaScript – 24kb
  • Select2 CSS – 3kb

Questo non è l’ideale per la velocità del sito, ma potremmo sicuramente far valere la pena per avere un’interfaccia semplificata per gli utenti.

Tuttavia, in realtà è possibile avere questa funzionalità pronta all’uso con l’elemento datalist HTML:

Ciò consente all’utente di effettuare ricerche nell’elenco o di digitare liberamente la propria risposta, fornendo così la stessa funzionalità. Inoltre, ha un’interfaccia nativa su smartphone!

Puoi vederlo in azione in questo codice .

Dettagli / Riepilogo

LonelyPlanet ha un bellissimo sito Web e stavo guardando questa pagina sulla Spagna , che ha un link ‘Leggi di più’ con cui la maggior parte degli utenti web avrà familiarità:

Come quasi tutte le implementazioni di questo che vedo, hanno usato una libreria JavaScript per implementare questo, e ancora una volta questo comporta un sacco di spese generali.

Tuttavia, HTML ha una coppia di tag integrati chiamati dettagli e riepilogo , progettati per implementare esattamente questa funzionalità. Gratis e nativamente in HTML. Nessun sovraccarico e più accessibile per gli utenti che necessitano di uno screen reader, trasmettendo al contempo un significato semantico a Google.

Questi tag possono essere modellati in vari modi flessibili con CSS e ricreare la maggior parte delle versioni JS che ho visto là fuori.

Scopri una semplice demo qui: https://codepen.io/TomAnthony/pen/GRRLrmm

… e altro ancora

Per altri esempi di funzionalità che puoi ottenere con HTML anziché JS, dai un’occhiata a questi link:

  • http://youmightnotneedjs.com/
  • https://dev.to/ananyaneogi/html-can-do-that-c0n

Takeaway: esamina le funzionalità dei tuoi siti e vedi dove potrebbero esserci opportunità per ridurre la tua dipendenza da grandi librerie Javascript dove ci sono opzioni HTML / CSS native.

Takeaway: ricorda che non è solo la dimensione dei file JS ad essere problematica, ma il numero di round trip richiesti.

Nota: in alcuni casi è necessario utilizzare la soluzione JS, ma è importante valutare i pro e i contro.

Ottimizzazioni di rete

Ogni volta che il browser deve raccogliere risorse da un server, deve inviare un messaggio su Internet e viceversa; la velocità di questo è limitata dalla velocità della luce. Questo può sembrare una cosa ridicola di cui preoccuparci, ma significa che anche piccole richieste aggiungono tempo al caricamento della pagina. Se non hai trovato il link sopra, il mio post che spiega HTTP2 discute questo problema in modo più dettagliato .

Ci sono alcune cose che possiamo fare per aiutare a ridurre la distanza di queste richieste o per ridurre il numero di viaggi di andata e ritorno necessari. Questi sono un po ‘più tecnici, ma possono ottenere delle vere vittorie.

TLS 1.3

TLS (o SSL) è la tecnologia di crittografia utilizzata per proteggere le connessioni HTTPS. Storicamente sono stati necessari due round trip tra il browser e il server per configurare tale crittografia: se l’utente si trova a 50 ms di distanza dal server, ciò significa 200 ms per connessione. Tieni presente che Google consiglia storicamente di puntare a 200 ms per fornire l’HTML (questo sembra leggermente rilassato negli aggiornamenti più recenti); stai perdendo molto tempo qui.

Lo standard TLS 1.3 recentemente definito riduce questo da due round trip a uno solo, il che può far perdere un po ‘di tempo prezioso alla connessione iniziale degli utenti al tuo sito Web.

Parla con il tuo team tecnico sulla migrazione a TLS 1.3; i browser che non lo supportano torneranno a TLS 1.2 senza problemi. Tutto questo è dietro le quinte e non è una migrazione di alcun tipo. Non c’è motivo di non farlo.

Se stai usando un CDN, può essere semplice come accenderlo.

È possibile utilizzare questo strumento per verificare quali versioni di TLS sono state abilitate.

QUIC / HTTP 3

Negli ultimi 2-3 anni abbiamo visto un certo numero di siti passare da HTTP 1.1 a HTTP 2, che è un aggiornamento dietro le quinte che può apportare un reale miglioramento alla velocità (vedi il mio link sopra se vuoi leggere di più ).

Sul retro, esiste una coppia emergente di standard nota come QUIC + HTTP / 3, che ottimizza ulteriormente la connessione tra il browser e il server, riducendo ulteriormente i round trip richiesti.

Il supporto per questi sta appena iniziando a diventare fattibile, ma se sei un cliente CloudFlare puoi abilitarlo oggi e nei prossimi 6 mesi con il supporto di Chrome e Firefox, i tuoi utenti otterranno un aumento di velocità.

Maggiori informazioni qui: https://blog.cloudflare.com/http3-the-past-present-and-future/

Super routing

Quando gli utenti si connettono al tuo sito Web, devono aprire le connessioni di rete ovunque si trovino ai tuoi server (o alla tua CDN). Se immagini Internet come una serie di strade, potresti immaginare che devono “guidare” sul tuo server attraverso queste strade. Tuttavia, ciò significa congestione e ingorghi.

A quanto pare, alcune delle grandi aziende cloud hanno le loro strade private che hanno meno buche, meno traffico e limiti di velocità migliorati. Se solo i visitatori del tuo sito Web potessero accedere a queste strade, potrebbero “guidarti” più velocemente!

Beh, indovina un po ‘? Loro possono!

Per CloudFlare, forniscono questo accesso tramite il loro prodotto Argo , mentre se sei su AWS puoi usare il loro Global Accelerator . Ciò consente alle richieste al tuo sito Web di utilizzare le proprie reti private e ottenere un potenziale aumento di velocità. Entrambi sono molto economici se siete già clienti.

Takeaway: molti di questi tipi di benefici sono notevolmente più facili da ottenere se si utilizza una rete CDN. Se non stai già utilizzando un CDN, probabilmente dovresti esserlo. CloudFlare è un’ottima scelta, così come CloudFront se si utilizza AWS. Rapidamente è il più configurabile se sei più un professionista.

Takeaway: TLS 1.3 è ora ampiamente supportato e offre un significativo miglioramento della velocità per le nuove connessioni.

Takeaway: QUIC / HTTP3 stanno appena iniziando a ottenere supporto, ma nei prossimi mesi questo verrà implementato più ampiamente. QUIC include i vantaggi di TLS 1.3 e altro ancora. Una tipica connessione HTTP2 al giorno d’oggi ha bisogno di 3 round trip per aprire; QUIC ha bisogno solo di uno!

Takeaway: se utilizzi CloudFlare o AWS, è possibile ottenere accelerazioni semplicemente premendo un interruttore per attivare le funzionalità di routing intelligente.

Lascia che CSS faccia di più

Sopra ho parlato di come HTML abbia funzionalità integrate che puoi sfruttare per salvare facendo affidamento su soluzioni “home-roll” e che quindi richiedono più codice (ed elaborazione sul lato browser) da implementare. Qui parlerò di alcuni esempi in cui i CSS possono fare lo stesso per te.

Riutilizzare le immagini

Spesso trovi pagine che utilizzano immagini simili in tutta la pagina in diversi punti. Ad esempio, variazioni su un logo in diversi colori o frecce che puntano in entrambe le direzioni. Come risorse uniche (per quanto simili possano essere), ognuna di queste deve essere scaricata separatamente.

Tornando alla mia caccia per i biglietti del cinema qui sopra, dove stavo guardando questa pagina , possiamo vedere una giostra che ha le frecce sinistra e destra:

Analogamente alla logica utilizzata in precedenza, sebbene questi file di immagini siano piccoli, richiedono comunque un round trip per il recupero dal server.

Tuttavia, le frecce sono identiche – puntano solo in direzioni opposte! È facile per noi utilizzare la funzionalità di trasformazione CSS per utilizzare un’immagine per entrambe le direzioni:

Puoi dare un’occhiata a questo codice per un esempio.

Un altro esempio è quando lo stesso logo appare in stili diversi su parti diverse della pagina; spesso caricheranno più varianti, il che non è necessario. I CSS possono ricolorare i loghi per te in vari modi:

C’è un codice qui che mostra questa tecnica in azione. Se vuoi calcolare il valore del filtro CSS richiesto per raggiungere un colore arbitrario, dai un’occhiata a questo fantastico calcolatore di colori .

Interazioni (ad es. Menu e schede)

Spesso elementi di navigazione come menu e schede sono implementati in JavaScript, ma anche questi possono essere fatti in puro CSS. Dai un’occhiata a questo codice per un esempio:

animazioni

CSS3 ha introdotto molte potenti funzionalità di animazione nei CSS. Spesso questi non sono solo più veloci delle versioni JavaScript, ma possono anche essere più fluidi in quanto possono essere eseguiti nel codice nativo del sistema operativo anziché dover eseguire Javascript relativamente più lento.

Dai un’occhiata a Dozing Bird come esempio:

Puoi trovare molto di più in questo articolo . Le animazioni CSS possono aggiungere molto carattere alle pagine a un costo relativamente basso.

… e altro ancora

Per altri esempi di funzionalità che puoi ottenere utilizzando soluzioni CSS pure, dai un’occhiata a:

  • http://youmightnotneedjs.com/
  • https://dev.to/ananyaneogi/css-can-do-that-18g7m

Takeaway: usa CSS per ottimizzare il numero di file che devi caricare usando rotazioni o filtri.

Takeaway: le animazioni CSS possono aggiungere carattere alle pagine e spesso richiedono meno risorse di JavaScript.

Takeaway: CSS è perfettamente in grado di implementare molti elementi dell’interfaccia utente interattiva.

Incartare

Spero che tu abbia trovato questi esempi utili in loro stessi, ma il punto più ampio che voglio mettere in evidenza è che dovremmo tutti provare a pensare un po ‘fuori dagli schemi per quanto riguarda la velocità del sito. Di particolare importanza è la riduzione del numero di round trip necessari per il server; anche le risorse di piccole dimensioni richiedono un po ‘di tempo per essere recuperate e possono avere un impatto apprezzabile sulle prestazioni (soprattutto mobili).

Ci sono molte più idee di quelle che abbiamo trattato qui, quindi per favore saltate nei commenti se avete altre cose che avete incontrato.