概要
サーバーが訪問者のブラウザにページを送る際、そのデータを先に圧縮する(小さいサイズに詰め込む)ことができます。メールでファイルを送る前にzip圧縮するのと基本的に同じ考え方です。ブラウザは届いた瞬間にそれを自動で展開します。gzipとbrotliは、Webでこの目的に使われる最も一般的な2つの圧縮方式です。brotliの方が新しく、一般的にやや圧縮効率が高いですが、どちらも同じ目的を達成します。
これはすべて完全に裏側で行われます。訪問者が何かの「圧縮版」を目にすることはなく、ただ本来より速く到着したページとして体感するだけです。
重要な理由
HTML、CSS、JavaScriptといったテキストベースのコンテンツは、そのコードが持つ反復性の高さのため、通常は元のサイズのごく一部、しばしば60~80%も小さく圧縮できます。より小さいファイルをネットワーク越しに送ることは、より短い時間で済みます。これはモバイル回線のような低速な接続で特に重要です。読み込みにかかる1秒1秒が、訪問者がページの表示が終わる前に諦めて離脱してしまう可能性を高めるからです。
多くのパフォーマンス改善とは異なり、圧縮の有効化は通常、デザインの作り直しではなく単一の設定変更です。サイト速度に関して、これは最も費用対効果の高い、最も手間のかからない改善策の一つです。
修正方法
- ブラウザの開発者ツール(Networkタブ)を開き、ページリクエストのレスポンスヘッダーに
Content-Encoding: gzipまたはContent-Encoding: brがあるか確認して、圧縮がすでに有効になっているか調べます。 - Netlify、Vercel、Cloudflare Pagesなどの静的ホスティングを使っている場合、圧縮は通常デフォルトですでに有効になっており、対応の必要はありません。
- cPanelなど従来型のWebホストを使っている場合は、パフォーマンスや最適化の設定に「gzip圧縮」の切り替えスイッチがないか探してください。
- 自前のサーバーを管理している場合は、ホスティング会社や開発者にサーバーまたはCDNレベルでgzipまたはbrotli圧縮を有効にするよう依頼してください。これは一般的なサーバーソフトウェアにおける標準的で十分に文書化された設定変更です。
- 設定後、レスポンスヘッダーを再確認し、圧縮が有効になっていることを確認しましょう。