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

Ilya Grigorik

Jeremy Wagner

La cosa migliore da fare, oltre a eliminare i download di risorse superflui, migliorare la velocità di caricamento delle pagine è ridurre al minimo le dimensioni complessive di download ottimizzando e la compressione delle risorse rimanenti.

Guida introduttiva alla compressione dei dati

Una volta configurato il sito web per evitare di scaricare risorse inutilizzate, il passaggio successivo consiste nel comprimere eventuali risorse idonee rimanenti per il download. A seconda del tipo di risorsa: testo, immagini, caratteri e così via esistono molte tecniche diverse tra cui scegliere: strumenti generici che possono abilitate sul server web, le ottimizzazioni in fase di pre-elaborazione di contenuti specifici e le ottimizzazioni specifiche delle risorse che richiedono l'input sviluppatore.

Per ottenere le migliori prestazioni è necessaria una combinazione di tutti i seguenti elementi: tecniche:

• La compressione è il processo di codifica delle informazioni utilizzando un numero inferiore di bit.
• L'eliminazione dei dati non necessari dà sempre i risultati migliori.
• Esistono molte tecniche e algoritmi di compressione diversi.
• Avrai bisogno di una serie di tecniche per ottenere la compressione migliore.

Il processo per ridurre le dimensioni dei dati è la compressione dei dati. Molte persone hanno algoritmi, tecniche e ottimizzazioni apportate per migliorare la compressione velocità di compressione e la memoria richiesta da varie degli algoritmi.

Un'analisi esaustiva della compressione dei dati va ben oltre l'ambito di questa guida. Tuttavia, è importante capire, a livello generale, come funziona la compressione. le tecniche che puoi utilizzare per ridurre le dimensioni dei vari asset che le tue pagine che ti servono.

