PageSpeed Insights「圧縮を有効にする」が表示されたら？表示速度を劇的に改善する実践的な方法

Webサイトの表示速度改善に取り組んでいる皆さん、PageSpeed Insightsで「圧縮を有効にする」や「テキスト圧縮の有効化」という指摘を受けたことはありませんか？

この記事では、この重要な最適化手法について、初心者の方でも分かりやすく、そして実践的に解説していきます。

PageSpeed Insightsの「圧縮を有効にする」とは何か

PageSpeed Insightsで表示される「圧縮を有効にする」という指摘は、Webサーバーがブラウザにデータを送信する際に、テキストファイル（HTML、CSS、JavaScriptなど）を圧縮して送信するよう推奨している警告です。

現代のブラウザは、gzipやBrotliなどの圧縮形式で送信されたデータを自動的に解凍して表示する機能を標準搭載しています。つまり、サーバー側で圧縮して送信しても、ユーザーが実際に見るWebページの見た目や機能には一切影響しません。

しかし、この圧縮を有効にすることで、データ転送量を大幅に削減し、ページの読み込み速度を向上させることができるのです。

なぜテキスト圧縮が重要なのか？

Webの進化と圧縮の必要性

昔のWebサイトは主にHTMLとCSSだけで構成されており、データ量も少なく、圧縮の必要性はあまりありませんでした。しかし現在では、JavaScriptライブラリやフレームワーク、大量のCSSファイルなど、テキストデータの量が格段に増加しています。

一方で、サーバーからユーザーのデバイスまでのネットワーク経路には、帯域幅の制限があります。特にモバイル回線では、この制限がより顕著になります。

現代のサーバー性能と最適化の重要性

現代のサーバーは、CPU性能の向上とマルチコア化により、データ圧縮の処理を高速に行えるようになりました。また、多くの同時接続を処理するC10K問題も解決され、大量のリクエストを効率的に処理できます。

この結果、ネットワークの帯域幅がボトルネックとなるケースが増えており、データ圧縮による転送量削減の重要性が高まっています。

landinghubでも重要視する表示速度改善

私たちlandinghub（https://www.landinghub.net/）でも、ランディングページの表示速度改善は非常に重要視しています。コンバージョン率に直結する要素だからです。特に、ファーストビューの表示速度は、ユーザーの離脱率に大きく影響します。

圧縮による効果の実例

実際の数値で見る圧縮効果

PageSpeed Insightsの実際の表示例を見てみましょう。例えば、swiper.jsという人気のJavaScriptライブラリの場合：

圧縮前：234.5KiB
圧縮後：43.1KiB
削減量：191.4KiB（約82%の削減）

この例からも分かるように、テキストファイルの圧縮は非常に高い効果を発揮します。特にJavaScriptやCSSファイルでは、80%以上の圧縮率を実現することも珍しくありません。

表示速度への実際の影響

実際のWebサイトでの改善例をご紹介します：

設定前：PageSpeed Insightsスコア 37点
設定後：PageSpeed Insightsスコア 66点
改善：29点の向上

この結果からも、圧縮設定は表示速度改善の最も効果的な手法の一つであることが分かります。

圧縮技術の種類と選び方

主要な圧縮形式

現在利用可能な主要な圧縮形式は以下の通りです：

Brotli（br） – 最優先で検討すべき圧縮形式
gzip – 広く対応されている標準的な圧縮形式
deflate – 古い形式、現在はあまり使用されない

Brotli vs gzip：どちらを選ぶべきか

Brotliは、Googleが開発した次世代の圧縮技術で、以下の特徴があります：

gzipよりも15-25%高い圧縮率
特にテキストデータの圧縮に最適化
現代のブラウザで幅広くサポート

gzipは、長年利用されている実績のある圧縮形式で：

圧縮・解凍速度がBrotliより高速
すべてのブラウザでサポート
サーバー側の設定が簡単

推奨される選択基準

最優先：Brotli – サーバーが対応していれば最初に検討
次点：gzip – Brotliが利用できない場合の標準選択
最後：deflate – 古いサーバーでの代替手段

サーバー別設定方法

Apache サーバーでの設定

Apache サーバーでは、mod_deflateモジュールを使用してgzip圧縮を有効化します：

