Blogger:Navbarの負荷を考える-ページの読み込み時にどの程度影響を与えているか

イントロダクション

Google のブログサービス「Blogger」では、標準ではブログの上部に「Navbar」と呼ばれるバーが表示されます。

Blogger の Navbar (上部の黒い帯の部分)

Navbar では、以下のことが行えます。

共通操作

「http://www.blogger.com/」への移動
ブログ内をキーワードで検索
Google+ でおすすめ
メール・Twitter・Facebook で共有
不正行為を報告
次のブログ>> (ランダムで他の Blogger のブログにジャンプします)

Blogger のアカウント(Google アカウント)ログイン状態の場合

ログインアカウントの表示
ブログの新しい投稿を作成
Blogger のデザインの設定（テンプレート）へ移動
Google アカウントからログアウト

Blogger のアカウント(Google アカウント)非ログイン状態の場合

ブログを作成
ログイン

以下のページに、Blogger 公式の Navbar についての情報が記載されています。

Navbar について - Blogger ヘルプ
https://support.google.com/blogger/answer/42269?hl=ja

とても便利、ただしデメリットもあるNavbar

このように、Blogger のアカウントを持っている人にとっては便利なものであり、一般の閲覧者にとってもブログ内をキーワード検索できたりと、何かと便利な Navbar です。

私も、直ぐに自分自身のブログに新しい投稿を作成したいときや、デザインの編集画面（テンプレート）に直ぐに行きたい場合には、手軽に移動できるのでよく使っていました。

また、左上にあるブログ内を検索できる検索ボックスは、ブログを表示したらすぐに検索を実行できるので、非常に便利でした。

しかし、いろいろな機能が詰め込まれている分、ページ表示時に負荷を与えたり、ブログのデザインに制約を与えてしまうという側面もあります。

そのため、Blogger の利用者の中には、Navbar を消している人もいるようです。

Navbar を消す

昔は Navbar を消す方法が標準で用意されていなかったため、スタイルシートを定義して Navbar を表示しないようにするなどの方法により、Navbar を消していたようです。

Blogger の Navbar は隠してもいいらしい | クリボウの Blogger Tips
http://www.kuribo.info/2010/02/blogger-navbar.html

私自身もてっきり、Navbar を消すには、上記のようにスタイルシートを定義して消すか、テンプレートの HTML を弄って消すしかないのだと思っていたのですが、現在の Blogger には、Blogger の Navbar の設定の中に、Navbar をオフにするオプションがありました。

BloggerのNavbarを消す新しい方法。ガジェットで非表示にできるようになりました。 - くま同盟コンピュータLab
http://mac.kumadoumei.net/2012/06/bloggernavbar_25.html

[blogger]画面上部の『navbar』が手軽に消せるようになりました！利点もあるようですよ。 - Sunabox
http://www.sunabox.net/2012/06/bloggernavbar.html

Blogger の Navbar がブログ管理画面からオフにできるようになりました | クリボウの Blogger Tips
http://www.kuribo.info/2012/07/option-to-turn-off-blogger-navbar.html

[Blogger] 1分で出来る！画面上部の navbar を削除する(消す)方法 | Bloggerをカスタマイズするときに見るブログ
http://www.blogger-customize.com/2013/11/navbar.html

情報の日付から見て、2012 年頃にはできるようになっていたようですね。

このように設定で簡単に消せる Navbar ですが、消す前に Navbar がどの程度ページの読み込み時に負荷を与えているのか考えてみます。

Navbar によるページ読み込み時の負荷(HTML構造から調べる)

Navbar によるページ読み込み時の負荷を考えるため、まずは Chrome でページを読み込んだ後の Navbar 部分の要素の HTML を見てみましょう。

HTML を見るにあたって、読み込み時に負荷をかけると考えられる外部ファイルの読み込みや、script 処理に着目しました。

なお、すべての処理を追ってはいないので、あくまで概算です。
また、Navbar の状態は、Blogger (Google) アカウントでログインしていない状態とします。

