[Web] Google Page Speedでサイトを高速化

3～4回で書けると思ったについて。

ひとつの項目について思った以上に長くなってしまっているので、順番を間違えた気もしますが、ここでインデックス的に全体をまとめておきます。

おさらいしておくと、このツールはFirebugと組み合わせて使う、ページのボトルネック調査ツールです。
Page Speedを実行したからといって、自動的にページの表示スピードが速くなるようなことはありません。リストアップされた問題点を理解し、自分の環境にあわせた対応策をとって、はじめてページは高速になります。

自サイトに対して挙げられた項目であれ、そうでなくても、注意すべき点として基本的な内容を理解しておくことは有益です。

キャッシュの最適化 – Optimizing caching

ネットワーク転送量を減らすことは、ページの表示速度を劇的に速められます。ブラウザやプロキシのキャッシュの仕組みを学び、効率良くデータを交換しましょう。

Leverage browser caching

ブラウザキャッシュを有効にして、データの再送を減らします。
キャッシュを使うには、HTTPレスポンスヘッダにExpireやETagなどを付けてやる必要があります。キャッシュの方法には一定期間無条件でキャッシュをする方法と、データに変更が無いかどうかの通信を行い、必要な場合だけ内容を転送する方法があり、当然ながら前者の方が高速です。
ヘッダを付与するのは、ほとんどの場合Webサーバの役目です。
» 詳細

Leverage proxy caching

プロキシサーバにキャッシュをさせると、各クライアントからネットワーク的に近いところでキャッシュが行われ、高速化やサーバの負荷軽減に役立ちます。
HTTPヘッダへの記述や静的ファイルのURL記述方法によって、キャッシュされるかどうかが変わってきます。逆に効果測定用のリクエストなど、プロキシにキャッシュさせたくないものもあります。ケースを学び、正しくコントロールできるようにしましょう。

往復遅延時間の最小化 – Minimizing round-trip times

キャッシュは主に再訪者に効果があるものですが、RTTを軽減することは全てのケースで有効です。
無駄を省き、パラレルに効率良くダウンロードすることで、根本的な高速化を図ることが出来ますが、若干高度なトピックが多いかもしれません。

Minimize DNS lookups

HTTPで通信する際、ホスト名毎にDNSルックアップと呼ばれる作業が必要になります。例えば”screw-axis.com”と通信したい場合、そのままでは接続先を見つけることができません。DNSに問い合わせて、”112.78.113.31″というIPアドレスであることを教えてもらわなければなりません。
同じホスト名であれば何度もルックアップする必要はありませんが、例えば1つのページに20種類のホストがあれば、20回の問い合わせが必要になります。可能な範囲でこの数を減らすことは、無駄を省き、RTTの最小化に役立ちます。
後述するように、必ずしもホスト数を最小にすることがイコール最適化ではないのですが、不要な呼び出しは減らしていきましょう。

Minimize redirects

サイトがリダイレクトを使う理由は様々です。サイトの移転、多重ドメイン、アクセスのトラッキングなど、それぞれの理由でリダイレクトを行っていると思いますが、可能な限りこれを避ける方法を講じるべきです。
単に不要なものを除外する他にも、リダイレクトではなくリライトを用いたり、トラッキングをバックグラウンドで非同期に行うなどの工夫をしていきましょう。

Combine external JavaScript

外部Jsファイルはモジュール毎に分割されがちですが、1つにまとめてもコード量は同じです。
特にJavascriptはパラレルダウンロードが行われないブラウザが多いため、接続の初期化やHTTPヘッダの往復が細かいボトルネックになります。
管理の利便性などとのトレードオフになりますが、Minify、結合、圧縮を行って通信できる管理運用方法を確立しましょう。
» 詳細

Combine external CSS

スタイルシートもJs同様に、まとめることでボトルネックを軽減できます。
しかしCSSに関してはパラレルにダウンロードできるブラウザが殆どなので、ケースによっては分かれていた方が高速な場合もあります。(そのケースはトータルでかなり巨大なスタイル群になっているはずなので、そもそも避けるべき事態ですが)
その際でも、指定の仕方によってはパラレルに走らないこともあるので注意してください。
» 詳細

Optimize the order of styles and scripts

ダウンロードの手順で、同時に走る通信量は大きく変わります。
head要素内のファイル指定順、インラインスクリプトのタイミングなど、原理を理解してセオリーを身につけましょう。
» 詳細

Parallelize downloads across hostnames

ひとつのブラウザが、あるホストと同時に作れる接続は限られています。
平行ダウンロード数を増やすため、ホストを敢えて分散させるテクニックも学びましょう。
» 詳細