Copy<IfModule mod_deflate.c>
    # 圧縮レベルの設定（1-9、推奨は6）
    DeflateCompressionLevel 6
    
    # 圧縮対象のMIMEタイプを指定
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    
    # 古いブラウザでの無効化
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

Nginx サーバーでの設定

Nginx では、gzipモジュールを使用します：

Copy# gzip圧縮を有効化
gzip on;

# 圧縮レベル（1-9、推奨は6）
gzip_comp_level 6;

# 最小ファイルサイズ（これより小さいファイルは圧縮しない）
gzip_min_length 1000;

# 圧縮対象のMIMEタイプ
gzip_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/xml
    application/rss+xml
    application/javascript
    application/x-javascript
    application/json;

# プロキシ経由でも圧縮を有効化
gzip_proxied any;

# Varyヘッダーを追加
gzip_vary on;

レンタルサーバーでの対応状況

主要なレンタルサーバーでの対応状況：

エックスサーバー: Brotli圧縮が自動で有効（2022年3月現在）
ロリポップ: .htaccessでの設定が必要
さくらのレンタルサーバー: mod_deflateが利用可能
お名前.com: .htaccessでの設定が必要

多くのレンタルサーバーでは、デフォルトで圧縮が有効になっていない場合があるため、まずは現在の状況を確認することが重要です。

.htaccessによる設定方法

基本的な.htaccess設定

多くのレンタルサーバーで利用できる.htaccessでの設定方法をご紹介します：

Copy# =======================================
# テキスト圧縮の有効化
# =======================================

<IfModule mod_deflate.c>
    # 基本的な圧縮設定
    SetOutputFilter DEFLATE
    
    # 圧縮レベルの設定（1-9、6が推奨）
    DeflateCompressionLevel 6
    
    # 圧縮対象ファイルの詳細指定
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/json
    AddOutputFilterByType DEFLATE image/svg+xml
    
    # 圧縮しないファイルの指定
    # 既に圧縮済みの画像ファイルなど
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|zip|gz|bz2|rar|7z)$ no-gzip dont-vary
    
    # 古いブラウザでの問題回避
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    
    # Varyヘッダーの追加
    Header append Vary Accept-Encoding
</IfModule>

事前圧縮ファイルを利用した高度な設定

サーバーのCPU負荷を軽減するため、事前に圧縮したファイルを利用する方法もあります：

Copy<IfModule mod_rewrite.c>
<IfModule mod_headers.c>
    RewriteEngine on
    
    # Brotli圧縮ファイルの配信
    RewriteCond %{HTTP:Accept-Encoding} br
    RewriteCond %{REQUEST_URI} \.(html|css|js)$
    RewriteCond %{REQUEST_FILENAME}\.br -s
    RewriteRule .* %{REQUEST_URI}.br [L]
    
    # gzip圧縮ファイルの配信
    RewriteCond %{HTTP:Accept-Encoding} gzip
    RewriteCond %{REQUEST_URI} \.(html|css|js)$
    RewriteCond %{REQUEST_FILENAME}\.gz -s
    RewriteRule .* %{REQUEST_URI}.gz [L]
    
    # 圧縮ファイルのContent-Encodingヘッダー設定
    <Files "*.br">
        Header set Content-Encoding br
        Header set Content-Type text/html
    </Files>
    
    <Files "*.gz">
        Header set Content-Encoding gzip
        Header set Content-Type text/html
    </Files>
    
    # Varyヘッダーの設定
    <FilesMatch "\.(html|css|js)$">
        Header append Vary Accept-Encoding
    </FilesMatch>
</IfModule>
</IfModule>

.htaccess編集時の注意点

必ずバックアップを取る: 設定ミスでサイトが表示されなくなる可能性があります
段階的にテスト: 一度に全ての設定を追加せず、少しずつテストしながら進めましょう
構文エラーのチェック: 余分なスペースや改行文字に注意してください
サーバーの対応確認: 利用しているサーバーがmod_deflateに対応しているか確認しましょう

WordPressでの対応方法

WordPressでの.htaccess設定

WordPressサイトでも、上記の.htaccess設定をそのまま利用できます。WordPressのルートディレクトリにある.htaccessファイルに、WordPress用の記述の上部に追加してください：

