Blogger:plusone.jsは遅いけどどうしようも対策できない

前の関連記事：Blogger:関連記事一覧を自動的に表示させるガジェットの画像のサイズを指定する

表示速度向上のためにいろいろと手を打ってきました。対策が進むにつれGoogleの+1ボタンを表示するplusone.jsの読み込みの遅さが際立ってきたので対策を考えます。

DOMロード時間を延長させているのはGoogle+1ボタンのJavaScript?

下から2番目の突出しているのがGoogle+1ボタンのplusone.jsの読み込みです。

ナビバーを消してもplusone.jsの呼び出しが消せない

Blogger：ソーシャル(SNS)ボタンをつける(忍者おまとめボタンを利用)で導入した忍者おまとめボタンにGoogle+1ボタンがあるため、ナビバーにある共有ボタンは不要です。

そこでplusone.jsの読み込みを消せば解決すると考えました。

テンプレートのHTML内でplusone.jsが登場するのはNavbar1ウィジェット内の1箇所のみです。

    <b:widget id='Navbar1' locked='false' title='Navbar' type='Navbar'>
      <b:includable id='main'>&lt;script type=&quot;text/javascript&quot;&gt;
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener(&#39;load&#39;,
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
      }
    }
  &lt;/script&gt;
&lt;div id=&quot;navbar-iframe-container&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;

13行目にでてきます。

まずはレイアウト画面で右上にあるNavbarウィジェットの編集をクリックしてNavbarの表示を「オフ」にしてみました。


これで「保存」してGTmetrixのTimelineのWaterfallをみてみると相変わらずplusone.jsが呼ばれています。


テンプレートのHTML内の先ほどの13行目をコメントアウトしても同じ結果です。

Navbarウィジェットの<b:includable id='main'>の中身を全部コメントアウトしても同じ結果です。

どうやらplusone.jsはNavbar以外からも呼ばれているようです。

plusone.jsはページのソースをみると3箇所もでてくる

Chromeで右クリック→ページのソースを表示、でソース内をplusone.jsで検索するとなんと2箇所もでてきます。

Navbarの表示をしていると3箇所もでてきます。

Navbarからの呼び出しはNavbarをオフにするとなくなります。

残る2箇所はここ。


ここはどこ？

テンプレートでいうとこのあたり。

<!-- モバイルサイトでスワイプでページ移動を無効にするここまで -->
<b:include data='blog' name='google-analytics'/>
</body>

<b:include data='blog' name='google-analytics'/>をコメントアウトして結果はかわらないので呼び出しているのはgoogle-analyticsではないようです。

忍者おまとめボタンをコメントアウトしても同じ結果です。

ソースに3箇所出現していてもWaterfallでみてみるとplusone.jsが呼び出されるのは1回だけです。

どこから呼び出されるのかわかれば+1 ボタン - Google+ Platform — Google Developersをみて非同期してみれば速度が改善できるかもしれません。

でもどこから呼び出されているのかわからなければどうしようもありません。

参考にしたサイト

GTmetrix | Website Speed and Performance Optimization
TimelineのWaterfallで足をひっぱっている原因をさがします。

+1 ボタン - Google+ Platform — Google Developers
非同期読み込みの方法も載っています。