Bloggerの表示速度を高速化するためbundle.cssを内部化してみた

2017年3月1日水曜日

Bloggerの表示速度を高速化するためbundle.cssを内部化してみた

Google Search Consoleの「その他のリソース」の中に「PageSpeed Insights」というツールがあり、すべての端末でウェブページの読み込み時間を短くする方法がわかります。

実際、計測してみたところ、下記のような改善項目がありました。

＜モバイル＞

パフォーマンスが大幅に改善する項目
次のCSS 配信を最適化してください
https://www.blogger.com/static/v1/widgets/2143686045-widget_css_mobile_2_bundle.css
https://www.blogger.com/dyn-css/authorization.css?targetBlogID=ブログID...

＜PC＞

パフォーマンスが大幅に改善する項目
次のCSS 配信を最適化してください
https://www.blogger.com/static/v1/widgets/4243091423-css_bundle_v2.css
https://www.blogger.com/dyn-css/authorization.css?targetBlogID=ブログID...

上記のCSSをいったん無効化したうえで、内部化して改善してみました。

無効化の参考にしたのは下記ページになります。
How to Remove Widget CSS Bundle File from Blogger

無効化の方法

テンプレートのHTML編集にて<head>タグを検索し下記に置き換える。

&lt;head&gt;

</head>タグを検索し下記に置き換える。

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

内部化の方法

4243091423-css_bundle_v2.cssをダウンロードをする。
2143686045-widget_css_mobile_2_bundle.cssをダウンロードする。
authorization.cssをダウンロードする。
テンプレートのHTML編集にて<b:skin>を検索し、直前に下記コードを追記する。

<b:if='cond="data:blog.isMobile'>
<!--モバイル環境の場合-->
<style type='text/css'>
//2143686045-widget_css_mobile_2_bundle.cssの内容
//authorization.cssの内容
</style>
<b:else/>
<!--PC環境の場合-->
<style type='text/css'>
//4243091423-css_bundle_v2.cssの内容
//authorization.cssの内容
</style>
</b:if>