Copy# =======================================
# テキスト圧縮の有効化（WordPress用）
# =======================================

<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE
    AddOutputFilterByType DEFLATE text/html text/plain text/css text/javascript application/javascript application/json
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|zip|gz)$ no-gzip dont-vary
    Header append Vary Accept-Encoding
</IfModule>

# BEGIN WordPress
# WordPress用の記述がここに続きます...

landinghubでのWordPress最適化アプローチ

私たちlandinghubでは、WordPressベースのランディングページでも、プラグインに頼らず、サーバーレベルでの最適化を重視しています。これにより、プラグインの競合や動作の不安定さを避けながら、確実な高速化を実現しています。

設定後の確認方法

Chrome DevToolsを使用した確認

設定が正しく動作しているかを確認する最も確実な方法は、Chrome DevToolsを使用することです：

DevToolsを開く: F12キーを押すか、右クリック→「検証」を選択
Networkタブを選択: 通信の詳細を確認できます
ページをリロード: キャッシュを無効にして再読み込み
ファイルを選択: 確認したいCSS/JSファイルをクリック
Response Headersを確認: Content-Encoding: gzipまたはContent-Encoding: brが表示されているか確認

PageSpeed Insightsでの確認

設定後は、PageSpeed Insightsで改善されているかを確認しましょう：

PageSpeed Insightsにアクセス
サイトのURLを入力して分析
「圧縮を有効にする」の項目が消えているかを確認
全体的なスコアの改善を確認

コマンドラインでの確認

より詳細な確認には、curlコマンドも利用できます：

Copy# gzip圧縮の確認
curl -H "Accept-Encoding: gzip" -v https://yoursite.com/

# Brotli圧縮の確認
curl -H "Accept-Encoding: br" -v https://yoursite.com/

よくある問題とトラブルシューティング

設定が効かない場合の対処法

1. mod_deflateが有効でない

レンタルサーバーの管理画面でmod_deflateが有効か確認
サーバー会社に問い合わせて確認

2. .htaccessの構文エラー

余分なスペースや改行を除去
記述の順序を確認
一時的に設定をコメントアウトしてテスト

3. MIMEタイプの設定問題

サーバーのMIMEタイプ設定を確認
必要に応じてAddTypeディレクティブを追加

パフォーマンスへの影響

CPU負荷の増加 圧縮処理はCPUリソースを消費します。アクセス数が多いサイトでは：

圧縮レベルを下げる（6→4など）
事前圧縮ファイルの利用を検討
CDNサービスの活用を検討

メモリ使用量の増加 圧縮処理中はメモリも消費します：

小さなファイルは圧縮対象から除外
圧縮の最小ファイルサイズを設定

セキュリティ上の注意点

BREACH攻撃への対策 HTTP圧縮とHTTPSを同時に使用する際の脆弱性：

機密情報（CSRFトークンなど）と動的コンテンツを分離
適切なCSRF対策の実装
定期的なセキュリティ更新

まとめ

PageSpeed Insightsの「圧縮を有効にする」は、Webサイトの表示速度改善において最も効果的な手法の一つです。適切に設定することで、80%以上のデータ量削減と大幅なスコア改善を実現できます。

実装の優先順位

まずは現状確認 – 既に圧縮が有効になっていないか確認
サーバー設定の確認 – 利用可能な圧縮方式を確認
段階的な実装 – 基本設定から始めて徐々に最適化
継続的な監視 – 定期的な効果測定と調整

landinghubからのアドバイス

私たちlandinghub（https://www.landinghub.net/）では、ランディングページの成功には表示速度が欠かせないと考えています。特に、モバイルユーザーの体験向上は、コンバージョン率に直結する重要な要素です。

テキスト圧縮の設定は、技術的な知識が少ない方でも比較的簡単に実装できる改善手法です。ぜひ、この記事を参考に、皆さんのWebサイトの表示速度改善に取り組んでみてください。

次のステップ

圧縮設定が完了したら、以下の最適化にも取り組むことをお勧めします：

画像の最適化と次世代フォーマットの採用
ブラウザキャッシュの設定
不要なJavaScriptの削除
CDNの活用

継続的な改善により、ユーザー体験の向上とSEO効果の最大化を実現していきましょう。