これは、Blogger のサーバから配信されるソースコードとは異なり、JavaScript などの処理が反映された後の構造です。
(Chrome のデベロッパーツールの Elements タブのデータです。)

<div class="navbar section" id="navbar">
 <div class="widget Navbar" id="Navbar1">
  <script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener('load',
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent('onload', function(){ object[attribute] = val; });
      }
    }
  </script>
  <div id="navbar-iframe-container">
   <iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="" tabindex="0" vspace="0" width="100%" id="navbar-iframe" name="navbar-iframe" src="https://www.blogger.com/navbar.g?～省略～">
   </iframe>
  </div>
  <script type="text/javascript" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script>
  <script type="text/javascript">
        gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
          if (gapi.iframes && gapi.iframes.getContext) {
            gapi.iframes.getContext().openChild({
                url: 'https://www.blogger.com/navbar.g?～省略～',
                where: document.getElementById("navbar-iframe-container"),
                id: "navbar-iframe"
            });
          }
        });
  </script>
  <script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
  </script>
 </div>
</div>

一部、長い URL があったため、省略しました。
また、見やすいように一部改行やタブを入れています。

この HTML コードを見るとわかるように、ページ読み込み時の負荷の要因として、以下のタグが考えられます。

script 要素：
script タグは、計 5 つ確認できます。(インライン：3, 外部から読み込み：1, 動的に読み込み : 1)

外部から読み込まれる JavaScript ファイル：

https://apis.google.com/js/plusone.js

なお、インラインのスクリプトの中で、一番最後のスクリプトでは、動的に外部のスクリプトを読み込んでいます。

動的に外部から読み込まれる JavaScript ファイル：

//pagead2.googlesyndication.com/pagead/js/google_top_exp.js

上から 3 番目の script 要素では、外部の URL （https://www.blogger.com/navbar.g?～省略～）を保持して何らかの処理を行っていますが、今回は内部の処理を追っていません。（後述しますが、おそらく iframe を動的に生成していると思われます。）

iframe 要素：
iframe タグは、計 1 つ確認できます。（外部からの読み込み：1）

外部から読み込まれるファイル：
https://www.blogger.com/navbar.g?～省略～

iframe : https://www.blogger.com/navbar.g?～省略～の負荷

その外部から読み込まれたファイルの HTML データを詳しく見てみます。
(Chrome のデベロッパーツールの Elements タブのデータです。)

ただし、HTML のデータ量が多かったため、ここからは、外部からデータを読み込んでいると思われる要素と、script 要素のみ抜粋で紹介します。また、長い属性やパラメータを持つ部分なども省略しました。

スタイルシートで読み込まれる画像：
url('//img1.blogblog.com/img/navbar/icons_gray.png')
url('//img1.blogblog.com/img/navbar/icons_gray.png')
url('//img1.blogblog.com/img/navbar/icons_gray.png')
url('//img1.blogblog.com/img/navbar/arrows-black.png')
url('//img1.blogblog.com/img/navbar/arrows-black.png')
url('//img1.blogblog.com/img/navbar/icons_gray.png')

script/iframe :
<script src="https://apis.google.com/_/scs/apps-static/_/js/～省略～/cb=gapi.loaded_1" async=""></script>

<script src="https://apis.google.com/_/scs/apps-static/_/js/～省略～/cb=gapi.loaded_0" async=""></script>

<script type="text/javascript" async="" src="https://apis.google.com/js/platform:gapi.iframes.style.common.js" gapi_processed="true"></script>

<script type="text/javascript">
document.write("\x3ca id\x3d\x22b-query-icon\x22 onclick\x3d\x22document.getElementById(\x26quot;searchthis\x26quot;).submit();\x22 title\x3d\x22\u3053\u306e\u30d6\u30ed\u30b0\u3092\u691c\u7d22\x22\x3e\x3c/a\x3e");
</script>

<iframe ～省略～　src="https://apis.google.com/se/0/_/+1/fastbutton?～省略～" ～省略～></iframe>

