Page Speedが1.6βになったようで

[cipher] — Wed, 03 Feb 2010 07:08:24 +0000

昨年末にWeb Designingさんの特集に書いたWebサイトのパフォーマンスの話でも取り上げたGoogleさん謹製の最適化ツール「Page Speed」の1.6のβ版がリリースされてます（以前のエントリー）。

よく見るといろいろ変わっているようです（※クリックで拡大）。

年末のエントリーでは表示パフォーマンスが大事かとか簡単な使い方程度しか書いてないので、今回は気が向いたのでPage Speed 1.6βをベースにそこに挙げられている項目をひとつひとつ取り上げてみようかと思います。

長いので気合いを入れてください（笑）。

Page Speed 1.6β、それぞれの項目はこんな感じですよ

細かい改善手法についてまでは解説しませんが、Yahoo!さんのYSlow!同様日本語化されてるわけではないので、それぞれの項目がどういうことを言ってるのかぐらいがわかる程度の簡単なもので（笑）。

ちなみにうちのこのブログを使って検証した結果をもとに上の図にある順番になっています。これはサイト毎に全然変わった結果になると思いますので、ご自身のサイトで赤いエクスクラメーションマークがついてるとこを重点的に読んでみてくださいね。

Minimize request size

バージョン1.6βから新たに登場した「Minimize request size」は、HTTPリクエスト時のデータサイズを抑えようみたいなことでしょうか。これが大きい場合は遅延が起きてしまうみたいな話かと。解決方法としては、クッキーのサイズを少なくするとか、画像なんかはクッキーのつかないドメインから送るとかですね。

Combine external JavaScript

外部から読み込んでる複数のJavaScriptは、できれば結合しましょうってことです。ブラウザによっては、JavaScriptの並行ダウンロードができなかったりするので、複数のJavaScriptを読み込んでいる場合は速度低下を引き起こします（30個とか読んでたらそりゃ遅いっすよ、どことは言いませんけど笑）。結合できるものはできるだけ結合した方が良いってことですね。数は少ない方が理想的です。

Minimize DNS lookups

DNSの参照を減らしましょうってこと。いまどきのWebサイトは自分とこのサーバ以外の外部サーバからいろいろなデータを取得していることもあるでしょう（バナーだったり）。外部のサーバへのリクエストが増えた場合は、どうしても接続時にそのサーバのDNSの問い合わせが発生しますから、これが結果的に遅延に繋がるということになります（※GoogleさんのPublic DNSは表向きこの遅延解消が目的のようです）。

Use efficient CSS selectors

効率的なCSSのセレクタを使いましょうってことです。簡単に言えば、冗長なというか長ったらしいCSSのセレクタはやめましょうって話。だらだら長い子孫セレクタとかね。CSSの継承とかclassをうまく使ってシンプルに。「ul#nav li.listitems（要素名+id 要素名.class）」のような書き方しないで「.listitems」でいいんじゃない？みたいな感じです。

Leverage browser caching

ブラウザのキャッシュが有効になるようにしようってことです。もちろん普通一度見たデータはローカルにキャッシュされますけど、他のサイトをみたら順繰りに入れ替わります（キャッシュの容量で）。画像などの更新頻度が少ないファイルに有効期限などを設定しておけば、再閲覧時にHTTPリクエストがきても「304 Not Modified」が返されてローカルのファイルが利用されると。ヘッダのやりとりだけで終われば、余計な転送もいらなくなって表示が速くなるわけです。有効期限の設定は、Apacheの場合は「mod_expire」なんかで設定できます（参考程度の設定例）。

Leverage proxy caching

プロキシ経由の接続もあるので、ブラウザ同様にキャッシュが効くようにしておきましょうねってことです。「Cache-control」ヘッダをくっつけておこう的な話です。ただこれに関しては、条件次第ではCache-controlの値に注意が必要のようです。詳しくはマニュアルを参照で。

Minify HTML

「Minify」とは、余分な空白やコメントなどを除去することです。そうすることでデータの転送量を減らすことが可能です（Gzip圧縮がかけられるんだったら別にそこまでって気もしますが）。HTMLには、空白やいらない改行、コメントなども腐るほど入ってるでしょうから、その辺のゴミは取った方が転送データ量を減らすことができるってわけです（チリも積もればなんとやら笑）。

Minify CSS

こちらもHTML同様です。チーム単位での作業などではCSSに成形のためのインデントなんかが含まれますね。そのようないらないスペースやセレクタに含まれる余分な空白（値の中も）は取っ払いましょうということです。ちなみにPage Speedでは、自動的にMinify化されたCSSが保存されてますので、それを見ればどういうことかわかるでしょうし、場合によってはそれを使えば話は早いです（笑）。

Minify JavaScript

こちらも同じですね。JavaScriptのコードもできたらMinify化しましょうねと。

Remove unused CSS

使ってないCSSは取り除きましょう。付け足し付け足ししてるといつの間にか使わなくなったスタイル指示なんかがゴミになってるはずです。

Avoid bad requests

いらないリクエストをなくそうということです。簡単に言えば、404なんかのことです。ファイルへのリンクがはずれてるにもかかわらずリクエストを送るのは無駄ってことです。いろんなWebサイトでたまに見かけます（笑）。

Combine external CSS

外部のCSSファイルを結合しましょうということです。JavaScriptとはちょっと話が違いますが、@importを使って多段階でCSSを読ませたりするとブラウザによっては遅くなります（IE6とか）。そんなことしてたらHTTPリクエストが何回も発生するわけで、いくら並行ダウンロードができるといっても遅くなるのは当然です（笑）。できるだけ読み込むCSSの数は減らしましょう。

Enable compression

可能であれば、HTMLやCSS、JavaScriptといったテキストベースのファイルはサーバ側でGzip圧縮をかけましょうということ。既に圧縮されている画像以外はまとめてどーんと。これはApacheだと「mod_gzip」や「mod_deflate」で設定すれば可能です。圧縮率にもよりますが、転送データ量は大体1/3ぐらいになるかなと。古い携帯電話とかだとGzipに対応してないのに対応してるヘッダを送ったりすることがあるようなので、そのような対象の場合は注意が必要です。

Minimize redirects

そのまんまでリダイレクトを減らしましょう。コンテンツが移動したりするとHTMLのヘッダとかで別ページに飛ばしたりしてるとこもあるようですが、サーバ側でリライトをかけてリダイレクトするとかした方が良いってことです。

Optimize images

画像を最適化しましょうということです。PhotoshopとかFireworksで書き出しただけのデータは、そのままではいらんもんがついていたりしてなにげにでかいのです。同じ画像でもGIFよりもPNGの方が最終的には軽くなります。Pagespeedでも自動的に最適化した画像が保存されます。それ以前に最初から最適化するなら、そのためのツールやオンラインサービス（Smush.it™やpunypng）があるので利用してみましょう。

Optimize the order of styles and scripts

HTMLのの中のCSSとJavaScriptの順番にも注意しましょう。外部JavaScriptの読み込み指示がある場合は、そこで一旦並行ダウンロードが止まります。ソースを直接書いてる場合は、できることならCSSの読み込みの前にあった方が良いです。「→

gaspanik weblog » pagespeed