PageSpeed Insights（速度の提案）

今回の勉強会はPageSpeed Insights（速度の提案）についてです。

PageSpeed Insights（速度の提案）の概要

Google Analytics内のコンテンツ→サイトの速度→速度の提案で、サイトの表示速度に悪影響を及ぼしているやり方をしている場合は、問題点の個数が表示され、個数をクリックすると、PageSpeed Insightsが表示され、問題点の具体的な内容を見ることができます。
ChromeとFirefoxの拡張機能もあり、表示してるページを解析して問題点を確認することもできます。

サイトの速度がGoogle Analytics内で表示されているので、Googleの検索順位には影響があるはずで、速度が遅いと順位が下がるらしいのですが、速度対策をしても順位はほぼ変わらなかったので、影響は小さいようです。

PageSpeed Insights（速度の提案）で表示される問題点の基準となっているPageSpeed Insights Rulesの各項目の概要と、それに対する対処法を見て行きたいと思います。
※この記事は2013/07/29に更新されたRulesを元にしています。

Avoid Landing Page Redirects

概要

ランディングページリダイレクトを避ける。
リダイレクトする度にHTTPリクエストなどが発生するので、リダイレクト回数を最小限に抑えることで、サイトのパフォーマンスを向上させることができます。

対処法

リダイレクトはどうしても必要なページのみで設定する。
AからB、BからCにリダイレクトしているような場合は、AからCに直接リダイレクトする。
PC用ページからスマホ用ページにリダイレクトしている場合は、PC用ページに<link rel="alternate">でスマホ用ページを明示することで、スマホでの検索結果にスマホ用ページが表示されるようになり、余計なリダイレクトを減らす事ができます。

Enable Compression

概要

圧縮を有効にする。
サーバーで圧縮していない生ファイルではなく、gzip形式で圧縮したファイルをクライアントに返すことによって、ダウンロード時間を短縮する事ができます。

対処法

サーバー側でリクエストがあったタイミングで圧縮を実行するか、予め圧縮ファイルを用意しておき、クライアントがgzipが解凍できるなら圧縮ファイルを返すように設定する。（参考記事1,参考記事2）

Improve Server Response Time

概要

サーバーの応答時間が200ミリ秒を超えるのはNG。

対処法

サーバーサイドプログラムで重い処理をしていて、アクセス数が多い場合などに、サーバーに負荷がかかり、サーバーの処理能力を超えると、応答が遅くなるので、処理を軽くするか、サーバーを良いものに替えるか、サーバーを複数用意して負荷分散するなどが、直接的な対処法として考えられます。
速度の提案ある項目に対応していく事で、サーバーに対する負荷は減るはずなので、他の対応をある程度した後で、まだ残っている場合にサーバーを見直すという方向になるはず。

Leverage Browser Caching

概要

ブラウザのキャッシュを活用する。
複数回サイトに訪れる場合、画像,JS,CSSなどのファイルを再取得せずにキャッシュから読み込むようになれば、その分のダウンロード時間をなくす事ができます。
一般的に、画像などのページの部品となる静的なファイルはキャッシュ可能ですが、HTMLファイルは変更が加わるファイルなので、キャッシュ可能と考えるべきではありません。

対処法

サーバー側で画像,JS,CSSなどのファイルに、max-ageか、Last-ModifiedとETagを設定する。
max-ageの設定は1週間〜1年が推奨されているので、1ヶ月あたりが無難だと思います。

# .htaccessでの設定例（max-age 1ヶ月）
<FilesMatch ".(flv|gif|jpe?g|png|ico|swf|js|css|pdf)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

Minify Resources (HTML, CSS, and JavaScript)

概要

HTML,CSS,JavaScriptの各ファイル内で、余計な空白,改行,インデントなどがある場合、これを削除することによってファイルサイズを縮小することができます。
また、変数名などを短くすることによって、さらに縮小することができます。

対処法

HTMLの縮小は、PageSpeed Insightsで解析して、最適化されたコンテンツをダウンロードして使用する。
CSSの縮小は、YUI Compressorやcssmin.jsなどを使用する。
JavaScriptの縮小は、Closure Compiler,JSMinかYUI Compressorなどを使用する。
これらの作業は更新する度に必要で、手動で行うのは現実的ではないので、自動的に最適化する環境を構築する必要があると思います。

