October DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsClean PCRecommendedOne scan can reveal what keeps slowing WindowsLook for cleanup and repair opportunities.Run ScanOctober DealsAmazon USDeal season is back - check today's better picksAmazon US: current deals, useful picks and tech finds.See Picks×
Skip to content
World desk4 min

How to Make Web Pages Smaller: Minification, Brotli, Gzip, and HTTP

Minification shrinks source files; HTTP compression encodes responses for delivery. Learn how to choose, cache, and verify the right approach for your site.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

To make a website smaller, combine minification for text source files with HTTP compression for delivery, then verify the bytes your server actually sends. These techniques do different jobs: minification removes unnecessary characters from code, while compression encodes a response for transfer. Images and other already-compressed media need a different strategy.

Minification and HTTP compression solve different problems

Minification changes the source

Minification removes unnecessary characters from text assets such as CSS and JavaScript, producing an optimized file. It can shrink the original asset and give a later compressor less data to encode. For example, web.dev’s 2023 table lists jQuery 3.7.1 at 85 KiB uncompressed and 30 KiB after gzip or 27 KiB after Brotli, with the library minified. Those figures describe that specific version and example, not a typical result for every project. See web.dev’s text-asset guidance.

As an Amazon Associate I earn from qualifying purchases.

HTTP compression changes the representation sent

HTTP content encoding lets a server send a compressed representation that the client can decode. The underlying resource remains the same; the transfer representation is encoded. Minification and compression can therefore be used together rather than treated as alternatives. MDN explains compression in HTTP.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

How HTTP encoding negotiation works

  1. The client advertises acceptable encodings in the request’s Accept-Encoding header.

  2. The server selects an encoding it supports and identifies the response representation with Content-Encoding.

  3. The client decodes that representation. When content encoding is applied, metadata such as Content-Length describes the encoded representation, not the original uncompressed resource.

Content-Encoding describes how the representation is encoded. Transfer-Encoding is about hop-by-hop message delivery; it is not a substitute for content encoding. See MDN’s references for Accept-Encoding and Content-Encoding.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #2
Teacher Record Book
  • Keep track of everything from attendance to test scores
  • Spiral bound
  • Measures 8-1/2" x 11"

Keep negotiated variants distinct in caches

If a cacheable response can be served in different encodings, send Vary: Accept-Encoding. This tells shared and browser caches that the request header affects the representation, so an encoded response is not mistakenly reused for a client that requested a different variant. Serving a pre-compressed file manually requires the same care: confirm the client supports its encoding, set the correct Content-Encoding, and preserve the cache variation.

Choose a compression format for your clients and infrastructure

Gzip and Brotli are widely used for text resources. MDN also lists deflate, zstd, and the dictionary-compressed forms dcb and dcz. The existence of an encoding does not mean every browser, origin, CDN, or intermediary cache supports the complete delivery path. Verify compatibility and retain a suitable fallback for your audience. web.dev discusses gzip and Brotli in its performance guidance.

web.dev’s 2023 guidance says Brotli can improve compression by about 15%–20% over gzip. Treat that as a general comparison, not a guaranteed saving for a particular site or asset: results depend on content and settings. For instance, the same source reports Angular 1.8.3 at 1,346 KiB uncompressed, 329 KiB with gzip, and 256 KiB with Brotli under its stated example conditions. Those figures are specific to that library version and source table.

Rank #3

Dictionary compression is an advanced option

Compression Dictionary Transport can use a resource supplied as a dictionary to compress later responses. Requests may identify available dictionaries, and dictionary-compressed responses need correct cache variation for the relevant encoding and dictionary metadata. It is an optional optimization, not a prerequisite for a sound gzip or Brotli setup. MDN describes Compression Dictionary Transport.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Decide what is worth compressing

  • Prioritize text: HTML, CSS, JavaScript, and SVG often contain repeated patterns that make them good candidates.

  • Usually skip already-compressed formats: JPEG and ZIP often gain little from another compression pass, and the result can even grow.

  • Check small files individually: a tiny resource may not contain enough redundancy for compression to offset its overhead.

Do not infer savings from the file extension alone. Compare delivered transfer size for the actual response types your site serves.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Choose static or dynamic compression based on the workload

Approach How it works Trade-off
Static compression Build or deployment creates encoded versions of stable assets. Avoids compression work on each request and allows more intensive settings, but requires storing, deploying, and correctly serving the variants.
Dynamic compression The server encodes generated content as requests arrive. Works for generated or personalized responses, but consumes request-time resources and can add latency.

A practical starting point is to consider pre-compressed files for stable static assets and a measured, conservative dynamic setting for generated content. Confirm how the host or CDN handles encoding, caching, and fallbacks before relying on that configuration. web.dev covers compression trade-offs and its resource-loading guidance discusses CSS minification.

Verify what the server delivers

  1. Open the page or asset in browser developer tools and inspect the request’s Accept-Encoding header.

  2. Inspect the response headers for Content-Encoding and, when encodings are negotiated, Vary: Accept-Encoding.

  3. Compare the transferred size with the uncompressed resource size. Check multiple asset types rather than assuming one result applies to all files.

    Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
  4. Repeat with clients or requests that accept different encodings, then confirm caches return a compatible representation.

  5. Check server timing and CPU alongside bytes transferred. A smaller response is not automatically a better deployment if encoding adds unacceptable latency or compute cost.

Choose settings by measuring delivered bytes, encoding and decoding cost, latency, cache correctness, client and infrastructure support, and operational complexity. There is no universally best algorithm or compression level independent of the workload.

Quick Recap

SaleBestseller No. 1
Bestseller No. 2
Teacher Record Book
Teacher Record Book
Keep track of everything from attendance to test scores; Spiral bound; Measures 8-1/2" x 11"
$4.89
Bestseller No. 3
Speed Up Your Site: Web Site Optimization
Speed Up Your Site: Web Site Optimization
Used Book in Good Condition
$42.02

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Redmond desk20 min
    How to create a link to File or Folder in Windows 11Windows 11 gives you several ways to point to a file or folder without moving or duplicating it. You can create a desktop shortcut,…
Recommended PC Tool
Recommended PC Tool
Outdated Drivers Are Slowing You DownFree scan - exact matches
Windows Errors? Fix Them Before They SpreadFree repair scan

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.