Per illustrare i principi fondamentali di queste tecniche, considera il processo di all'ottimizzazione di un semplice formato di SMS inventato proprio 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: indicati dal carattere "#" . Le annotazioni non influiscono il significato del messaggio o i suoi comportamenti.
2. I messaggi possono contenere intestazioni, ovvero coppie chiave-valore (separate da ":" nell'esempio precedente) che vengono visualizzate all'inizio del messaggio.
3. I messaggi contengono payload di testo.

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

1. Il commento è interessante, ma non influisce sul significato del messaggio. Eliminarli durante la trasmissione del messaggio.
2. Esistono buone tecniche per codificare le intestazioni in modo efficiente. Per Ad esempio, se sai che tutti i messaggi hanno "formato" e "data", potresti convertirli in ID corti interi e inviarli. Tuttavia, non è vero, quindi è meglio non tenerlo per il momento.
3. Il payload è di solo testo. Anche se non conosciamo i contenuti sono (a quanto pare usa un "secret-cipher"), solo guardando il testo mostra che c'è molta ridondanza. Forse invece di inviare lettere ripetute, puoi contare il numero di lettere ripetute e a codificarli 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 del 72% il messaggio originale. Si tratta di una riduzione significativa.

Questo è un esempio pratico dell'efficacia degli algoritmi di compressione Riducendo le dimensioni del trasferimento delle risorse basate su testo. In pratica, la compressione gli algoritmi sono molto più sofisticati di quanto illustrato nell'esempio precedente. sul web, gli algoritmi di compressione possono essere utilizzati per ridurre significativamente per le risorse. Applicando la compressione agli asset basati su testo, una pagina web possono dedicare meno tempo al caricamento delle risorse, in modo che gli utenti possano vedere gli effetti queste risorse prima di quanto farebbero senza compressione.

Minimizzazione: pre-elaborazione e ottimizzazioni specifiche del contesto

La prima tecnica illustrata qui è la minificazione. Mentre la minimizzazione non è strettamente un algoritmo di compressione, è un modo per rimuovere caratteri ridondanti utilizzati nel codice sorgente per rendere le risorse più leggibili umani. Tuttavia, la leggibilità non è necessaria per mantenere la funzionalità di quel codice sorgente sui siti web di produzione e può ritardare il caricamento risorse sul web.

La minimizzazione è un tipo di ottimizzazione specifica per i contenuti che può significativamente riducono le dimensioni delle risorse distribuite e sono le ottimizzazioni più adatte come parte del processo di creazione e deployment. Ad esempio, i bundler sono un di uso comune in grado di minimizzare automaticamente le risorse prima del deployment del nuovo codice di produzione su un sito web.

Il modo migliore per comprimere i dati ridondanti o non necessari è eliminarli. Tuttavia, non puoi limitarti a eliminare i dati arbitrari. Tuttavia, in alcuni contesti in cui specifiche dei contenuti del formato dei dati e delle sue proprietà, ridurre significativamente le dimensioni del payload senza comprometterne significato o capacità effettive.

<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 facilitare le interazioni e altre funzionalità avanzate per le pagine.

Ognuno di questi tipi di contenuti ha regole diverse su ciò che costituisce contenuti, regole diverse per specificare i commenti e così via. La domanda che rimane, tuttavia, è "come si possono ridurre le dimensioni di questa pagina?".

• I commenti del codice sono i migliori amici degli sviluppatori, ma il browser non ha bisogno loro! Rimozione di CSS (/* ... */), HTML (<!-- ... -->) e JavaScript (// ...) riduce le dimensioni totali di trasferimento della pagina e delle relative delle risorse secondarie.
• Un modo "intelligente" CSS compressore potrebbe notare che stiamo utilizzando un modo inefficiente definendo le regole per .awesome-container e comprimi le due dichiarazioni in uno senza modificare gli altri stili, risparmiando più byte. Su un modello di di regole CSS, la rimozione di questo tipo di ridondanza può portare alla somma, ma possa essere applicata in modo aggressivo, poiché i selettori sono spesso necessariamente duplicati in contesti diversi, ad esempio all'interno delle query supporti.
• Spazi e schede sono funzionalità utili per gli sviluppatori in HTML, CSS e JavaScript. Un compressore aggiuntivo potrebbe rimuovere tutte le tabulazioni e tutti gli spazi. A differenza di altri tecniche di deduplicazione, questo tipo di ottimizzazione può essere applicato in modo aggressivo, purché spazi o tabulazioni non siano necessari per il presentazione: ad esempio, conviene conservare gli spazi all'interno delle esecuzioni testo in un documento HTML, in quanto garantiscono la leggibilità dei contenuti che gli utenti 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 va da 516 a 204 caratteri, rappresenta un risparmio di circa il 60%. Certo, non è molto leggibile, non è necessario per poter essere usati. Le moderne pratiche di sviluppo consentono di conservare le versioni leggibili e ben formattate del codice sorgente separato dal codice ben ottimizzato che distribuisci in produzione. Combinato con mappe di origine, che forniscono una rappresentazione leggibile dei contenuti trasformati di produzione consente di risolvere più facilmente i bug in produzione, offrire sia una buona esperienza per gli sviluppatori che l'ottimizzazione delle prestazioni per motivi di interesse dell'esperienza utente.

L'esempio precedente illustra un punto importante: una definizione compressore, ad esempio, progettato per comprimere testo arbitrario, potrebbe fare di comprimere la pagina nell'esempio precedente, ma non saprebbe mai rimuovete i commenti, comprimono le regole CSS o decine di altre applicazioni specifiche ottimizzazioni. Questo è il motivo per cui la pre-elaborazione, la minimizzazione e altre le ottimizzazioni sono importanti.

Analogamente, le tecniche descritte in precedenza possono essere estese asset. Immagini, video e altri tipi di contenuti presentano tutti le proprie forme di metadati e vari payload. Ad esempio, ogni volta che scatti una foto con un fotocamera, il file in genere contiene molte informazioni aggiuntive: impostazioni della fotocamera, posizione e così via. A seconda dell'applicazione, questi dati potrebbero essere critici (ad esempio, un sito di condivisione di foto) o potrebbe essere del tutto inutile. Tu valuta se vale la pena rimuoverla. In pratica, questi metadati possono aggiungere fino a decine di kilobyte per ogni immagine.

In breve, come primo passo per ottimizzare l'efficienza delle tue risorse, crea un inventario dei diversi tipi di contenuti e considerare quali tipi di ottimizzazioni specifiche dei contenuti che puoi applicare per ridurne le dimensioni. Poi e dopo hai capito cosa sono, automatizza queste ottimizzazioni aggiungendole i passaggi di build e rilascio per garantire che le ottimizzazioni 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 è l'applicazione di un di compressione. Questo va oltre perché in modo aggressivo cercando pattern ripetibili nei payload basati su testo prima di inviarli l'utente e lo decomprime quando arriva nel browser dell'utente. La risultato è un'ulteriore e significativa riduzione di tali risorse, e le tempi di download più rapidi.

• gzip e Brotli sono algoritmi di compressione comunemente utilizzati e garantiscono le asset basati su testo: CSS, JavaScript, HTML.
• Tutti i browser moderni supportano la compressione gzip e Brotli e per entrambi nell'intestazione della richiesta HTTP Accept-Encoding.
• Il server deve essere configurato in modo da abilitare la compressione. Software server web spesso i moduli consentono di comprimere le risorse basate su testo per impostazione predefinita.
• Sia gzip che Brotli possono essere ottimizzati per migliorare i rapporti di compressione regolando il livello di compressione. Per gzip, le impostazioni di compressione variano da Da 1 a 9, dove 9 indica il massimo. Per Brotli, questo intervallo va da 0 a 11, con 11 sia il migliore. Tuttavia, le impostazioni di compressione più elevate richiedono più tempo. Per di risorse compresse dinamicamente, ovvero al momento richiesta: le impostazioni nella fascia intermedia tendono a offrire il miglior compromesso tra rapporto di compressione e velocità. Tuttavia, la compressione statica possibile, ovvero quando la risposta viene compressa in anticipo e può quindi utilizza le impostazioni di compressione più aggressive disponibili di compressione.
• Le reti CDN (Content Delivery Network) di solito offrono la compressione automatica di risorse idonee. Le reti CDN possono anche gestire la compressione dinamica e statica dandoti un aspetto di compressione in meno di cui preoccuparti.

gzip e Brotli sono comuni compressori che possono essere applicati a qualsiasi flusso di byte. Di fondo, ricordano alcuni dei contenuti precedentemente esaminati file per poi tentare di trovare e sostituire i frammenti di dati duplicati in modo efficiente.

In pratica, sia gzip che Brotli hanno prestazioni migliori sui contenuti basati su testo, raggiungendo spesso una compressione fino al 70-90% per i file più grandi. Tuttavia, l'esecuzione di questi asset di algoritmi che sono già compressi utilizzando algoritmi alternativi, come poiché la maggior parte dei formati di immagine che utilizza tecniche di compressione senza perdita o con perdita di dati, con un miglioramento minimo o nullo.

Tutti i browser moderni pubblicizzano il supporto di gzip e Brotli nel Intestazione della richiesta HTTP Accept-Encoding. Tuttavia, sono le impostazioni garantire che il server web sia configurato correttamente per pubblicare quando viene richiesto dal client.

La tabella precedente mostra i risparmi garantiti sia da Brotli che dalla compressione gzip forniscono alcune librerie JavaScript molto note. Il risparmio varia dal 65% al fino all'86%, a seconda del file e dell'algoritmo. Come riferimento, il numero massimo sia stato applicato a tutti i file sia Brotli che gzip. Ovunque preferisci Brotli a gzip.

L'attivazione della compressione è una delle ottimizzazioni più semplici ed efficaci per da implementare. Se il tuo sito web non lo sfrutta, perdi l'opportunità rappresentano una grande opportunità per migliorare il rendimento degli utenti. Fortunatamente, molte applicazioni i server forniscono configurazioni predefinite che consentono questa importante ottimizzazione, e CDN, in particolare, sono molto efficaci nell'implementarli nel modo bilancia velocità e rapporto di compressione.

Un modo rapido per vedere la compressione in azione è aprire Chrome DevTools, Network, carica una pagina di tua scelta e osserva la parte inferiore della riquadro di rete.

Come nell'immagine precedente, dovresti vedere un'analisi dettagliata di:

• Il numero di richieste, ovvero il numero di risorse caricate per .
• Le dimensioni del trasferimento di tutte le richieste. Ciò riflette l'efficacia applicata a una risorsa della pagina.
• La dimensione delle risorse di tutte le richieste. Ciò riflette le dimensioni delle risorse la pagina dopo la decompressione.

Effetti sui Core Web Vitals

I miglioramenti del rendimento possono essere misurati solo se esistono metriche che riflettono per ottenere questi miglioramenti. L'iniziativa Core Web Vitals esiste per creare e aumentare l'awareness di metriche che riflettono l'esperienza utente effettiva. Ciò è in contrasto con le metriche, come il semplice tempo di caricamento delle pagine, che non si traducono chiaramente in qualità dell'esperienza utente.

Quando applichi le ottimizzazioni descritte in questa guida alle risorse sul tuo sito web, gli effetti su Core Web Vitals possono variare in base alle risorse ottimizzato e le metriche interessate. Tuttavia, ecco alcuni casi in cui L'applicazione di queste ottimizzazioni può migliorare i Core Web Vitals del tuo sito web:

• Le risorse HTML minimizzate e compresse possono migliorare il caricamento dei dell'HTML e della rilevabilità delle sue risorse secondarie, migliorando quindi per caricarle. Questa operazione può essere utile per la visualizzazione Largest Contentful Paint di una pagina (LCP). Sebbene gli hint delle risorse come rel="preload" possano essere utilizzati per influire la rilevabilità delle risorse, utilizzandone troppe può causare problemi della larghezza di banda. Garantendo la risposta HTML a una richiesta di navigazione. è compresso, le risorse al loro interno possono essere scoperte il prima possibile dallo Scanner di precaricamento.
• Alcuni candidati LCP possono anche essere caricati prima mediante la compressione. Per Ad esempio, le immagini SVG candidati LCP possono avere il carico di risorse media diminuita mediante la compressione basata su testo. Questo è diverso da le ottimizzazioni che si applicherebbero ad altri tipi di immagini, ovvero compresso intrinsecamente tramite altri metodi, come la compressione utilizzano la compressione con perdita di dati.
• Inoltre, i nodi di testo possono essere candidati LCP. Come vengono usate le tecniche descritto in questa guida a seconda che venga utilizzato o meno un carattere web per il testo nelle tue pagine web. Se usi un carattere web, ti consigliamo di ottimizzare i caratteri web al meglio pratiche. Tuttavia, se non usi i caratteri web, ma piuttosto il sistema che vengono visualizzati senza dover sostenere alcuna durata del caricamento delle risorse: minimizzando la compressione riduce questa durata, il che significa che il rendering i potenziali nodi di testo LCP possono avvenire prima.

Conclusione

Il modo in cui ottimizzi la codifica e il trasferimento degli asset basati su testo è una base di riferimento concetto di rendimento, ma è che ha un grande impatto. Assicurati di avere fare tutto il possibile per garantire che le risorse idonee alla minimizzazione della compressione stanno traendo vantaggio da queste ottimizzazioni.

Ma soprattutto, assicurati che questi processi siano automatizzati. Per utilizza un bundler per applicare la minimizzazione alle risorse idonee. Assicurati la configurazione del server web supporta la compressione, ma soprattutto utilizza la compressione più efficace disponibile. Per rendere tutto più banale possibile, usano CDN per automatizzare la compressione, poiché non solo possono comprimere ma possono anche farlo molto rapidamente.

Integrando questi concetti di base sul rendimento nel tuo sito web architetturale, puoi assicurarti che i tuoi sforzi per l'ottimizzazione delle prestazioni buone basi e che le ottimizzazioni successive possano poggiare su fondamenta solide. di buone prassi di base.