こんにちは！

ようやくサイトの準備が終わりました。案外早く終わって嬉しいです。Blogger 用のタグが結構大変でした。未だによくわからないのですが、どのページもちゃんと表示できているからまあいいですね。ああ、でもそういえばまだ各投稿でのラベル表示（他のブログでいうところのカテゴリーやタグ）とサイト内の検索機能が使えないんです。カスタムテンプレート完成はもう少し先ですね。特に書くこともないのでとりあえず Blogger のテンプレート編集に使えそうなネタを載せておきます。

  1. 勝手に読み込まれるスクリプト
  2. 外部 CSS はレンダリングを遅くする

#01

勝手に読み込まれるスクリプト

css_bundle_v2.css, auhtorization.css, plusone.js


Blogger には勝手に読み込まれるスクリプトとスタイルシートが存在します。css_bundle_v2.css と auhtorization.css と plusone.js です。どれもなかなかサイズが大きい上に、読み込みにかかる時間だけページのレンダリングに遅延が生じます。これらはタグの一部を書き換えることで解決します。

CSS_BUNDLE_V2.CSS と AUTHORIATION.CSS の消し方

Blogger 独自のタグ <b:skin> の前に次のようにコードを追加しましょう。改行の場所はどこでも問題ありません。<b:if> を使って CSS を複数記述したい場合や外部から CSS を読み込みたい場合は次のように、STYLE タグを使って記述しましょう。

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>

<style type='text/css'> ...CSS... </style>

PLUSONE.JS の消し方

終了タグ </body> を次のコードに置き換えましょう。

&lt;!--</body>--&gt; &lt;/body&gt;

#02

外部 CSS はレンダリングを遅くする

CSS, JavaScript


外部から CSS や JavaScript を読み込む場合、それらのダウンロードと処理が完了するまでレンダリングがブロックされるようです。Google はこの対処法として、レンダリングをブロックするリソースの読み込みを遅延させる、非同期に読み込む、これらのリソースの重要部分を HTML 内に直接インライン化する、の 3 つを挙げていますが、よくわからないので #01 勝手に読み込まれるスクリプト で書いた STYLE タグの中に CSS を全部書き込みました。

JavaScript も全て XML の中に書き込みましたが、JavaScript を記述する場合は SCRRIPT タグを少し変える必要があります。CDATA セクション内では、XML でマークアップ用として指定された記号を直接文字として記述することができます。

<script type='text/javascript'>//<![CDATA[
...JavaScript...
//]]></script>