views4GCPのストレージサービスについてまとめてみた。Exp:49212雑食エンジニア/にわかSF者TweetShareHatena注意この記事は2014年5月15日に更新されたもので、内容が古い可能性がありますのでご注意ください。皆さんはPageSpeedというサービスをご存知でしょうか?PageSpeedは、ウェブページのレイテンシを向上させるサービスで、GAEで利用するにはこれまで有料だったのですが、先日の価格変更のタイミングで無料になりました。いい機会なので、今回はPageSpeedについて、初心者向けの基本的な使い方等を調べてみました。以下のような構成でお届けします。設定のカスタマイズパフォーマンスの測定PageSpeedを使用する際の注意事項まとめそれでは、早速、本題に入ってきましょう。ちなみに、PageSpeedはApacheのモジュールとして提供されているものなどもありますが、今回はGAEにて設定のみで利用出来るというサービスについての調査です。他の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をダウンロードして用いています。/></body></html>ここで、レポンスの内容を確認する前に、どのような最適化が行われるのかを予想してみました。Images”に書かれているように、画像のパスが*-ps.googleusercontent.comというドメインのホストにキャッシュされたものに置き換わるという2つが適用されるのではないでしょうか。実際にPageSpeedをオンにして返ってきたレスポンスの内容を見てみましょう。type=...(省略1’)</script></body></html>3行目を見ると、1-ps.googleusercontent.comというホストにキャッシュされた画像を参照していることと、ファイルの拡張子から、画像がJPEGからWebPに変換されたらしいということがわかります。(ちなみに、もとのJPEGファイルはサイズが約580KBでしたが、WebPは約115KBでした。)また、上記では省略した、いくつかの変更もあります。これらについては、簡単な説明と公式ドキュメントへのリンクを提示するだけにとどめます。省略1および1’:ページの読み込み時間測定用のJavascript(https://developers.google.com/speed/pagespeed/service/LatencyMeasure)省略2:ドメイン名をあらかじめ解決する仕組み(https://developers.google.com/speed/pagespeed/service/PreResolveDns)省略3:metaタグによるレスポンスヘッダの追加(https://developers.google.com/speed/pagespeed/service/OptimizeHtml#ConvertMetaTags)設定のカスタマイズPageSpeedを用いる際に、設定をカスタマイズして、一部の機能をオフにするといったことも可能です。開発言語にJavaを用いている場合、appengine-web.xmlを編集することで、設定を変更することができます。具体的には、<appengine-web-app>要素の中に以下のような要素を追加します。コード<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>それぞれの要素で次のようなことを指定できます。<domain-to-rewrite>PageSpeedを適用するドメインを指定できます。自分のアプリケーションのドメイン以外にも、外部の画像ホスティングサービスを指定して、画像をキャッシュするということもできるようです。<url-blacklist>指定したURLにはPageSpeedを適用しないようにすることができます。*はワイルドカードとして使用できます。<disabled-rewriter>どの機能(rewriterと呼ばれています)をオン/オフにするかを指定できます。rewriterにはデフォルトでオンのものと、そうでないものがあります。rewriterの名前、デフォルトでオンなのかはこちらで確認してください。上で試したHTMLの例で、設定を変更して検証してみましょう。appengine-web.xmlに、次のような設定を追加して確認しました。コード<pagespeed><disabled-rewriter>WebpOptimization</disabled-rewriter></pagespeed>アプリケーションをデプロイし、ブラウザのキャッシュを削除してから、再度アクセスして返ってきたレスポンスがこちらです。type=...(省略1’)</script></body></html>4行目の拡張子を見ると、WebPではなくJPEGになっていることがわかります。このJPEGには何らかの最適化がなされているのでしょうか?変換された画像ファイルxneko.jpg.pagespeed.ic.zkbCxcJNsq.jpgをダウンロードして、Linuxのrdjpgcomコマンドで確認してみました。もとの画像ファイルneko.jpgを見てみましょう。以下はLinuxのターミナルで実行したコマンドとその結果です。Baselineこちらは普通のJEPGファイルですね。変換された画像ファイルはどうでしょうか。JPEG形式になっていることがわかります。ファイルサイズを確認すると、元のファイル約580KBに対し、変換された画像は約170KBになっていました。実際の画像ファイルはこちら。元のJPEGファイル最適化されたJPEGファイルパフォーマンスの測定さて、それでは実際にはどの程度の効果があるのでしょうか?WebPageTestというサイトでPageSpeedをオン・オフにした時のパフォーマンスを測定・比較することができます。TEST」ボタンを押すだけです。すると、測定実行中であることを示すページに遷移し、(測定するページのコンテンツにもよるかと思いますが)数分待つと結果ページが表示されます。上のスクリーンショットを見てみましょう。Indexが表示され、さらに実際どのような見え方をするのかを比較した動画が見られます。PageSpeedによって、読み込み時間が1.503秒から0.611秒へと、半分以下に短縮できたことがわかります。SpeedIndexも小さい値のほうが良いのですが、かなり減らすことができています。このページのリンクから、さらに詳細な測定結果を見ることができますので、興味のある方はご覧ください。PageSpeedを使用する際の注意事項ここまでの内容で紹介したように、PageSpeedを使えば、手軽にレイテンシを向上させることができますが、リソースの書き換えを行うので、その結果、サイトが意図した挙動をしなくなってしまう可能性があります。Javascript)が挙げられます。Javascriptの説明ページにも、最初にWarningが表示されており、リスクの大きい機能であると説明されています。この機能はデフォルトではオフになっています。Javascriptをオンにしつつ、その適用範囲を制限するために、「設定のカスタマイズ」で紹介したような方法で、url-blacklistを指定する他に、以下のようにpagespeed_no_defer属性をscript要素に付け加えるという方法もあるようです。pagespeed_no_defer="">...</script>また、その他の機能によっても、意図しない不具合が生じることもあります。実際に目にした例では、PageSpeedをオンにしたら、一部のページでCSSがうまく機能しなくなり、レイアウトが崩れてしまったというものがあります。これについては、原因は完全に特定できていないのですが、おそらく、元々のCSSファイルに文法的な誤りがあり、最小化が正しく行われなかったためではないかと推測しています。したがって、こういった状況を生じさせないために、CSSやJavascriptの文法チェックを徹底することが必要かもしれません。まとめさて、以上、PageSpeedの機能紹介から、実際の挙動やパフォーマンスの検証を行った結果をご覧いただきました。最後に、もう一度、内容をおさらいしましょう。mod_pagespeedでも、リソースの最適化あたりは、似たようなことを行うことができます。GAEのPageSpeedでは、Googleのインフラを使って、キャッシング・プロキシングをするという大きな利点があります。いずれにせよ、単純な静的コンテンツであれば非常に有効だと思います。パフォーマンス測定も簡単に実施できるサイトがありますWebPageTestでPageSpeedオン/オフでのパファーマンスの測定・比較が簡単にできます。問題が起きるページは、設定でブラックリストに指定するなどして、回避しましょう。