Google ドライブのホスト機能が使えなくなった
の投稿で、遅いと思われるが、調べてみる必要がある旨を書きましたので、今回、BloggerからGDriveのファイルをHostする場合の速度について検証してみました。
画像の多いアーカイブのページをGTmetrixで計測
画面の表示時間にはっきり影響が見られるくらい突出して足を引っ張っています。割とサイズの近いものや、より大きいものとのみ比較しても確実に遅い。
これは一番最初に測定した結果ですが、何度か試して見ると、これほど遅くはないという結果もあって、ばらつきがみられました。
下は比較的速かった結果。キャッシュは外部サイトからのアクセスなので、関係ないとは思いますが、一応削除して計測しました。
Picasa ウェブ アルバムとGoogle Driveの比較
今度は、同じ投稿内に大きめの同じJpegファイルを、Picasa Web Albums と GDrive から貼り付けた比較です。
ブロガー以外から呼び出した結果
こちらも、バラツキがありましたが、Picasa とも差が付いているのがわかります。
キャッシュがあるなしの比較
キャッシュが効いている場合はどうなるかを、Firebugで測定。
データが揃いませんでしたが、大体これくらいの数値。
劇的に速くなっているものの、 データ受信0で 304 Not Modified の返事をもらうだけにしては、時間が掛かりすぎていると思います。
SVGのデータをHTMLに埋め込んだ場合との比較
ページを移動するとインラインではデータの再取得が必要、Google ドライブに置いた場合はキャッシュが効きます。
ページが異なるので、比較用に同じコンテンツのみを一部抽出。
ページを表示
ページを移動
サイズが増える、キャッシュが効かない不利を背負ってでも、インラインに埋め込んだほうが速い。
このブログは、検索からのアクセスがほとんどなのに対して、同じカテゴリーのサイト(free.)は、同じかたが何十回とクリックしてくれます。そのようなサイトで、しかももっと巨大な共通ファイルを使う場合は、もしかしたらメリットがあるかもしれません。だだ、その場合でも、どちらを選択するかと言われればインラインに記述すると思います。
Googleドライブ その他の検証
http://googledrive.com/host/ へ接続して改善を試みるも、https://googledrive.com/host/ へリダイレクトされてしまい不可。
Google siteにおいた場合も、同じサーバーを使ってるようにそっくりな結果でした。
検証されているサイトを見つけましたので、そちらも参考にさせてもらいました。
BLOGGER ITEMS さん
Blogger host and direct embedded CSS / Javascript comparison
JavascriptとCSSをインラインとGDriveに外部データとして置いた場合の、ページ表示の速度を比較されています。
内容の上の方は、host機能の使い方なので飛ばしてもらって、下の方の、Comparing host and direct embedded code speedのところになります。
上の図が、Google Driveにファイルを置いた場合。下がHTML内に記述したの場合のPageSpeed Insightsの結果です。
| Google Drive | 47/100 |
| テンプレート内 | 84/100 |
個々のデータについては、触れられていませんが、ここまで差が付くと、そこまで検証するまでもなく結論は明らかと思います。
貼り付け画像は表示の遅れが見て取れますが、CSSやJavascriptの場合は、おそらく「ズ～～～」（なにも表示されない時間）→「パッ」（レンダリングは一瞬）となるはずです。
結びの内容と同じ意見なので、引用させてもらいます。
結論
Google Drive にCSSやJavascriptを外部ファイルとして置くような使い方は決してすべきでない。
Blogger のtemplate codeに記述できないもののみに利用すべきだ。例えば、flashや動画など…