スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

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のツールでスコアがアップすることは何かしら改善につながっていると評価できると思います。

このエントリーをはてなブックマークに追加

Monthly Archives

Search