<script type="text/javascript">
function closePopup(wnd) {

setTimeout(function() {
wnd.open('', '_self', '');
wnd.close();
}, 100);
}
</script>
<script type="text/javascript">
window.___gcfg = {
lang: "ja",
parsetags: 'onload'
};
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = "https://apis.google.com/js/platform:gapi.iframes.style.common.js";
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>

<iframe ～省略～ src="https://accounts.google.com/o/oauth2/postmessageRelay?～省略～" ～省略～></iframe>

以上のデータからわかるように、以下のデータが読み込まれています。

画像 : 計 2 つ
//img1.blogblog.com/img/navbar/icons_gray.png
//img1.blogblog.com/img/navbar/arrows-black.png

script : 計 7 つ(インライン：3, 外部から読み込み：3, 動的に読み込み : 1)
インライン：計 3 つ
なお、最後のインラインの script から動的に以下の外部 JavaScript が読み込まれています。
https://apis.google.com/js/platform:gapi.iframes.style.common.js

外部から読み込み：計 3 つ
https://apis.google.com/_/scs/apps-static/_/js/～省略～/cb=gapi.loaded_1
https://apis.google.com/_/scs/apps-static/_/js/～省略～/cb=gapi.loaded_0
https://apis.google.com/js/platform:gapi.iframes.style.common.js

iframe : 計 2 つ
https://apis.google.com/se/0/_/+1/fastbutton?～省略～
https://accounts.google.com/o/oauth2/postmessageRelay?～省略～

iframe : https://apis.google.com/se/0/_/+1/fastbutton?～省略～の負荷

この iframe は、中身の多さに疲弊したので、内容を詳しく見るのは諦めました。
気になる方は、是非 Chrome のデベロッパーツールで Navbar の HTML 構造を Elements タブで追ってみてください。

iframe : https://accounts.google.com/o/oauth2/postmessageRelay?～省略～の負荷

以下の 3 つの外部の JavaScript ファイルが読み込まれていました。

(Chrome のデベロッパーツールの Elements タブのデータです。)

HTML構造からみるページ読み込み時の負荷まとめ

以上をまとめて、ページ読み込み時の負荷になりそうな外部ファイルの読み込み、script の実行を列挙すると次のようになります。

画像 : 計 2 つ

//img1.blogblog.com/img/navbar/icons_gray.png
//img1.blogblog.com/img/navbar/arrows-black.png

script : 計 12 つ(インライン：6, 外部から読み込み：7, 動的に読み込み : 2)

https://apis.google.com/js/plusone.js
//pagead2.googlesyndication.com/pagead/js/google_top_exp.js
https://apis.google.com/js/platform:gapi.iframes.style.common.js
https://apis.google.com/_/scs/apps-static/_/js/～省略～/cb=gapi.loaded_1
https://apis.google.com/_/scs/apps-static/_/js/～省略～/cb=gapi.loaded_0
https://apis.google.com/js/platform:gapi.iframes.style.common.js
https://apis.google.com/js/api.js
https://oauth.googleusercontent.com/gadgets/js/core:rpc:shindig.random:shindig.sha1.js?c=2
https://ssl.gstatic.com/accounts/o/～省略～-postmessagerelay.js

iframe

https://www.blogger.com/navbar.g?～省略～
https://apis.google.com/se/0/_/+1/fastbutton?～省略～
https://accounts.google.com/o/oauth2/postmessageRelay?～省略～

以上の、外部から読み込まれるファイル数を合計すると、

画像(2) + script(8) + iframe(3) = 13 ファイル

となります。
（script の外部ファイルには一つ重複があるので、その分を減算）

なお、iframe : https://apis.google.com/se/0/_/+1/fastbutton?～省略～の中身の解析は諦めたので、これ以上のファイルが読み込まれていることになります。

なお、Google+ のボタンなどのファイルは、ブログ内の他の箇所で、同じようなデータを読み込んでいれば、キャッシュによってファイルをサーバに取りに行っていない可能性はあります。

