Page Speedでチェックついでに最適化

前エントリー「YSlow!、使ってわかるあんなことこんなこと」でFirefoxのアドオン「YSlow!」の使い方とか見方を紹介したので、今回はGoogleさん謹製のアドオン「Page Speed」の話をしてみようかと思います。

前回同様、「そうだ、京都、いってきた」的なページを参考ページとしまして、今回は画像に関するちょっとした話なんかも入れていきたいと思います。では、Page Speed編もいってみましょう。


pagespeed-000

始める前に、Page Speedのインストールから

Page Speed」は、Firefoxのアドオンサイトには登録されていませんので、GoogleさんのPage Speedのダウンロードページから直接インストールします。現在、正式版が「Version 1.4」、β版として「Version 1.5」が公開されていますので、どちらかお好きな方を。古いものよりは新しいものの方が良いと思いますけど。ちなみにこちらもYSlow!同様、Firebugが必要です。

Page Speedでサイトをチェックしてみよう

Page Speedのインストールが終わったら、さっそくサイトを開いてチェックしてみましょう。YSlow!と同じようにFirebugのパネルの中に隠れていますので、ブラウザウィンドウ右下の虫のボタンをクリックします。

pagespeed-001

パネルの上のメニューに「Page Speed」と「Page Speed Activity」の2つのタブが追加されていると思います。サイトをテストして最適化ポイントを表示する場合は、「Page Speed」のタブを開いて「Analyze Performance」のボタンをクリックします。

ちなみにこのタブには設定項目がいくつか隠れています。実はこのPage Speed、テストと同時に構成要素を最適化するという素敵な仕様になっています。最適化されたファイルの保存先はここで変更しましょう。

テスト結果と最適化のための指針はYSlow!とはちょっと違う

YSlow!が米Yahoo!さんの14のルールをベースにいろいろ新しい項目が追加されているのに対し、こちらのPage SpeedはGoogleさんのものです。チェック項目は基本的に同じような内容になりますが、パフォーマンス向上のための指針などはちょっと異なります。

pagespeed-002

赤いビックリマークは要改善なポイント、黄色い三角はできればやっといた方がいいんじゃない?ぐらいな感じでしょうか。「使ってないCSSは取り除こう」「冗長なCSSのセレクタはやめて、効率的なセレクタにしよう」「画像サイズは指定しようよ」「styleとscriptの順番もちゃんと最適化しよう」みたいな感じでいろいろなチェック項目が並んでます。

(追記: 2010.02.03)バージョン1.6βがリリースされたので、こちらに各項目の意味を書き出しておきました。よければご覧ください。

pagespeed-003

たとえば、上図では「Parallelize downloads accross hostnames」にビックリマークが出ています。これは「ブラウザの並行ダウンロードの機能を有効に活かすために、配信ファイルをいくつかのホストに分けた方がいいですよ」的な内容です。このサンプルページはCSSやJavaScriptに加え、写真のサムネイルが15個、その他の画像が10個ほどありますので、1つのホストから配信するのはあまり効率的でないのは事実です。もちろん改善の方法はあるんですが、その話は後半で。

pagespeed-004

Page Speedの特徴として、三角矢印をクリックして展開すると結構詳細な解説をしてくれます。たとえばこの「Use efficient CSS selectors」の項目は、もっと効率的な書き方にしといた方がいいんじゃない?って話ですね(WordPressのデフォルトテンプレートなので、いろいろ事情があってこうなってるわけですが 笑)。

とまぁ、より詳細に改善すべき点を教えてくれるってわけです。

「Resources」でステイタスコードやファイルサイズのチェック

テストが終わるとサイトの構成要素の一覧を「Resources」で確認できます。

pagespeed-005

このResourcesでは、個々のデータのHTTPステータスコード(200だったり304だったり404だったり)に加えて、実際のファイルサイズと転送データサイズなんかも表示されます。矢印をクリックして展開すれば、HTTPヘッダのリクエストとレスポンスとかも確認可能です。

