Blogger:Googleサイトの利用をやめて表示速度を改善する

前の関連記事：Blogger:外部ファイル置き場をGoogleドライブからGoogleサイトへ変更

Blogger:GTmetrixのWaterfallをみてページ速度向上を考えるでGoogleサイトに置いた外部ファイルの読み込みにはリダイレクトが2回も発生して表示速度の低下の原因になっていることがわかりました。もうGoogleサイトにファイルを置くのはやめることにします。

外部ファイルの中身を直接Bloggerに書き込む方法は2つある

いまの時点でGooleサイトから読み込んでいる外部ファイルは、以下の4種類になります。

①Blogger:SyntaxHighlighter(1)ブログにソースコードを綺麗に表示させるで導入したSyntaxHighlighterのcssとjsファイル

②SyntaxHighlighterにfleXcroll(1)カスタムスクロールバーを表示させるで導入したfleXcrollのcssとjsファイル

③Blogger:ページ番号付ページナビ(1)何ページ目を見ているのか一目でわかる方法で導入したページナビのjsファイル

④Blogger：ページビュー設定(8)jQueryで「自分のページビューを追跡しない」設定ページをスマートにで導入したjquery-cookie.jsファイル

Googleサイトを使わないためにはこれらのファイルの中身をBloggerの中のどこかに書けばよいわけです。

方法は2つあります。

1つは直接テンプレートのHTMLに書き込む方法です。

jsファイルの中身は<script></script>、cssファイルの中身は<style></style>でくくります。

<link href='shCore.cssのURL' rel='stylesheet' type='text/css'/>

これを以下に置き換えればいいわけです。

<style>
shCore.cssの中身
</style>

好きな場所に配置できるのであまり頭を使わずに済みます。

しかし、テンプレートのHTMLが長くなってすごく読みにくくなってしまいます。

さらに、JavaScriptはHTML EnCoder | Widget GeneratorsなどでHTMLエンコードしないといけないためさらにわかりにくくなります。

2つ目の方法は外部ファイルの中身を全部HTML/JavaScriptガジェットに入れてしまう方法です。

この方法はテンプレートのHTMLを汚しませんし、HTMLエンコードもしなくてもよいです。

ただガジェットに入れてしまうとどのガジェットにいれたのかわかりにくい、とか、バックアップを手動でしないといけない、という弱点はあります。

さらにdocument.write()で結果を出力しているJavaScriptは設置場所が移せないので、ガジェットには入れれない、などの問題があります。

HTML/JavaScriptガジェットに外部ファイルの中身を入れる

まず上の①②をまとめて1つのHTML/JavaScriptガジェットに入れてしまいます。

<link href='shCore.cssのURL' rel='stylesheet' type='text/css'/>
<link href='shThemeDefault.cssのURL' rel='stylesheet' type='text/css'/> 
<link href='flexcrollstyles.cssのURL' rel='stylesheet' type='text/css'/>

これが</head>の上にあります。

<script src='shCore.jsのURL' type='text/javascript'/>
<script src='shBrushXml.jsのURL' type='text/javascript'/>
<script src='shBrushCss.jsのURL' type='text/javascript'/>
<script src='shBrushJScript.jsのURL' type='text/javascript'/>
<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = false;
  SyntaxHighlighter.defaults['toolbar'] = false;
  SyntaxHighlighter.defaults['auto-links'] = false;
  SyntaxHighlighter.defaults['class-name'] = "flexcroll_height";
  SyntaxHighlighter.all();
  $(window).load(function () {
     $.each($('.flexcroll_height'), function(){$(this).height($(this).find("table").height()+17);});
     $('.flexcroll_height').addClass("flexcroll");
     });
</script>
<script src='flexcroll.jsのURL' type='text/javascript'/>

これが</body>の上にあります。

