QooQ適用のBloggerでcss_bundle_v2.cssをインライン化

6月7日の記事で、「このブログにQooQというテンプレートを適用して、表示速度を高速化した」と書いている。しかし、それでもモバイルの表示速度は2.1秒かかっていて、まだまだ高速化が図られそうだった。PageSpeed Insightsで何が表示速度の高速化を阻害しているかを調べたところ、css_bundle_v2.cssという外部読み込みcssが表示高速化の阻害要因であることがわかった。それで、ネットで色々調べて、BloggerのHTMLを改造してみたのだが、なかなかうまくいかない。表示速度は改善されるのだが、ブログパーツに編集ボタンが出たり、レイアウトが崩れたりするのである。最終的に、下記の通りの設定をしてみたところ、うまく行った感じなので、忘備録としてここに書いておきたい。なお、表示速度はTest My Siteで測ったところ、1.5秒まで高速化できている。

QooQ適用のBloggerでcss_bundle_v2.cssをインライン化する方法

PageSpeed InsightsでBloggerを測定するとcss_bundle_v2.cssが表示速度の向上を阻害していると表示が出るので、このURLをクリックし、別ウインドウ(もしくは別タブ)でcssの中身を表示しておく。
Bloggerの「テーマ」-「カスタマイズ」-「HTMLの編集」でHTMLを表示し、<html>タグにb:css=’false’を書き込む。書き込み方は、<html b:css=’false’ ~>のようにする。これでcss_bundle_v2.cssは読み込まれなくなるが、表示が崩れたり、ブログパーツに編集マークが出てきてしまう。
先に開いておいたcss_bundle _v2.cssの中身を全て選択し、コピーして<b:skin><![CDATA[の直前あたりに貼り付ける。
これだとcssの中身だけを貼り付けた状態なので、貼り付けたcss_bundle _v2.cssの前と最後を<style type=’text/css’>貼り付けたcss</style>で囲い込む。
これで、cssのインライン化ができ、かつ表示崩れや編集マークの表示が消える。