pagespeed-006

「File Size」が実際のファイルサイズ、「Transfer Size」が転送サイズです。前回も書いてますが、うちはテキストデータは基本Gzip圧縮がかかるようにしてるので、HTMLやCSSなんかは転送量が少なくなっているというわけです。

pagespeed-007

ちなみに最新のβ版からは「ShowSlow.com」へテスト結果を送信することもできます。Show Slowは、YSlow!とPage Speedを使ってテストした結果を集めてるサイトです。年末にどっかのサイトで紹介されてから毎日いろんなサイトのテスト結果が載るようになりました。FirefoxのAbout ConfigでちょいちょいっといじってあげるとYSlow!でも送信可能です。

「Page Speed Activity」でデータの流れとイベントをチェック

Page Speedをインストールするともうひとつ追加されるタブ「Page Speed Activity」では、データリクエスト開始からの一連の流れを記録することができます。

pagespeed-008

データのリクエストからDNSの参照にかかってる時間や接続までの時間、データのダウンロードにかかる時間をはじめ、描画されてるタイミングとかJavaScriptが実行されてるタイミングなんかも見れるようになっています。

この機能は、SafariやChromeに搭載されているWebインスペクタにもありますね。最新版のChromeとかはより細かく見れるようになってますし、GoogleさんがChromeのエクステンションとして年末にリリースした「Speed Tracer」をインストールすればもっともっと詳細な表示が可能です(こんな感じ)。

ちなみにChromeのOS X版では最新のDev.版でエクステンションが利用可能になってますが、残念ながら起動の前にとあるおまじないを指定しないといけないので今のところ使えません(笑)。

Page Speedの最適化機能はなにげに便利

冒頭でも書いたようにPage Speedはテストする際に自動的に画像やCSS、JavaScriptなどのファイルの最適化をしてくれるという素敵な仕様になっています。これがまぁ案外役に立つこともあるわけです。

たとえば、今回のサンプルページはこんな感じで写真のサムネイルがバラバラ並んでいます。

pagespeed-009

これらのサムネイル、そもそも画像本体はFlickrにアップしてあるものなので、そこからこのスクエアなサムネイルを引っ張って貼り付けていました。要は「配信ホストを分けて、スピードの速いホストから一気に並行ダウンロードさせる」ってやり方です。

しかし、Flickrで生成されているこのサムネイルは、画像そのもの最適化がされてない状態でしてね…、実は。いくらFlickrからの転送が速いとは言っても、この15枚のサムネイル画像を合計すると500kぐらいありました。

それじゃ見てくださる皆さんにあんまり良くないよね、ってことで、このPage Speedが自動的に最適化してくれたサムネイル画像に差し替えました。そうすることで、並行ダウンロードに支障があるものの、画像データの合計を約69kまで落とすことができたというわけです。

JPGもPNG(GIFよりもPNGが軽い)もただ単にPhotoshopから書き出しただけではまだダメで、Web Designing誌やうちのエントリーにも書いたように、さらに最適化処理をすることでデータサイズを大きく削減することができます(ものによりますが)。

pagespeed-010

Page SpeedはCSSやJavaScriptのMinify化もやって保存してくれますので、「Miniify化なんてチマチマやってらんねーよ!」って方は保存されたものを使えば楽ちんです(笑)。

とまぁ、こんなとこでPage Speedの見方、使い方を終わりにしたいと思います。

Webサイトのパフォーマンスの最適化って、目に見えて効果がでることばかりではありませんが、YSlow!とPage Speedやそれ以外のツールを使って検証しながらできそうなことだけでもやっておけば、それがたとえ気付かれなかったとしても最終的には良い結果をもたらすかもしれません。

目に見えないところにも気を配ってこそのホスピタリティですから。

Tags: , , , ,

   

Comments are closed.


Performance Optimization WordPress Plugins by W3 EDGE