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

Feb 3rd, 2010 @ 04:08 pm › [cipher]
↓ Skip to comments

昨年末に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の<head>の中のCSSとJavaScriptの順番にも注意しましょう。外部JavaScriptの読み込み指示がある場合は、そこで一旦並行ダウンロードが止まります。ソースを直接書いてる場合は、できることならCSSの読み込みの前にあった方が良いです。「<link>→<script>→<script>→<link>」みたいになってたらどういうことが起こるか想像できますね。ページの描画に直接関係のないJavaScriptなどは、</body>の前で読ませると良いですね。そうしておけば、JavaScriptが読めないブラウザがみても困ることはありません（笑）。

Put CSS in the document head

CSSは<head>の中に。style要素にしてもlink要素の読み込みにしても。

Serve resources from consistent URL

「consistent」は「一貫した」とかそんな意味です。Webサイト中のいろんなページから参照するCSSだったりJSなんかは、バラバラとおかないで同じものを利用しましょうってことでしょうか。同じものを別場所からダウンロードさせるほどアホなことはありません。

Serve scaled images

実際の使用サイズの画像を使いましょうってことでしょうか。大きめの画像をHTML側でリサイズしたりするのはやめましょうってことです。画像データはテキストなんかに比べて大きいですから、実際の使用サイズできちんと貼っておいた方が良いのは当たり前ですね。

Specify a character set early

文字コードの指定は冒頭の方でってことでしょう。新しく追加された内容でヘルプもないようです（笑）。

Specify image dimensions

img要素には幅と高さを入れておきましょうということです。HTMLとCSSがダウンロードされれば、Webページは画像データのダウンロードが終わらなくてもページのレイアウトは可能です。その際、あらかじめ画像の大きさがわかっていた方がリフローなんかが起きないと。回線が速いとわかりにくいかもしれませんが、遅いとよくわかるんじゃないかなぁ。

Avoid CSS expressions

IEの7までで使える「CSS expressions」を使うのはやめましょうということです。

Defer loading of JavaScript

ページのロード時に呼び出されないJavaScriptのファンクションなどは後からロードしようってことでしょうかね。

Parallelize downloads accross hostnames

複数のホストを使って並行ダウンロードをしましょうってことですね。DNSの参照と相反する感じですが、ブラウザは1ホストあたりの並行ダウンロード数が決まっています（2だったり、4だったり、6だったり）。例えば大きめの画像は回線の速いサーバからダウンロードさせるとか、その並行ダウンロードの特徴を使えば工夫次第で速くなるってわけです。

Serve static content from a cookieless domain

静的なコンテンツといっていいかわかりませんが、画像やCSSのようなファイルはできるだけクッキーがくっつかないドメインから送りましょうと。冒頭のリクエストサイズに絡んだ話になってきますかね。うちも昨日からテンプレートで使い回すような画像はクッキーのないところから送るように変更しました。

といった感じで、うちもできることはやってます

といった感じでいかがでしょうか。真面目に翻訳するというよりは何となく意味が理解してもらいやすいように書いたつもりですが。

以前も書きましたが、必ずしもテストして点数が良ければいいってわけでもないです。自分たちでできることできないこと、やったほうがいいことそうでないことを見極めて最適化を図ってみてください。閲覧デバイスも多様化してきますし、回線品質が貧弱な環境はいっぱいありますよ、世の中には。

うちも最近は画像を大きめにしてるので、ファイルの配信構成などを見直しました（テンプレートの画像はクッキーのない別ホストから送るとかいろいろ）。今回紹介したPage Speedだけでなく、YSlow!でもどうぞご自由にお試しください（やれることはやってるつもりなので）。

Webサイトの表示パフォーマンスアップはどうすればいいのかとかのお悩み相談も承りますよ（笑）。

Categories: articles, scribbling, works
Tags: pagespeed, performance, webdesign

Send a Message