Blogger:SyntaxHighlighter(6)オートローダーを使う場合と使わない場合の表示速度の比較でオートローダーを使わないほうが速度が早くなることがわかったのでオートローダーの使用はやめています。IEへfleXcrollの対応は捨てました。

これらをすべて同じHTML/JavaScriptガジェットに入れてしまいます。

<style>
shCore.cssの中身。
shThemeDefault.cssの中身。
flexcrollstyles.cssの中身。
</style>
<script>
shCore.jsの中身。
shBrushXml.jsの中身。
shBrushCss.jsの中身。
shBrushJScript.jsの中身。
  SyntaxHighlighter.config.bloggerMode = false;
  SyntaxHighlighter.defaults['toolbar'] = false;
  SyntaxHighlighter.defaults['auto-links'] = false;
  SyntaxHighlighter.defaults['class-name'] = "flexcroll_height";
  SyntaxHighlighter.all();
  $(window).load(function () {
     $.each($('.flexcroll_height'), function(){$(this).height($(this).find("table").height()+17);});
     $('.flexcroll_height').addClass("flexcroll");
     });
flexcroll.jsの中身。
</script>

これをレイアウト画面でBlogger:「Powered by Blogger」の横に自動更新コピーライトを表示させたいで作ったウィジェットの上に配置したウィジェットにいれました。

(2015.3.23追記。圧縮されたものを貼り付ける場合は関係ありませんが、shCore.jsのソースをそのまま貼り付ける場合はコメントに「<script></script>」と書いている部分があってそれは削除しないといけません。それでもHTML/JavaScriptガジェットには容量制限があるようでshCore.jsは圧縮しないと途中で切れてしまって動きません。Blogger:圧縮ツールを使ってCSSとJavaScriptを圧縮するなどでCSSもJavaScriptも圧縮したほうがよいと思います。)

どうせwindowロードが終わった後にしか実行されないのでどこに置くかは深く考えないでよいかと思います。

1つのHTML/JavaScriptガジェットに<script></script>を複数書くと最初のスクリプトしか動きませんでしたのですべて一くくりにしています。

テンプレートのHTMLからコピペでコードをもってくるときはHTMLエンコードを元に戻しておかないといけません。

私はそれに気づかず時間を無駄にしてしまいました。

④はすべてのjQueryコードの最後にもってこないといけないので、レイアウト画面で一番下に新たにHTML/JavaScriptガジェットを追加して中身をいれました。

モバイルバージョンでもこれらのHTML/JavaScriptガジェットが動くようにするためには、Blogger：テンプレート編集(5)ウィジェットはインクルードの入れ物にあるように、ウィジェットのmobile属性をyesにしておかないといけません。

これも見落としがちですね。

テンプレートのHTMLに外部ファイルの中身を直接書き込む

③は結果をdocument.write()で出力しているために場所を移せません。

そのためテンプレートのHTMLに直接中身を書き込むことになります。
www.mybloggerblog.com.jsの中身をHTML EnCoder | Widget GeneratorsでHTMエンコードしておきます。

<script>
  www.mybloggerblog.com.jsの中身をHTMLエンコードしたもの。
</script>

これを以下と置き換えます。

<script type="text/javascript" src="www.mybloggerblog.com.jsのURL"></script>

体感速度は明らかに早くなった

SyntaxHighlighterやページ番号つきページナビの表示が明らかに速くなりました。

効果覿面です。

GTmetrixで再度Blogger:モバイルサイト(8)Bloggerのタグではウェブバージョンをモバイル端末からみていることを判別できずの速度を測定してみます。


Page Speed GradeがBだったのがAに改善しています。

参考にしたサイト

GTmetrix | Website Speed and Performance Optimization
解析結果のTimelineにあるWaterfallで外部ファイルの読み込み速度がわかります。

HTML EnCoder | Widget Generators
BloggerのテンプレートにJavaScriptを直接書き込むときはこのエンコーダが便利です。

次の関連記事:Blogger:圧縮ツールを使ってCSSとJavaScriptを圧縮する