Compressione e codifica del trasferimento
Riduca i dati trasferiti usando la compressione gzip e Brotli, i tipi di contenuto corretti e la precompressione, così le risposte arrivino più rapidamente su ogni connessione.
Compressione e codifica del trasferimento è una lezione Web Performance Optimization & Lighthouse gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Performance Optimization & Lighthouse, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Performance Optimization & Lighthouse include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
Why Compress?
Text assets like HTML, CSS, JS, JSON, and SVG are highly compressible. Compressing them before transfer can cut payloads by 70-90%, directly speeding up load on every network.
How Negotiation Works
The browser advertises supported algorithms with the Accept-Encoding header; the server responds with the chosen one in Content-Encoding.
Accept-Encoding: br, gzip
Content-Encoding: brgzip
gzip is universally supported and a safe baseline. It offers good compression with low CPU cost and is enabled on virtually every server and CDN.
Brotli
Brotli (br) typically compresses text 15-25% smaller than gzip. It is supported in all modern browsers over HTTPS, making it the preferred choice today.
Compress the Right Types
Compress text-based MIME types only. Already-compressed binaries like JPEG, PNG, WebP, MP4, and woff2 fonts gain nothing and waste CPU if recompressed.
Static Precompression
For static assets, precompress at build time at the highest level. The server then serves the .br or .gz file directly, avoiding per-request CPU.
# nginx serving precompressed files
brotli_static on;
gzip_static on;Dynamic Compression Levels
For dynamic responses, use a lower compression level so CPU cost does not delay the response. High levels are best reserved for static, build-time compression.
Express Example
In Node, the compression middleware adds gzip/Brotli to dynamic responses with sensible defaults.
const compression = require('compression');
app.use(compression());Verifying Compression
Inspect a response in the Network panel: check Content-Encoding: br or gzip and compare transferred size to resource size. Lighthouse flags uncompressed text assets.
Compression and HTTPS
Modern compression for sensitive content is served over HTTPS, which also avoids historic attacks. Brotli in browsers is only offered on secure connections.
Strategy Summary
- Prefer Brotli, fall back to gzip.
- Compress text types only.
- Precompress static assets at max level.
- Use lower levels for dynamic responses.
Quick Check
You enable maximum-level compression on dynamically generated API responses and notice slower responses under load. What is the better approach?
Recap
You learned to shrink transfers with gzip and Brotli, negotiated via Accept-Encoding. Compress text types only, precompress static assets at max level, use lower levels for dynamic responses, and verify with the Network panel.
Impara Web Performance Optimization & Lighthouse con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 12
- Lezioni
- 48
Domande Frequenti
La lezione «Compressione e codifica del trasferimento» è gratuita?
Sì — il testo completo di «Compressione e codifica del trasferimento» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Performance Optimization & Lighthouse, passa a CoddyKit PRO. Il corso Web Performance Optimization & Lighthouse include 4 lezioni in totale.
Cosa imparerò in «Compressione e codifica del trasferimento»?
Riduca i dati trasferiti usando la compressione gzip e Brotli, i tipi di contenuto corretti e la precompressione, così le risposte arrivino più rapidamente su ogni connessione. Eserciti Web Performance Optimization & Lighthouse con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Performance Optimization & Lighthouse?
Non è richiesta alcuna esperienza precedente. Web Performance Optimization & Lighthouse su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Compressione e codifica del trasferimento»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Performance Optimization & Lighthouse?
Sì. Ogni lezione Web Performance Optimization & Lighthouse include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Fondamenti di HTTP/2 e HTTP/3
- Caching del browser e del server
- Content Delivery Network (CDN)
- Compressione e codifica del trasferimento