少し前にGoogleのPageSpeed Insightsを活用してサイトの表示スピードの改善を行う仕事を行ったときの話です。改善対象となったサイトは画像が沢山使用されているBtoCのマッチングサイトでした。
PageSpeed Insightsについて改善対象のURLを入力して分析ボタンをクリックすると以下のような画面が表示されます。改善対象のURLのページをPCとSPで見たときの2パターンで分析してくれます。
最適化についての提案の各項目で「修正方法を表示」というリンクをクリックすると具体的にどういった修正が必要なのかが表示されます。今回の場合、以下が改善対応の前後で特に効果が大きかったです。
- ブラウザのキャッシュを活用する
- 画像を最適化する
その他対策が容易だったものは以下。
- 圧縮を有効にする
- CSSを縮小する
- JavaScriptを縮小する
- HTMLを縮小する
「圧縮を有効にする」はサーバーから返すhttpのレスポンスをgzip圧縮することで通信の際のデータ容量を減らすというものです。最近のブラウザであればgzip圧縮されたレスポンスを自動的に解釈してクライアント側の画面表示を行ってくれるとのこと。
Googleのドキュメントとしては以下に記載があります。
→圧縮を有効にする | PageSpeed Insights
「CSSを縮小する」「JavaScriptを縮小する」「HTMLを縮小する」はソース中の余計なスペースやコメントを取り除くことで通信の際のデータ容量を減らすというものです。HTMLやCSSのテキストから余計なソースを取り除いたところで得られる効果は少ない気がしますが対策が容易なため一緒に設定しています。
具体的な改善対応を行うに当たってGoogleが提供しているhttpd用のmod_pagespeedというプラグインをインストールします。色々調べたところリポジトリを追加してのインストール手順が一番簡単でした。後述する設定ファイルを読んだ感じではhttpd2.2と2.4のバージョンに関係なく両方で動作可能なようです。
以下のキャプチャは当ブログを導入してるさくらのVPSサーバーで行ったときのものです。
# vi /etc/yum.repos.d/mod-pagespeed.repo [mod-pagespeed] name=mod-pagespeed baseurl=http://dl.google.com/linux/mod-pagespeed/rpm/stable/x86_64 enabled=1 gpgcheck=0 # yum --enablerepo=mod-pagespeed install mod-pagespeed
インストールが完了すると/etc/httpd/conf.d配下にpagespeed.confとpagespeed_libraries.confという設定ファイルが生成されています。
httpd側の設定を特にいじってなければconf.dディレクトリの.confファイルが全て読み込まれる設定となっているためhttpdを再起動するだけでmod_pagespeedプラグインが有効となります。
サイトごとに必要な改善対応が異なるためpagespeed.confには多くの設定項目があります。
以下のようにバックアップを取ってから設定ファイルの編集を行います。
# cp /etc/httpd/conf.d/pagespeed.conf /etc/httpd/conf.d/pagespeed.conf.org # vi /etc/httpd/conf.d/pagespeed.conf
設定ファイルの末尾に以下を追記
# settings ModPagespeedEnableFilters combine_css ModPagespeedEnableFilters rewrite_css ModPagespeedEnableFilters inline_css ModPagespeedEnableFilters inline_javascript ModPagespeedEnableFilters lazyload_images ModPagespeedEnableFilters rewrite_images ModPagespeedEnableFilters remove_comments ModPagespeedEnableFilters collapse_whitespace ModPagespeedImageRecompressionQuality 90 ModPagespeedEnableFilters insert_image_dimensions ModPagespeedDisableFilters rewrite_javascript
mod_pagespeedのフィルタはModPagespeedEnableFilters [項目名]で有効、ModPagespeedDisableFilters [項目名]で無効にすることができます。
フィルタの各項目について日本語で解説しているウェブサイトがあったのですがこの記事書いてるときに見つけられなかったので省略(^q^
# /etc/init.d/httpd restart
httpdを再起動。
以上のような手順でmod_pagespeedをインストールするだけでサイトの表示スピードの改善について一括で設定することが可能です。が、ここまで書いておいて何ですが導入について必ずしも必須ということはないように思いました。
というのもHTMLのgzip圧縮はmod_deflate、ブラウザキャッシュの活用はmod_expiresというhttpdに標準で搭載されているモジュールだけで設定可能です。そのため効果が大きいブラウザキャッシュの活用やHTMLレスポンスの圧縮だけ行うのであればmod_pagespeedはインストールしなくても良さそうです。
また、これは私がドキュメントしっかり読んでないことが原因だとは思いますが当ブログを動かしてるサーバーで設定を試みたところ設定値の反映がmod_pagespeed単体だとうまくいっていないことがあり、実際にはmod_pagespeedだけではなくmod_deflate、mod_expiresの2つでもそれぞれ設定を行いました。
mod_deflate、mod_expiresの設定は以下のような感じです。conf.dディレクトリに適当な設定ファイルを作って設定しています。
# vi /etc/httpd/conf.d/deflate_and_expire_setting.conf
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "access plus 3 weeks"
ExpiresByType image/jpeg "access plus 3 weeks"
ExpiresByType image/gif "access plus 3 weeks"
ExpiresByType text/css "access plus 3 weeks"
ExpiresByType text/javascript "access plus 3 weeks"
ExpiresByType application/x-javascript "access plus 3 weeks"
ExpiresByType application/x-shockwave-flash "access plus 3 weeks"
ExpiresDefault "access plus 1 days"
</IfModule>
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
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>mod_deflate側の設定は以下の記事の設定をベースに使わせて頂いています。
→Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する方法
<IfModule mod_expires.c>で囲まれているところで画像ファイル、CSS、JavaScriptを3週間キャッシュする設定を行っています。
<IfModule mod_deflate.c>で囲まれているところでレスポンスデータのうちhtml、css、xmlなどのデータをgzip圧縮して返す設定を行っています。画像は大半が圧縮されているため圧縮対象から除外する設定を行っています。gzip圧縮されているかの確認はブラウザの開発者ツールで応答ヘッダー内のContent-Encodingの値で確認することが出来ます。
なお、ChromeのアドオンでPageSpeed Insightsと同じ分析を行うことも可能でした。こちらはBASIC認証が掛かっているサイトでも使用できるためステージング環境で検証する際に便利でした。
Chromeのアドオンを検索する画面で「PageSpeed」と入力すると候補に表示されると思います。
ブラウザの開発者ツールを開くと一番右のタブに「PageSpeed」というタブが追加されます。
分析を行いたいページを開いた状態でANALYZEというボタンをクリックすることでPageSpeed Insightsと同じような分析が行えます。
改善することで得られる効果が高いものほど上のほうに表示されます。
こちらのアドオンでは「画像を最適化する」の改善案について圧縮された画像をダウンロードすることが可能でした。今回私が行った改善対応の中では画像の最適化についてはImageMagickという画像ファイルを変換するソフトを使って一括変換する対応を行ったため、分析画面から最適化された画像をダウンロードする必要はありませんでしたがサーバーに変換するソフトウェアのインストールを行う権限が不足している場合などは使えると思います。