こうしてみると、Navbar だけで、かなりのファイルをロードしていることがわかります。

参考：Blogger サーバから配信されたソースコード

なお、Blogger のサーバから配信された状態（ソースコード）では、Navbar の部分のコードは次のようになっていました。

<div class='navbar section' id='navbar'>
 <div class='widget Navbar' id='Navbar1'>
  <script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener('load',
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent('onload', function(){ object[attribute] = val; });
      }
    }
  </script>
  <div id="navbar-iframe-container"></div>
  <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> </script>
  <script type="text/javascript">
        gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
          if (gapi.iframes && gapi.iframes.getContext) {
            gapi.iframes.getContext().openChild({
                url: 'https://www.blogger.com/navbar.g?～省略～',
                where: document.getElementById("navbar-iframe-container"),
                id: "navbar-iframe"
            });
          }
        });
      </script>
  <script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
  </script>
 </div>
</div>

これは、Chrome のデベロッパーツールの Elements タブでみたときの HTML 構造とほとんど一致します。
主な違いとしては、Blogger サーバから送信されたソースコードには iframe がないのに、Chrome のデベロッパーツールの Elements タブでみたときには iframe がある点でしょうか。

（差分をとって確認してみました。）

Blogger サーバから送信されたソースコードと
Chrome のデベロッパーツールの Elements タブの HTML 構造の違い

左側がBlogger サーバから送信されたソースコード
右側がChrome のデベロッパーツールの Elements タブの HTML 構造

そのため、その iframe は JavaScript で動的に作成していることが分かります。

Navbar によるページ読み込み時の負荷(実際のブラウザでの読み込みから調べる)

上記の、HTML 構造から調べるでは、一部の iframe 内の解析を諦めたことや、すべての負荷の考慮ができないことなどがあるため、実際のブラウザでの読み込みから、Navbar によるページ読み込み時の負荷を考えてみることにしました。

調査方法

Chrome のデベロッパーツールの Network タブにて、Navbar がある場合とない場合とで、読み込まれるファイルの数や、読み込みが完了するまでの時間を調査します。

なお、調査に使用した Blogger ブログは、このブログではなく、別途保持しているBloggerブログです。

そのブログでは、テンプレート(Simple テンプレート)のカスタマイズをしておらず、Blogger の標準の画面構成となっています。

そして、外部の広告などの外部ソースも挿入していないため、測定するタイミングによって転送データ量や読み込まれるファイル数に違いは出ないはずです。

実験はそのBloggerブログのトップページに対して行いました。
Navbar の状態は、Blogger (Google) アカウントでログインしていない状態とします。

測定は、特異なデータを見分けられるように、3 回測定することにします。

実行環境

実行環境は、私のメインノートPC {Core 2 Duo P8600 (2.40 GHz)、メモリー 4GB(DDR2 800/2GBx2)} です。

Chrome のバージョンは、バージョン 40.0.2214.115 m です。

Chrome はシークレットウィンドウを使用し、ページの読み込みにはスーパーリロードを使用して、キャッシュからの読み込みが行われないようにしました。

Navbar のある・なしの設定方法

Blogger のレイアウトの Navbar の設定にて、オフを選択しました。

この方法により、Navbar をオフにすると、Navbar の部分の HTML は次のようになっていました。

<div class='navbar section' id='navbar'>
</div>

従って、Navbar のコードがソースコードに出力されていないことが分かります。
これは、Navbar がスタイルシートなどによって単純に見えていないのではなく、コード自体が消えているため、Navbar をオフにすると、その Navbar 分丸ごと処理の負荷が無くなることを意味しています。

測定結果

Navbar がある場合

Navbar がない場合

Navbar がある場合・ない場合のまとめ

Navbar がある場合

	requests	transferred (MB)	time (s)	load (s)	DOMContentLoaded (s)