リクエストサイズの最小化 – Minimizing request size

HTTPはリクエスト毎にヘッダを送受信します。
このサイズを減らすことは、ひとつひとつは小さくても、回数が非常に多いのでトータルで大きな転送量を減らすことに繋げることが出来ます。

Minimize cookie size

cookieのサイズは極力小さくしましょう。
例えばユニークなIDを発行してcookieに入れ、データの中身はサーバ側で持つような工夫も有効です。

Serve static content from a cookieless domain

静的ファイルを大量に扱うようなサイトでは特に、リクエストに付随するcookieの転送量は馬鹿にならなくなってきます。
スタティックなファイルを置く専用のドメインを用意することで、完全にcookieの送受信を無くす方法も検討しましょう。

データ本体のサイズ最小化 – Minimizing payload size

静的なファイルであれ動的なファイルであれ、データ本体のサイズが通常は最も大きくなります。
このサイズを減らすことは、極めて本来的・直観的にページを「軽く」することに繫がります。

Enable gzip compression

最近はほとんどのブラウザはgzip圧縮されたコンテンツを解凍することが出来ます。
基本的にdeflateは圧縮時に比較的コストがかかり、解凍が非常に高速なアルゴリズムです。HTML、Css、Javascriptのようなテキストベースのコンテンツは特に圧縮効果が高いので、ネットワーク転送量軽減のために積極的に活用しましょう。

Remove unused CSS

使わないスタイル定義は削除しましょう。
効率の良いスタイルを書くことは、単に転送量だけでなくパースやレンダリングの速度向上にもつながります。
複数のページにまたがったスタイルシートを使う場合、ファイルをパーツに分割して必要なものだけを取り込むような工夫をしましょう。
Page Speedは該当ページで使われていないスタイルを洗い出してもくれるので、最適化に役立つでしょう。
» 効率の良いcssを書くための7箇条

Minify JavaScript

スクリプトをコーディングする際、可読性のために改行やインデントは欠かせません。しかし、そういった改行や空白をネットワーク転送し、パースする際に読み込むことはコンピュータにとっては無駄です。
JSMinやを使い、整形用文字の除去や変数・関数名の圧縮などを行いましょう。

Defer loading of JavaScript

ブラウザはスクリプトが実行されるまで、ページをレンダリングせずに待機します。これは、スクリプト内でページを変更する可能性があるからです。
ユーザはレンダリングが先に行われると、体感速度が上がったように感じるものです。
明示的に「このJsファイルはページのレンダリングに不要」と指定することで、ブラウザの処理の順番を制御することが出来ます。

Optimize images

それほど画質を落とさずに画像のファイルサイズを減らすための軽減ツールや圧縮ツールも数多くあります。
必要性と許容できる画質のバランスをとりながら、極力ファイルサイズを軽くするようにしていきましょう。

Serve resources from a consistent URL

キャッシュを有効に使うため、同じファイルは常に同じURLを使うようにしましょう。
例えばa.example.comとb.example.comに同じJsファイルがあった場合、二重に置かずにb.example.comからもa.example.comを参照した方が効率が良いはずです。

ブラウザのレンダリング最適化 – Optimizing browser rendering

ダウンロードが終わってからも、ページが表示されるまでにブラウザはパース、レンダリング、実行を行います。
クライアント側での処理を最適化することで、ページを軽くすることが出来ます。

Use efficient CSS selectors

CSSの指定は基本的にセレクターを用います。しかし一概にセレクターと言っても、効率の良い指定と悪いものがあります。
極力非効率なCSSセレクター指定を避ける記述を覚えましょう。
» ページにスタイルがあてられる仕組みを学ぶ
» 効率の良いcssを書くための7箇条

Avoid CSS expressions

Internet Explorer 5～7向けに、CSS Expressionを使っているサイトもあるでしょう。しかし、これはレンダリングのパフォーマンスを下げてしまいます。
IEも8以降は機能自体が非推奨になることもあり、他の方法で実現できる方策を練りましょう。

Put CSS in the document head

body内などでstyle要素を使わないようにしましょう。
可能な限りheadタグ内にlink要素を記述し、@importは使わないようにしましょう。

Specify image dimensions

imgタグに画像のサイズは必ず指定しましょう。
サイズがわかれば、画像のダウンロードが終わる前にも正しい位置でレンダリングが可能です。

今後も時間があれば、ピックアップして詳しく取り上げようと思います。

Related posts:

1. [Web] Google Page Speedでサイトを高速化(1)
2. [Web] Google Page Speedでサイトを高速化(3)
3. [Web] Google Page Speedでサイトを高速化(2)
4. [Web] Google Page Speedでサイトを高速化(4)