Optimize Images

概要

画像を最適化する。
画像ファイルの中に含まれるコメント削除し、適切な形式(png,gif,jpg)で圧縮する事で、画像ファイルサイズを減らすことができます。

対処法

HTMLやCSSでサイズを指定して縮小して表示している場合は、縮小されたサイズの画像にする。ただし、同じページ内で違うサイズで表示する場合は、小さい画像を何種類も読み込むより、最大のサイズに合わせた画像で縮小表示して一つの画像を使い回した方がいい。
形式は、写真であればjpgで見た目に問題が出ない程度に画質を落としたものがよく、写真でなければ基本的にはpngで、10*10px以下や3色以下などの小さい画像であれば、gifがいい。BMPやTIFFなど他の形式は使用しない。
png画像は、PageSpeed Insightsで解析すれば、可逆圧縮で最適化された画像をダウンロードできる。
jpgは画質をどの程度落とすかを決める必要があるので、手作業で書き出していく必要があります。

Optimize CSS Delivery

概要

CSSの配信を最適化する。
小さいサイズでも外部cssファイルを読み込む時にも、サーバーにリクエストしてダウンロードするために一定の時間がかかり、その間はブラウザがコンテンツを描画できないので、cssファイルをインライン化すれば、待ち時間をなくすことができます。

対処法

いくつも小さいcssファイルを読み込んでいる場合は一つにまとめる。
小さいcssファイルをインライン化する。大きいcssファイルは外部ファイルにして、キャッシュを有効活用した方がいい。

Reduce the size of the above-the-fold content

概要

初期描画に必要なファイルサイズを抑えて、初期描画が終わった後に追加でコンテンツを読み込んで描画していくようにすることで、初期描画にかかる時間を抑えることができます。

対処法

具体的な方法はわかっていないので、理論だけです。
メインコンテンツと関係ないサイドバーを後で読み込む。
ファーストビューで表示されない画像などをスクロールして表示が必要なタイミングで読み込む。
ソーシャル系のコンテンツはメインコンテンツ部分が下まで表示されたタイミングで読み込んで表示する。

Remove Render-Blocking JavaScripts

概要

描画を止めているJavaScriptをなくす。
ブラウザは描画を始める前にJavaScriptを解析する必要があるので、外部JavaScriptファイルがあると、サーバーにリクエストしてダウンロードして解析するために一定の時間がかかり、その間はブラウザがコンテンツを描画できません。

対処法

小さいJavaScriptファイルはインライン化する。大きいJavaScriptファイルは外部ファイルにして、キャッシュを有効活用した方がいい。
初期描画に関係ないクリックなどのイベント処理などのJavaScriptファイルの読み込みをコンテンツの描画後に行う。具体的な記述方法はinsights/BlockingJS。

Use Asynchronous Scripts

概要

非同期スクリプトを使用すれば、ダウンロードと実行が並列で同時に行われるので、待ち時間が減ります。

対処法

HTML5ではscriptにasync属性を付けることで非同期にすることができます。
ただし、そのscriptが非同期で問題なく実行できるかを確認する必要があり、適当にXHTML 1.0でasyncを付けたらIE8で固まるという現象が起きたので、動作確認はしっかりする必要がありそうです。

その他

PageSpeed Insights Rulesにはないが、PageSpeed Insightsで出てくるものをいくつか。
※以前はPageSpeed Insights Rulesにあったけどなくなったものです。

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

小さい画像をいくつも使用している場合は、スプライト画像として一つのファイルにして、CSSでその一部を表示するようにする事で、リクエスト回数を減らす事ができます。
img要素でaltがあるものはそのまま一つの画像にした方がHTMLの意味として正しいので、背景画像やアイコンなどテキストに置き換えないものをまとめることになります。
例：Google Analytics、Facebook、Twitter、Yahoo! JAPAN

CSS @import を使用しない

CSS @import を使用すると、@importで読み込まれているファイルを読み込み終わるまで、@import以降が評価されません。単純に全てのファイルをlinkで読み込めば、同時に並列で読み込む事が可能なので、@importは使用するべきではありません。