PageSpeedの動作を検証

ご注意

この記事は 2014年5月15日 に書かれたものです。内容が古い可能性がありますのでご注意ください。

皆さん、こんにちは。 突然ですが、皆さんはPageSpeedというサービスをご存知でしょうか? PageSpeedは、ウェブページのレイテンシを向上させるサービスで、GAEで利用するにはこれまで有料だったのですが、先日の価格変更のタイミングで無料になりました。ちょうどいい機会なので、今回はPageSpeedについて、初心者向けの基本的な使い方等を調べてみました。 以下のような構成でお届けします。 それでは、早速、本題に入ってきましょう。   ちなみに、PageSpeedはApacheのモジュールとして提供されているものなどもありますが、今回はGAEにて設定のみで利用出来るというサービスについての調査です。他のPageSpeedとは微妙に異なる可能性があります。(概ね同じでしょう)

PageSpeedの機能(何をするのか)

PageSpeed ServiceはGoogleのベストプラクティスに基づいて、ウェブページのレイテンシを向上させるサービスです。 この機能をオンにするだけで、GAEアプリが使用している画像、CSS、Javascriptやアプリが返すHTMLに対して、自動で最適化を行ってくれます。 ただし、リソース(HTML、CSS、Javascript、画像ファイルなど)が書き換えられるので、サイトの機能に影響を与えてしまう可能性があるので、注意が必要です。 具体的な機能としては以下のようなものがあります。(ここに挙げるものが全てではありません。詳しくは公式ドキュメントを参照してください。)
  • リソースの最適化

あらかじめ、画像ファイルの変換(JPEG->WebP変換など)、CSSやJavascriptの最小化(余計な空白文字の除去など)などを行い、転送されるデータ量を軽減します。

  • リソースのキャッシング、プロキシング

リソースをGoogleのサーバにキャッシュし、ユーザに近いところから提供します。これに伴い、HTMLでそれらのリソースを参照する部分は書き換えられます。

  • ドメイン・シャーディング

上述のキャッシング、プロキシングに、同一ドメイン内の複数のホストを用いることで、リソースの読み込みを並行で行えるようにします。

  • 画像のLazyLoad

画像がブラウザの表示領域に入ったときに、その画像を読み込み・描画するようにします。

  • Javascriptの実行を遅らせる

Javascriptを実行するタイミングを他のリソースの読み込みの後にします。後述しますが、この機能はリスクを伴うので、デフォルトでは、オフになっており、使用には注意が必要です。

  • その他

上記以外にも、いろいろな機能があります。DNS-prefetchやgzip圧縮などなど。

実際の挙動を検証

