HTTP Compression Explained: Sending Website Text in Fewer Bytes
Can a website send the same content in fewer bytes? HTTP compression can shrink suitable responses during transfer.
1:47 · No narration: the video shows each step as text on screen, and every step is written out below, with buttons that jump the video to it.
Prefer YouTube? Watch this video on our YouTube channel (opens in a new tab).
The six points in the video
This is a silent video. The headings, explanations and labels below reproduce the information on screen.
-
Step 1: Start with suitable content
HTML, CSS and JavaScript are common candidates for compression.
On-screen labels: HTML response; CSS stylesheet; JavaScript file.
-
Step 2: The browser advertises support
A request can tell the server which encodings it understands.
On-screen labels: Browser capability; Supported encodings; Request headers.
-
Step 3: The server sends compressed data
The browser decodes the response before using the content.
On-screen labels: Smaller transfer; Content encoding; Decoded content.
-
Step 4: Know the common names
Gzip and Brotli are compression methods used on the web.
On-screen labels: Gzip; Brotli; Suitable server setup.
-
Step 5: Already compressed files differ
Compressing a photo or video again may offer little benefit.
On-screen labels: Image encoding; Video encoding; Measure the saving.
-
Step 6: Verify actual delivery
Ask your developer to inspect transferred size and response headers.
On-screen labels: Correct encoding; Transferred bytes; Working page.
A practical check for your business
Check what the server actually sends for a representative text asset. Compare the transferred size and the site's behaviour, and keep the delivery configuration in the maintenance inventory.
Sources and further detail
Common questions
Can a website send the same content in fewer bytes?
HTTP compression can shrink suitable responses during transfer. Check that compression helps the actual response.
Go further
More video tips
All 205 videos →
What Is Minification? Smaller Website Code Explained
Minification, made clear.
Image Aspect Ratios and Cropping: Keep the Important Subject Visible
Match the image to the space.