Ottimizza la codifica e le dimensioni di trasferimento degli asset basati su testo

Oltre a eliminare i download inutili di risorse, la cosa migliore che puoi fare per aumentare la velocità di caricamento della pagina è ridurre al minimo le dimensioni di download complessive ottimizzando e comprimendo le risorse rimanenti.

Compressione dei dati di base

Dopo aver configurato il sito web per evitare di scaricare risorse inutilizzate, il passaggio successivo consiste nel comprimere le risorse idonee rimanenti che il browser deve scaricare. A seconda del tipo di risorsa (testo, immagini, caratteri e così via), sono disponibili molte tecniche diverse tra cui scegliere: strumenti generici che possono essere attivati sul server web, ottimizzazioni della pre-elaborazione per tipi di contenuti specifici e ottimizzazioni specifiche per le risorse che richiedono l'input dello sviluppatore.

Per ottenere il miglior rendimento possibile, è necessaria una combinazione di tutte le seguenti tecniche:

  • La compressione è il processo di codifica delle informazioni che utilizza meno bit.
  • Eliminare i dati inutili dà sempre i risultati migliori.
  • Esistono diversi algoritmi e tecniche di compressione.
  • Avrai bisogno di una serie di tecniche per ottenere la migliore compressione.

Il processo di riduzione delle dimensioni dei dati è la compressione dei dati. Molte persone hanno contribuito ad algoritmi, tecniche e ottimizzazioni per migliorare i rapporti di compressione, la velocità di compressione e la memoria richiesta da vari algoritmi di compressione.

Una discussione completa sulla compressione dei dati va ben oltre l'ambito di questa guida. Tuttavia, è importante comprendere, a livello generale, come funziona la compressione e le tecniche che puoi utilizzare per ridurre le dimensioni dei vari asset richiesti dalle tue pagine.

Per illustrare i principi fondamentali di queste tecniche, considera il processo di ottimizzazione di un semplice formato di messaggio di testo inventato solo per questo esempio:

# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA
  1. I messaggi possono contenere annotazioni arbitrarie, a volte chiamate commenti, indicate dal prefisso "#". Le annotazioni non influiscono sul significato o sul comportamento del messaggio.
  2. I messaggi possono contenere headers, cioè coppie chiave-valore (separate da ":" nell'esempio precedente) visualizzate all'inizio del messaggio.
  3. I messaggi contengono payload di testo.

Cosa si può fare per ridurre le dimensioni del messaggio precedente, che inizia a 200 caratteri?

  1. Il commento è interessante, ma non influisce sul significato del messaggio. Eliminalo durante la trasmissione del messaggio.
  2. Esistono tecniche efficaci per codificare le intestazioni in modo efficiente. Ad esempio, se sai che tutti i messaggi hanno "formato" e "data", puoi convertirli in ID numeri interi brevi e inviarli. Tuttavia, potrebbe non essere vero, la cosa migliore è lasciar stare per il momento.
  3. Il payload è solo testo. Anche se non sappiamo quali siano i contenuti effettivi (apparentemente, l'oggetto è "secret-cipher"), il solo controllo del testo mostra che è presente molte ridondanze. Magari invece di inviare lettere ripetute, puoi semplicemente contare il numero di lettere ripetute e codificarle in modo più efficiente. Ad esempio, "AAA" diventa "3A", che rappresenta una sequenza di tre A.

La combinazione di queste tecniche produce il seguente risultato:

format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A

Il nuovo messaggio contiene 56 caratteri, il che significa che hai compresso il messaggio originale del 72%. Si tratta di una riduzione significativa!

Questo è un esempio giocattolo di come gli algoritmi di compressione possono essere efficaci nel ridurre le dimensioni di trasferimento delle risorse basate su testo. In pratica, gli algoritmi di compressione sono molto più sofisticati rispetto a quanto illustrato nell'esempio precedente, e sul web gli algoritmi di compressione possono essere utilizzati per ridurre significativamente i tempi di download delle risorse. Grazie all'applicazione della compressione agli asset basati su testo, una pagina web può dedicare meno tempo al caricamento delle risorse, in modo che gli utenti possano vederne gli effetti prima di quanto farebbero senza compressione.

Minimizzazione: pre-elaborazione e ottimizzazioni specifiche in base al contesto

La prima tecnica discussa qui è la minificazione. Sebbene la minimizzazione non sia strettamente un algoritmo di compressione, è un modo per rimuovere i caratteri non necessari e ridondanti utilizzati nel codice sorgente al fine di rendere le risorse più leggibili. Tuttavia, questa leggibilità non è necessaria per mantenere la funzionalità del codice sorgente sui siti web di produzione e può ritardare il caricamento delle risorse sul web.

La minimizzazione è un tipo di ottimizzazione specifico per i contenuti che può ridurre notevolmente le dimensioni delle risorse pubblicate e le ottimizzazioni vengono applicate al meglio nell'ambito del processo di creazione e deployment. Ad esempio, i bundle sono un tipo di software di uso comune in grado di minimizzare automaticamente le risorse prima del deployment di nuovo codice di produzione su un sito web.

Il modo migliore per comprimere i dati ridondanti o non necessari è eliminarli. Tuttavia, non puoi semplicemente eliminare dati arbitrari. Tuttavia, in alcuni contesti in cui conosciamo il formato dei dati e le sue proprietà specifiche per i contenuti, è possibile ridurre in modo significativo le dimensioni del payload senza comprometterne il significato o le funzionalità effettivi.

<html>
  <head>
    <style>
      /* awesome-container is only used on the landing page */
      .awesome-container {
        font-size: 120%;
      }

      .awesome-container {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <!-- awesome container content: START -->
    <div>
      This is my awesome container, and it is <em>so</em> awesome.
    </div>
    <!-- awesome container content: END -->
    <script>
      awesomeAnalytics(); // Beacon conversion metrics
    </script>
  </body>
</html>

Considera lo snippet HTML precedente e i tre diversi tipi di contenuti che contiene:

  1. markup HTML.
  2. CSS per personalizzare la presentazione di una pagina.
  3. JavaScript per potenziare le interazioni e altre funzionalità avanzate delle pagine.

Ognuno di questi tipi di contenuti prevede regole diverse per definire contenuti validi, regole diverse per specificare i commenti e così via. La domanda che rimane, però, è "In che modo è possibile ridurre le dimensioni di questa pagina?"

  • I commenti al codice sono uno strumento prezioso per gli sviluppatori, ma non sono necessari al browser. L'eliminazione dei commenti CSS (/* ... */), HTML (<!-- ... -->) e JavaScript (// ...) riduce le dimensioni totali di trasferimento della pagina e delle relative risorse secondarie.
  • Un programma di compressione CSS "intelligente" potrebbe notare che stiamo utilizzando un modo inefficiente per definire le regole per .awesome-container e comprimere le due dichiarazioni in una sola senza influire sugli altri stili, risparmiando ulteriori byte. Rispetto a una vasta serie di regole CSS, la rimozione di questo tipo di ridondanza potrebbe non essere, ma potrebbe non essere applicabile in modo aggressivo, perché i selettori sono spesso necessari duplicati in contesti diversi, ad esempio all'interno di query supporti.
  • Spazi e schede sono funzionalità utili per gli sviluppatori in HTML, CSS e JavaScript. Un altro strumento di compressione potrebbe eliminare tutte le tabulazioni e gli spazi. A differenza di altre tecniche di deduplicazione, questo tipo di ottimizzazione può essere applicato in modo piuttosto aggressivo, purché questi spazi o tabulazioni non siano necessari per la presentazione della pagina. Ad esempio, potresti conservare gli spazi all'interno di esecuzioni di testo in un documento HTML, poiché garantiscono la leggibilità dei contenuti che gli utenti vedranno effettivamente.
<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>

Dopo aver applicato i passaggi precedenti, la pagina passa da 516 a 204 caratteri, il che rappresenta un risparmio di circa il 60%. Certo, non è molto leggibile, ma non è necessario che sia utilizzabile. Le moderne pratiche di sviluppo ti consentono inoltre di mantenere le versioni ben formattate e leggibili del codice sorgente separate dal codice ben ottimizzato che distribuisci in produzione. In combinazione con le mappe di origine, che fornisce una rappresentazione leggibile del codice di produzione trasformato, puoi risolvere più facilmente i bug in produzione, puoi avere una buona esperienza sviluppatore e ottimizzare le prestazioni per l'esperienza utente.

L'esempio precedente illustra un punto importante: un compressore generico, ad esempio progettato per comprimere testo arbitrario, potrebbe essere utile a comprimere la pagina nell'esempio precedente, ma non saprebbe mai di eliminare i commenti, comprimere le regole CSS o decine di altre ottimizzazioni specifiche dei contenuti. Questo è il motivo per cui la pre-elaborazione, la minimizzazione e altre ottimizzazioni sensibili al contesto sono importanti.

Allo stesso modo, le tecniche descritte sopra possono essere estese oltre le semplici risorse basate su testo. Immagini, video e altri tipi di contenuti contengono tutti i propri tipi di metadati e vari payload. Ad esempio, ogni volta che scatti una foto con una fotocamera, il file di solito incorpora molte informazioni aggiuntive: le impostazioni della fotocamera, la posizione e così via. A seconda dell'applicazione, questi dati potrebbero essere critici (ad esempio un sito di condivisione di foto) o essere completamente inutili. Dovresti valutare se vale la pena rimuoverla. In pratica, questi metadati possono sommare fino a decine di kilobyte per ogni immagine.

In breve, come primo passo per ottimizzare l'efficienza dei tuoi asset, crea un inventario dei diversi tipi di contenuti e considera quali tipi di ottimizzazioni specifiche per i contenuti puoi applicare per ridurne le dimensioni. Poi, una volta determinate, automatizza queste ottimizzazioni aggiungendole ai passaggi di build e release per garantire che vengano applicate in modo coerente per ogni nuova release in produzione.

Compressione del testo con algoritmi di compressione

Il passaggio successivo per ridurre le dimensioni degli asset basati su testo è applicare loro un algoritmo di compressione. Si tratta di un ulteriore passo in avanti, grazie alla ricerca aggressiva di pattern ripetibili nei payload basati su testo prima di essere inviati all'utente e la loro decompressione non appena arrivano nel browser dell'utente. Il risultato è una riduzione ulteriore e significativa di queste risorse, con conseguente riduzione dei tempi di download.

  • gzip e Brotli sono algoritmi di compressione di uso comune che offrono i migliori risultati per asset basati su testo: CSS, JavaScript e HTML.
  • Tutti i browser moderni supportano la compressione gzip e Brotli e annuncieranno il supporto per entrambe nell'intestazione della richiesta HTTP Accept-Encoding.
  • Il server deve essere configurato per l'abilitazione della compressione. Il software del server web spesso consente ai moduli di comprimere le risorse basate su testo per impostazione predefinita.
  • Sia gzip che Brotli possono essere perfezionati per migliorare i rapporti di compressione regolando il livello di compressione. Per gzip, le impostazioni di compressione sono comprese tra 1 e 9, dove 9 è la migliore. Per Brotli, questo intervallo è compreso tra 0 e 11, dove 11 è il migliore. Tuttavia, impostazioni di compressione più elevate richiedono più tempo. Per le risorse compresse dinamicamente, ovvero al momento della richiesta, le impostazioni a metà intervallo tendono a offrire il miglior compromesso tra rapporto di compressione e velocità. Tuttavia, è possibile utilizzare la compressione statica, ovvero quando la risposta viene compressa in anticipo, e può quindi utilizzare le impostazioni di compressione più aggressive disponibili per ogni algoritmo di compressione.
  • Le reti CDN (Content Delivery Network) in genere offrono la compressione automatica delle risorse idonee. Le CDN possono anche gestire la compressione dinamica e statica per te, offrendoti un aspetto di compressione in meno di cui devi preoccuparti.

gzip e Brotli sono compressori comuni che possono essere applicati a qualsiasi flusso di byte. In background, ricordano alcuni dei contenuti esaminati in precedenza di un file e successivamente tentano di trovare e sostituire i frammenti di dati duplicati in modo efficiente.

In pratica, sia gzip che Brotli funzionano meglio sui contenuti basati su testo, raggiungendo spesso tassi di compressione fino al 70-90% per i file più grandi. Tuttavia, l'esecuzione di asset di questi algoritmi già compressi usando algoritmi alternativi, ad esempio la maggior parte dei formati delle immagini che utilizzano tecniche di compressione senza perdita o con perdita di dati, offre miglioramenti minimi o nulli.

Tutti i browser moderni pubblicizzano il supporto per gzip e Brotli nell'intestazione della richiesta HTTP Accept-Encoding. Tuttavia, è responsabilità del provider host assicurarsi che il server web sia configurato correttamente per pubblicare la risorsa compressa quando il client la richiede.

File Algoritmo Dimensioni non compresse Dimensioni compresse Rapporto di compressione
angular-1.8.3.js Brotli 1.346 KiB 256 KiB 81%
angular-1.8.3.js gzip 1.346 KiB 329 KiB Il 76%
angolare-1.8.3.min.js Brotli 173 KiB 53 KiB Il 69%
angolare-1.8.3.min.js gzip 173 KiB 60 KiB 65%
jquery-3.7.1.js Brotli 302 KiB 69 KiB Il 77%
jquery-3.7.1.js gzip 302 KiB 83 KiB Il 73%
jquery-3.7.1.min.js Brotli 85 KiB 27 KiB Il 68%
jquery-3.7.1.min.js gzip 85 KiB 30 KiB 65%
lodash-4.17.21.js Brotli 531 KiB 73 KiB 86%
lodash-4.17.21.js gzip 531 KiB 94 KiB 82%
lodash-4.17.21.min.js Brotli 71 KiB 23 KiB Il 68%
lodash-4.17.21.min.js gzip 71 KiB 25 KiB 65%

La tabella precedente mostra i risparmi che la compressione Brotli e gzip può fornire per alcune librerie JavaScript note. Il risparmio varia dal 65% all'86%, a seconda del file e dell'algoritmo. Come riferimento, il livello di compressione massimo è stato applicato a ogni file sia per Brotli che per gzip. Se possibile, preferisci Brotli a gzip.

L'abilitazione della compressione è una delle ottimizzazioni più semplici ed efficaci da implementare. Se il tuo sito web non lo utilizza, stai perdendo una grande opportunità di migliorare il rendimento per i tuoi utenti. Fortunatamente, molti server web forniscono configurazioni predefinite che consentono questa importante ottimizzazione e le reti CDN in particolare sono molto efficaci nell'implementarla in modo da bilanciare velocità e rapporto di compressione.

Un modo rapido per vedere la compressione in azione è aprire Chrome DevTools, aprire il riquadro Rete, caricare una pagina che preferisci e osservare la parte inferiore del riquadro Network.

Lettura DevTools tra le dimensioni effettive e quelle di trasferimento.
Una rappresentazione delle dimensioni del trasferimento (compresso) di tutte le risorse della pagina rispetto alle dimensioni effettive visualizzate nel riquadro Network (Rete) di Chrome DevTools.

Come nell'immagine precedente, dovresti vedere una suddivisione di:

  • Il numero di richieste, ovvero il numero di risorse caricate per la pagina.
  • La dimensione di trasferimento di tutte le richieste. Ciò riflette l'efficacia della compressione applicata a qualsiasi risorsa di una pagina.
  • La dimensione risorsa di tutte le richieste. Ciò riflette le dimensioni delle risorse della pagina dopo che sono state decompresse.

Effetti sui Segnali web essenziali

I miglioramenti delle prestazioni non possono essere misurati se non esistono metriche che riflettono tali miglioramenti. L'iniziativa Segnali web essenziali ha lo scopo di creare e aumentare la notorietà di metriche che riflettono l'esperienza utente effettiva. Ciò è in contrasto con le metriche, come ad esempio il semplice tempo di caricamento di una pagina, che non si traducono chiaramente in termini di qualità dell'esperienza utente.

Quando applichi le ottimizzazioni descritte in questa guida alle risorse del tuo sito web, gli effetti sui Segnali web essenziali possono variare in base alle risorse ottimizzate e alle metriche coinvolte. Tuttavia, ecco alcuni casi in cui l'applicazione di queste ottimizzazioni può migliorare i Segnali web essenziali del tuo sito web:

  • Le risorse HTML minimizzate e compresse possono migliorare il caricamento del codice HTML, la rilevabilità delle relative sottorisorse e, di conseguenza, il relativo caricamento. Questa operazione può essere utile per la Largest Contentful Paint (LCP) di una pagina. Sebbene i suggerimenti delle risorse come rel="preload" possano essere utilizzati per influire sulla rilevabilità delle risorse, utilizzarne troppi può causare problemi di contesa della larghezza di banda. Garantendo che la risposta HTML per una richiesta di navigazione sia compressa, le risorse al loro interno possono essere rilevate il prima possibile dallo scanner di precaricamento.
  • Alcuni candidati LCP possono essere caricati prima utilizzando la compressione. Ad esempio, il tempo di caricamento delle risorse delle immagini SVG candidati LCP può essere ridotto tramite la compressione basata su testo. Questa è diversa dalle ottimizzazioni che applicheresti ad altri tipi di immagini, che sono intrinsecamente compresse tramite altri metodi di compressione, ad esempio il modo in cui le immagini JPEG utilizzano la compressione con perdita.
  • Inoltre, i nodi di testo possono essere candidati LCP. La modalità delle tecniche descritte in questa guida varia a seconda che tu stia utilizzando o meno un carattere web per il testo delle tue pagine web. Se usi un carattere web, vengono applicate le best practice per l'ottimizzazione del carattere web. Tuttavia, se non utilizzi caratteri web, ma i caratteri di sistema che vengono visualizzati senza tempi di caricamento delle risorse, minimizzare e comprimere il codice CSS riduce il tempo di caricamento, il che significa che il rendering dei potenziali nodi di testo LCP può avvenire più rapidamente.

Conclusione

Il modo in cui ottimizzi la codifica e il trasferimento di asset basati su testo è un concetto di rendimento di base, ma è uno che ha un grande impatto. Assicurati di fare tutto il possibile per assicurarti che le risorse idonee per la minimizzazione e la compressione traggono vantaggio da queste ottimizzazioni.

Ancora più importante, assicurati che questi processi vengano automatizzati. Per minimizzare le risorse idonee, utilizza un bundler per applicare la minimizzazione. Assicurati che la configurazione del tuo server web supporti la compressione, ma utilizza anche la compressione più efficace disponibile. Per semplificare il più possibile le operazioni, utilizza le reti CDN per automatizzare la compressione, poiché non solo sono in grado di comprimere le risorse al posto tuo, ma possono anche farlo molto rapidamente.

Integrando questi concetti di base delle prestazioni nell'architettura del tuo sito web, puoi assicurarti che gli sforzi per l'ottimizzazione delle prestazioni siano adeguati e che le successive ottimizzazioni possano basarsi su solide basi di buone prassi di base.