実環境での圧縮節約の測定
ブラウザDevTools、curl、モニタリングツールを使用して実際の圧縮節約を測定する方法を学びます。gzip設定が正しく動作していることを確認します。
Infrastructure
詳細な説明
本番環境での圧縮測定
圧縮の設定は仕事の半分です。動作を確認し、実際の節約を測定する必要があります。
ブラウザDevTools
Chrome DevToolsのネットワークタブで両方のサイズを確認できます。Size列が転送（圧縮）サイズを表示します。
curlで検証
curl -H "Accept-Encoding: gzip" -sI https://example.com | grep -i content-encoding
Web Performance API
const entries = performance.getEntriesByType('resource');
entries.forEach(entry => {
const savings = entry.decodedBodySize - entry.transferSize;
const ratio = (savings / entry.decodedBodySize * 100).toFixed(1);
console.log(`${entry.name}: ${ratio}% compression savings`);
});
確認すべき一般的な問題
- 圧縮の欠落：すべてのテキストMIMEタイプが圧縮されているか確認
- 不整合な圧縮：一部のレスポンスが圧縮され、他がされていない
- 既に圧縮されたコンテンツの圧縮：画像/動画でCPUを浪費
ユースケース
本番環境での圧縮設定の検証と圧縮問題のデバッグ。CDN、ロードバランサー、アプリケーションサーバーがすべて正しく圧縮していることを確認するためのパフォーマンスモニタリングに必須です。