ついに出た！Chrome版「Page Speed」の使い方

2011/3/22に、GoogleがようやくGoogle Chrome版「Page Speed」拡張機能を公開しました。
「Page Speed」は、項目をある程度理解できれば自分や自社のサイトの表示速度の改善にとても役立つツールです。

この記事では、「Page Speed」のインストール方法から各調査項目の見方や改善方法を中心に使い方を解説します。
ぜひ、ご自身のサイトの改善に役立てていただければと思います。

そもそも、なぜサイトの表示速度を速くする必要があるのか？

例えば、Amazonの調査によると「表示速度が0.1秒遅くなると、売上が1％減少する」といい、Googleの調査によると「表示速度が0.5秒遅くなると、検索数が20％減少する」と言われます。

また、GoogleはWebページの読み込み速度をアルゴリズムに取り入れたことを発表しています。

大手サイトや大規模なECサイトに限らず、ページの表示速度を改善することは全てのWebサイトにとって、近年ますます重要になってきています。

そして、「ページの表示速度を改善」というと、多くの方はデータベースを最適化したりといったバックエンドの事を考えるかもしれませんが、オライリーの「ハイパフォーマンスWebサイト」という本によると「実はHTMLの表示にかかっている時間はページのロード時間全体の10%から20%以下にすぎない」といいます。

つまり、Webページの表示速度を改善しようとした場合、画像・CSS・JavaScriptなどのフロントエンドの部分を改善することがより重要であり、マークアップエンジニア（コーダー）次第で大きく改善できるということです。

Googleの「Page Speed」とは

そこで、「自分のサイトは何がネックになって表示速度が遅くなっているのか」をチェックし、改善策を提案してくれるツールがあるととても便利です。
それがGoogleの「Page Speed」です。

今まではFirefox版（FirefoxにFirebugというアドオンを入れ、さらにPage Speedアドオンを入れる）しか無かったのですが、ようやくGoogle Chrome版の「Page Speed」が登場しました。

Chrome版「Page Speed」はより完成度が高くなった

Chrome版の「Page Speed」はFirefox版と同じ機能がありますが、それに加え

より効果が見込める最適化対策が上位に登場するように変更
日本語にきちんと対応

という2つの機能が実装されています。
今まで、Firefox版「Page Speed」や、米Yahoo!の「YSlow」というツールでは英語表記のみの対応でしたが、Chrome版「Page Speed」は日本語にきちんと対応してくれたことがとてもありがたいと個人的には思います。

また、重要な項目が上位に表示されるようになったため、とても見やすく分かりやすいツールになりました。

「Page Speed」のインストール方法

「Page Speed」のダウンロードページにアクセスし、ページの中ほどにある「click here to install Page Speed for Chrome」リンクをクリックします。
ウインドウの下に [破棄] [続行] というリンクが出てきますので、[続行] をクリックします。

「Page Speed」の使い方

Chromeで、調査したいページが完全に表示された状態で、Windowsだとキーボードの[Ctrl]+[Shift]+[I(アイ)]、Macだと[command]+[option]+[I(アイ)]を同時に押します。

デベロッパーツール（Web製作者・開発者向けのツール）がウインドウの下半分に表示されると思いますので、そこで右側の [Page Speed] をクリックします。

左端の [Run Page Speed] をクリックします。

これで、数秒待つと調査結果が表示されます。

「Page Speed」調査結果の見方

以下は、「Page Speed」結果画面の主要な項目の解説です。

「Page Speed Score」は全体的な最適化スコアを示しており、その下に各項目が重要な順に並んでいます。
項目の左側にあるアイコンは、赤が深刻で今すぐ対策を講じたほうが良いもの、黄色ができれば対策を講じたほうが良いもの、緑色はほぼ問題ないものを示しています。

Page Speed Score

ページ全体での点数で、100を満点としてどれだけ表示速度を速くするための工夫が施されているかが分かります。
いくつか調査してみたところ、

Google.co.jp（トップページ）は93点
Yahoo.com（トップページ）は85点
Yahoo.co.jp（トップページ）は79点
Amazon.co.jp（ログイン後のトップページ）は85点
mixi（ログイン後のトップページ）は72点
はてなブックマーク（ログイン後のトップページ）は51点

でした。
↑のキャプチャは、はてなブックマークのログイン後のトップページのものです。

既に最適化されているサイトで解説しても仕方がないので、ここは「はてなブックマークのログイン後のトップページ」の調査結果を見ながら、いくつかの重要な項目に絞って表示速度最適化施策を考えてみたいと思います。

CSSスプライトに画像をまとめる

はてなブックマークトップページの場合、最重要項目として「CSSスプライトに画像をまとめる」が上がってきました。
CSSスプライトとは、「複数の画像を1枚にまとめ、CSSを使って複数の画像に見せること」です。

例えば、Googleの検索結果ページの左上にあるGoogleのロゴを右クリックし、「新しいタブで画像を開く」をクリックするとGoogleのロゴ画像が表示されるはずですが…たくさんの画像が1つにまとまっていますね。
ということは、このサイトはCSSスプライトを使用しているということが分かります。

通常、ある程度の規模のサイトは、ロゴの他にたくさんの小さなアイコンのような画像があると思いますが、それを1つにまとめることでセッションを減らし、ページの表示速度を改善させることができます。

