Web Performance Optimization & Lighthouse · Lección

Compresión y codificación de transferencia

Reduzca lo que se transmite por la red mediante la compresión gzip y Brotli, los tipos de contenido adecuados y la precompresión, para que las respuestas lleguen más rápido en cualquier conexión.

Lección 4 de 413 pasos

Compresión y codificación de transferencia es una lección gratuita de Web Performance Optimization & Lighthouse en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Performance Optimization & Lighthouse, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Performance Optimization & Lighthouse incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

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: br

gzip

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.

Gratis para empezar

Aprende Web Performance Optimization & Lighthouse con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos
12
Lecciones
48

Preguntas frecuentes

¿La lección «Compresión y codificación de transferencia» es gratis?

Sí — el texto completo de «Compresión y codificación de transferencia» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Performance Optimization & Lighthouse, actualiza a CoddyKit PRO. El curso de Web Performance Optimization & Lighthouse incluye 4 lecciones en total.

¿Qué aprenderé en «Compresión y codificación de transferencia»?

Reduzca lo que se transmite por la red mediante la compresión gzip y Brotli, los tipos de contenido adecuados y la precompresión, para que las respuestas lleguen más rápido en cualquier conexión. Practicas Web Performance Optimization & Lighthouse con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Web Performance Optimization & Lighthouse?

No se requiere experiencia previa. Web Performance Optimization & Lighthouse en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Compresión y codificación de transferencia»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Web Performance Optimization & Lighthouse?

Sí. Cada lección de Web Performance Optimization & Lighthouse incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Fundamentos de HTTP/2 y HTTP/3
  2. Almacenamiento en caché del navegador y del servidor
  3. Redes de distribución de contenido (CDN)
  4. Compresión y codificación de transferencia
← Volver a Web Performance Optimization & Lighthouse