1回目	63	1.0	3.33	3.38	1.28
2回目	63	1.0	2.65	2.74	0.895
3回目	64	1.0	2.79	2.87	0.931
平均	63	1.0	2.92	3.00	1.04

Navbar がない場合

	requests	transferred (MB)	time (s)	load (s)	DOMContentLoaded (s)
1回目	46	0.870	2.08	2.01	0.850
2回目	45	0.837	1.86	1.78	0.772
3回目	45	0.835	2.00	1.93	0.838
平均	45	0.847	1.98	1.91	0.820

この結果より、Navbar が無い場合の方が、ある場合よりも、

requests : -18
transferred : -0.153 MB
time : -0.94s
load : -1.09s
DOMContentLoaded : -0.22s

となります。

従って、明らかに Navbar が無い方が動作は軽くなるでしょう。

Navbar によるページ読み込み時の負荷(GTmetrix で調べる)

上記の、Navbar によるページ読み込み時の負荷(実際のブラウザでの読み込みから調べる)のデータを補足するため、更に GTmetrix でも調査しました。

上記の私の環境のブラウザで測定した場合と、GTmetrix で測定した場合とでは、ネットワークの状況や処理するコンピュータの性能、データの処理系などが異なるため、多少の違いが見える可能性があります。

GTmetrix を使い、Navbar がある場合とない場合とで、読み込まれるファイルの数や、読み込みが完了するまでの時間を調べました。

調査方法

Navbar によるページ読み込み時の負荷(実際のブラウザでの読み込みから調べる)と同じです。

Navbar のある・なしの設定方法

Navbar によるページ読み込み時の負荷(実際のブラウザでの読み込みから調べる)と同じです。

測定結果

Navbar がある場合

1 回目
Summary
APage Speed Grade:(91%)
BYSlow Grade:(80%)

Page load time: 3.12s
Total page size: 683KB
Total number of requests: 49

2 回目
Summary
APage Speed Grade:(91%)
BYSlow Grade:(80%)

Page load time: 3.10s
Total page size: 687KB
Total number of requests: 49

3 回目
Summary
APage Speed Grade:(91%)
BYSlow Grade:(80%)

Page load time: 2.97s
Total page size: 669KB
Total number of requests: 47

Navbar がない場合

1 回目
Summary
APage Speed Grade:(92%)
BYSlow Grade:(83%)

Page load time: 2.39s
Total page size: 551KB
Total number of requests: 36

2 回目
Summary
APage Speed Grade:(92%)
BYSlow Grade:(83%)

Page load time: 2.87s
Total page size: 554KB
Total number of requests: 36

3 回目
Summary
APage Speed Grade:(92%)
BYSlow Grade:(83%)

Page load time: 2.83s
Total page size: 551KB
Total number of requests: 36

Navbar がある場合・ない場合のまとめ

Navbar がある場合

	Page load time(s)	Total page size(KB)	Total number of requests
1回目	3.12	683	49
2回目	3.10	687	49
3回目	2.97	669	47
平均	3.06	680	48

Navbar がない場合

	Page load time(s)	Total page size(KB)	Total number of requests
1回目	2.39	551	36
2回目	2.87	554	36
3回目	2.83	551	36
平均	2.70	552	36

この結果より、Navbar が無い場合の方が、ある場合よりも、

Page load time(s)	Total page size(KB)	Total number of requests
-0.37	-128	-12

となります。

従って、Chrome ブラウザで確認した時と同様に、明らかに Navbar が無い方が動作は軽くなるでしょう。

まとめ

Navbar は内部で画像・外部スクリプト(script)・外部ファイル(iframe)を複数読み込んでいることが分かりました。

その結果、Navbar がある場合よりも、無い場合の方が、サーバへのリクエスト回数が少なく、読み込まれるデータ量が少なく、読み込み時間が短いということが分かりました。

もし、Blogger ブログの読み込みが遅くなって困っている場合には、Blogger の Navbar をオフにすることを検討してみても良いかもしれません。

Dr.ウーパのコンピュータ備忘録

2015年2月25日水曜日