さて、PageSpeedの概要を把握したところで、早速ですが、実際にPageSpeedをオンにした時に、レスポンスの内容がどのようになるのかを、簡単な例で検証してみましょう。 以下のような、JPEGを読み込んで表示するHTMLが、どのように書き換えられるのかを確認しました。 (画像はhttp://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:%E6%97%A5%E6%9C%AC%E7%8C%AB_2008-4.jpgをダウンロードして用いています。) [html] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body> <img src="../../img/neko.jpg" /> </body> </html> [/html] ここで、レポンスの内容を確認する前に、どのような最適化が行われるのかを予想してみました。 1:Optimize Imagesの説明ページにある”Convert JPEG to WebP”が適用される 2:Proxy Resourcesの説明ページの”Proxy Images”に書かれているように、画像のパスが*-ps.googleusercontent.comというドメインのホストにキャッシュされたものに置き換わる という2つが適用されるのではないでしょうか。 では、実際にPageSpeedをオンにして返ってきたレスポンスの内容を見てみましょう。こちらです。 [html highlight=”3″] <html> <head><script type=…(省略①)</script><link rel="dns-prefetch"…(省略②)></head><body><noscript><meta HTTP-EQUIV=…(省略③)</noscript> <img src="http://1-ps.googleusercontent.com/x/s.z-yoshi-formsimple.appspot.com/pagespeedtest.z-yoshi-formsimple.appspot.com/img/xneko.jpg.pagespeed.ic.y7vnljDXZN.webp" /> <script pagespeed_no_defer="" type=…(省略①’)</script></body> </html> [/html] 3行目を見ると、1-ps.googleusercontent.comというホストにキャッシュされた画像を参照していることと、ファイルの拡張子から、画像がJPEGからWebPに変換されたらしいということがわかります。 (ちなみに、もとのJPEGファイルはサイズが約580KBでしたが、WebPは約115KBでした。) また、上記では省略した、いくつかの変更もあります。これらについては、簡単な説明と公式ドキュメントへのリンクを提示するだけにとどめます。 省略①および①’:ページの読み込み時間測定用のJavascript(https://developers.google.com/speed/pagespeed/service/LatencyMeasure) 省略②:ドメイン名をあらかじめ解決する仕組み(https://developers.google.com/speed/pagespeed/service/PreResolveDns) 省略③:metaタグによるレスポンスヘッダの追加(https://developers.google.com/speed/pagespeed/service/OptimizeHtml#ConvertMetaTags

設定のカスタマイズ

PageSpeedを用いる際に、設定をカスタマイズして、一部の機能をオフにするといったことも可能です。 開発言語にJavaを用いている場合、appengine-web.xmlを編集することで、設定を変更することができます。 具体的には、<appengine-web-app>要素の中に以下のような要素を追加します。 [xml] <pagespeed> <domain-to-rewrite>*.cdn.myapp.com</domain-to-rewrite> <domain-to-rewrite>www.flickr.com</domain-to-rewrite> <url-blacklist>http://*/*.svg</url-blacklist> <url-blacklist>http://secure.foo.com/*</url-blacklist> <enabled-rewriter>CollapseWhitespace</enabled-rewriter> <disabled-rewriter>CombineJs</disabled-rewriter> <disabled-rewriter>ProxyImages</disabled-rewriter> </pagespeed> [/xml] それぞれの要素で次のようなことを指定できます。
  • <domain-to-rewrite>

PageSpeedを適用するドメインを指定できます。

自分のアプリケーションのドメイン以外にも、外部の画像ホスティングサービスを指定して、画像をキャッシュするということもできるようです。

  • <url-blacklist>

指定したURLにはPageSpeedを適用しないようにすることができます。*はワイルドカードとして使用できます。

  • <enabled-rewriter> / <disabled-rewriter>

どの機能(rewriterと呼ばれています)をオン/オフにするかを指定できます。rewriterにはデフォルトでオンのものと、そうでないものがあります。

rewriterの名前、デフォルトでオンなのかはこちらで確認してください。

さて、上で試したHTMLの例で、設定を変更して検証してみましょう。appengine-web.xmlに、次のような設定を追加して確認しました。 [xml] <pagespeed> <disabled-rewriter>WebpOptimization</disabled-rewriter> </pagespeed> [/xml] アプリケーションをデプロイし、ブラウザのキャッシュを削除してから、再度アクセスして返ってきたレスポンスがこちらです。 [html highlight=”4″] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><script type=…(省略①)</script><link rel="dns-prefetch" …(省略②)</head><body><noscript><meta HTTP-EQUIV=…(省略③)</noscript> <img src="http://1-ps.googleusercontent.com/x/s.z-yoshi-formsimple.appspot.com/pagespeedtest.z-yoshi-formsimple.appspot.com/img/xneko.jpg.pagespeed.ic.zkbCxcJNsq.jpg" /> <script pagespeed_no_defer="" type=…(省略①’)</script></body> </html> [/html] 4行目の拡張子を見ると、WebPではなくJPEGになっていることがわかります。このJPEGには何らかの最適化がなされているのでしょうか? 変換された画像ファイルxneko.jpg.pagespeed.ic.zkbCxcJNsq.jpgをダウンロードして、Linuxのrdjpgcomコマンドで確認してみました。 まずは、もとの画像ファイルneko.jpgを見てみましょう。以下はLinuxのターミナルで実行したコマンドとその結果です。 [java] $ rdjpgcom -verbose neko.jpg JPEG image is 1107w * 718h, 3 color components, 8 bits per sample JPEG process: Baseline [/java] こちらは普通のJEPGファイルですね。変換された画像ファイルはどうでしょうか。 [java] $ rdjpgcom -verbose xneko.jpg.pagespeed.ic.zkbCxcJNsq.jpg JPEG image is 1107w * 718h, 3 color components, 8 bits per sample JPEG process: Progressive [/java] Progressive JPEG形式になっていることがわかります。また、ファイルサイズを確認すると、元のファイル約580KBに対し、変換された画像は約170KBになっていました。 実際の画像ファイルはこちら。 元のJPEGファイル 最適化されたJPEGファイル

パフォーマンスの測定

さて、それでは実際にはどの程度の効果があるのでしょうか? WebPageTestというサイトでPageSpeedをオン・オフにした時のパフォーマンスを測定・比較することができます。 使い方は簡単で、フォームに測定したいページのURLを入力し、いくつかのオプションを選択して、「START TEST」ボタンを押すだけです。 そうすると、測定実行中であることを示すページに遷移し、(測定するページのコンテンツにもよるかと思いますが)数分待つと結果ページが表示されます。 webpagetest3 上のスクリーンショットを見てみましょう。 表にPageSpeedをオフの時、オンの時のロード時間とSpeed Indexが表示され、さらに実際どのような見え方をするのかを比較した動画が見られます。 PageSpeedによって、読み込み時間が1.503秒から0.611秒へと、半分以下に短縮できたことがわかります。 また、SpeedIndexも小さい値のほうが良いのですが、かなり減らすことができています。 このページのリンクから、さらに詳細な測定結果を見ることができますので、興味のある方はご覧ください。

PageSpeedを使用する際の注意事項

ここまでの内容で紹介したように、PageSpeedを使えば、手軽にレイテンシを向上させることができますが、リソースの書き換えを行うので、その結果、サイトが意図した挙動をしなくなってしまう可能性があります。 「PageSpeedの機能」のところで言及したように、そのような状況をもたらすリスクの大きい機能として、Javascriptの実行タイミングを遅らせる機能(Defer Javascript)が挙げられます。 Defer Javascriptの説明ページにも、最初にWarningが表示されており、リスクの大きい機能であると説明されています。また、この機能はデフォルトではオフになっています。 Defer Javascriptをオンにしつつ、その適用範囲を制限するために、「設定のカスタマイズ」で紹介したような方法で、url-blacklistを指定する他に、以下のようにpagespeed_no_defer属性をscript要素に付け加えるという方法もあるようです。 [html] <script pagespeed_no_defer="">…</script> [/html] また、その他の機能によっても、意図しない不具合が生じることもあります。 実際に目にした例では、PageSpeedをオンにしたら、一部のページでCSSがうまく機能しなくなり、レイアウトが崩れてしまったというものがあります。 これについては、原因は完全に特定できていないのですが、おそらく、元々のCSSファイルに文法的な誤りがあり、最小化が正しく行われなかったためではないかと推測しています。 したがって、こういった状況を生じさせないために、CSSやJavascriptの文法チェックを徹底することが必要かもしれません。

まとめ

さて、以上、PageSpeedの機能紹介から、実際の挙動やパフォーマンスの検証を行った結果をご覧いただきました。 最後に、もう一度、内容をおさらいしましょう。

1:PageSpeedはベストプラクティスに基づいた、さまざまな最適化を自動で行ってくれます

まとめついでに補足すると、機能という面では、Apache mod_pagespeedでも、リソースの最適化あたりは、似たようなことを行うことができます。 しかし、GAEのPageSpeedでは、Googleのインフラを使って、キャッシング・プロキシングをするという大きな利点があります。いずれにせよ、単純な静的コンテンツであれば非常に有効だと思います。

2: パフォーマンス測定も簡単に実施できるサイトがあります

WebPageTestでPageSpeedオン/オフでのパファーマンスの測定・比較が簡単にできます。

3: 問題の起きるページは設定などで回避

問題が起きるページは、設定でブラックリストに指定するなどして、回避しましょう。

Google のクラウドサービスについてもっと詳しく知りたい、直接話が聞いてみたいという方のために、クラウドエースでは無料相談会を実施しております。お申し込みは下記ボタンより承っておりますので、この機会にぜひ弊社をご利用いただければと思います。

無料相談会のお申込みはこちら