Googleのサービス「PageSpeed Insights」の解析結果で「修正が必要：圧縮を有効にする」という項目があります。
今回は、こちらの問題の対策について検証してみます。
概要
「修正が必要：圧縮を有効にする」についてですが、
モダンブラウザでは、gzipやdeflateによって圧縮されたHTML、CSSやJavaScriptなどの静的データを表示する機能が備わっています。
サーバにこれらリソースへのリクエストがあった場合に、圧縮してブラウザにダウンロードすれば、ネットワーク負荷が軽減できて、ページ表示速度が改善するということです。
つまりメッセージ「修正が必要：圧縮を有効にする」は、静的コンテンツを何かしらのしくみで圧縮してクライアントブラウザに転送しましょうという意味です。
加えてGoogleでは、具体的に以下の方法でその対策が可能であることを提案しています。
- Apacheの「mod_deflate」を使用する
- Nginxの「HttpGzipModule」を使用する
- IISのHTTP圧縮を設定する
導入方法
今回はApacheのmod_deflateを利用します。
サーバでmod_deflateが有効であることが前提条件となります。レンタルサーバなどでは、事前に利用可能かどうか調べましょう。
具体的な導入例ですが、テキスト「.htaccess」に以下を記述してサーバのルートディレクトリに設定します。
既に「.htaccess」が存在する場合は、テキストエディタで開いて、追記します。
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/atom_xml AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php </IfModule>
設置後、再度「PageSpeed Insights」で解析してみて「修正が必要：圧縮を有効にする」の項目が改善していれば成功です。
正確には、APIなど外部リソースを利用している場合、100%完全な改善は難しいので、サーバに設置してある主なCSSやJavaScriptなどが改善しているかを着目します。
対策した結果
実際に私の運営している4つのサイトで、この対策を実行してみて、対策前後で「PageSpeed Insights」解析結果のスコアを比較してみました。
| モバイル | パソコン | |||
|---|---|---|---|---|
| 対策前 | 対策後 | 対策前 | 対策後 | |
| サイト1 | 45 / 100 | 56 / 100 | 58 / 100 | 73 / 100 |
| サイト2 | 44 / 100 | 54 / 100 | 56 / 100 | 68 / 100 |
| サイト3 | 45 / 100 | 54 / 100 | 58 / 100 | 72 / 100 |
| サイト4 | 54 / 100 | 67 / 100 | 61 / 100 | 77 / 100 |
結果は全てのサイトでスコアアップを図ることができました。
表示速度については、サーバのみではなく、ネットワークやローカルPCの状態にもよるので、この件での改善を体感することはないと思いますが、Googleのツールでスコアがアップすることは何かしら改善につながっていると評価できると思います。
コメントする