「Page」Speed」の「CSSスプライトに画像をまとめる」部分をクリックすると、ページで使われている画像のURL一覧が表示されます。

はてなブックマークのページには [NEW] アイコンや [B] アイコンなど、たくさんのアイコンが使用されており、それらのアイコンが1つ1つ別のファイルに分かれていますが、これらをまとめて1つの画像にすればページの表示速度が改善されると思われます。

なお、CSSスプライトの具体的な書き方は下記サイトなどを参考にしてください。

背景画像を使わずにCSSスプライトをする方法
 CSS Sprite Generator

CSSスプライトを自動的につくるジェネレーターもあります。
私は使ったことがありませんが、評判は良いようです。

もちろん、CSSスプライトはWordPressブログでも有効です。
ただ、投稿された画像まで1つにまとめるのは難しいです。

私が運営しているブログだと、イタリア旅行記 Caffè Lagunaはパーツ類をこのように1つにまとめています。

補足

国内の事例では、Yahoo!ニュースがCSSスプライトをはじめ、さまざまな施策を実施することでページの表示速度を3倍以上に高速化した事例があります。

ちなみにはてなブックマークのトップページの場合、他のサイトの favicon や、お気に入りに入れている方のアイコンがたくさん読み込まれ頻繁にその内容が変わるという仕様のため、全ての画像を1つにまとめることは難しく、Page Speed Score が低く出るのはある程度やむをえないと思います。
同様に、マイミクのアイコンやコミュニティのアイコンなどがたくさん表示されるmixiにも同じことがいえます。

ブラウザのキャッシュを活用する

続いて、ブラウザのキャッシュの有効期限を長めに指定すればページの表示速度が大きく改善できますが、残念ながらはてなブックマークのトップページでは活用されていないようです。

mod_expires が使えるサーバであれば、.htaccess や httpd.conf などにCSS、JS、画像などが

ExpiresDefault “access plus 1 year”
（1年間キャッシュ有効）

となるように記述しておけば、次回からはキャッシュが優先して読み込まれるようになります。
しかしこのままでは、例えばCSSの中身が書き換わった場合でもキャッシュに入っている古いCSSが使われてしまいます。

そこで、例えばHTML側でCSSなどを読み込むときに

のようにファイル名の後に ?1 や ?2 などバージョン番号を付けてあげればそういった問題を解決できます。

mod_expires が使えないがPHPが使えるサーバではPHPを使ってExpiresヘッダを付ける方法もありますが、サーバの負荷は高いそうです。

Expiresヘッダを送出するPHPのクラスとmod_rewrite
php + mod_rewrite での代替案

JavaScriptを縮小する

通常、JavaScript は見やすく改行やインデントが入っていますが、そういったものを削除し、1行にしてしまえば多少サイズが軽くなります。

そういったことは、専用のソフトを用意しなくても簡単に縮小できるWebサービスがあります。

JS Minifier

ただ、正直 JavaScript は縮小化よりも次に述べる gzip 圧縮のほうが圧縮効果は高いです。
jQueryなどの大きなライブラリは縮小版を使ったほうが良いですし、滅多に変更がなくサイズが大きな JavaScript ファイルは縮小すべきですが、頻繁に変更されるものであれば gzip 圧縮されていればそれほど気にしなくて良いかなとも思います。

圧縮を有効にする

ここでいう「圧縮」とは、gzip に対応しているブラウザの場合、サーバ側で CSS や JavaScript を gzip 圧縮した上で転送するということです。
それにより、転送にかかる時間を節約できます。

圧縮するには、Apacheに「mod_deflate」モジュールが入っていなければなりません。
（安いレンタルサーバだと入っていない場合もあります）

mod_deflate が使えるサーバであれば、.htaccess に次のように書くだけでいけるはずです。

AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

補足

ちなみに、はてなブックマークのトップページでは圧縮は有効になっているようですが、標準では無効になっているサーバもあるため書いています。

その他の施策について

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

他に、CSSやJavaScriptを縮小しgzipで圧縮する、DNSルックアップの回数を減らすなどページの表示速度を速くするためにはさまざまな施策がありますが、ここにその全てを記述することは難しいため「ハイパフォーマンスWebサイト」を一読されることをおすすめします。

この本は米Yahoo!のパフォーマンス担当責任者 Steve Souders 氏が書かれた、高速なサイトを実現するためのルールを14に分け、それぞれについて分かりやすく解説された本です。

米Yahoo!は、「Page Speed」が発表される以前から「YSlow」というFirefox/Chrome用ページ速度評価ツールを発表しており、Yahoo.comのトップページが要素の数の割に表示速度が速いことなど、Webページの表示速度にとても気を配っている企業であることが分かります。

ルール1：HTTPリクエストを減らす
ルール2：CDNを使う
ルール3：Expiresヘッダを設定する
ルール4：コンポーネントをgzipする
ルール5：スタイルシートは先頭に置く
ルール6：スクリプトは最後に置く
ルール7：CSS expressionの使用を控える
ルール8：JavaScriptとCSSは外部ファイル化する
ルール9：DNSルックアップを減らす
ルール10：JavaScriptを縮小化する
ルール11：リダイレクトを避ける
ルール12：スクリプトを重複させない
ルール13：ETagの設定を変更する
ルール14：Ajaxをキャッシュ可能にする

「ルール2：CDNを使う」以外は、どれもマークアップエンジニア（コーダー）レベルで実現できるものばかりです。