圧縮と転送エンコーディング
gzipやBrotliによる圧縮、適切なコンテンツタイプ、事前圧縮を使ってネットワーク上を転送するデータ量を減らし、あらゆる接続でレスポンスを高速化します。
「圧縮と転送エンコーディング」はCoddyKit上の無料Web Performance Optimization & Lighthouseレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Performance Optimization & Lighthouse学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Performance Optimization & Lighthouseコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
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.
AI チューターと学ぶ Web Performance Optimization & Lighthouse — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 12
- レッスン
- 48
よくある質問
「圧縮と転送エンコーディング」レッスンは無料ですか？
はい。「圧縮と転送エンコーディング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Performance Optimization & Lighthouseコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Performance Optimization & Lighthouseコースには全4レッスンが含まれています。
「圧縮と転送エンコーディング」で何を学びますか？
gzipやBrotliによる圧縮、適切なコンテンツタイプ、事前圧縮を使ってネットワーク上を転送するデータ量を減らし、あらゆる接続でレスポンスを高速化します。 ブラウザで直接実行するハンズオンコードでWeb Performance Optimization & Lighthouseを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Performance Optimization & Lighthouseを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Performance Optimization & Lighthouseは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「圧縮と転送エンコーディング」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Performance Optimization & Lighthouseレッスンでコードを書いて実行できますか？
はい。すべてのWeb Performance Optimization & Lighthouseレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- HTTP/2とHTTP/3の基礎
- ブラウザーとサーバーのキャッシュ
- コンテンツ配信ネットワーク（CDN）
- 圧縮と転送エンコーディング