メニュー

メニュー

2017年3月1日水曜日

Bloggerの表示速度を高速化するためbundle.cssを内部化してみた | 日々のメモ帖 by holidaybuggy1980 holidaybuggy1980
300 300

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

無効化の方法

  1. テンプレートのHTML編集にて<head>タグを検索し下記に置き換える。
&lt;head&gt;
  1. </head>タグを検索し下記に置き換える。
&lt;/head&gt;&lt;!--<head/>--&gt;

内部化の方法

  1. 4243091423-css_bundle_v2.cssをダウンロードをする。
  2. 2143686045-widget_css_mobile_2_bundle.cssをダウンロードする。
  3. authorization.cssをダウンロードする。
  4. テンプレートの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>

注意 


  • CSSのファイル名は自分の環境におけるファイル名のため、環境によって違うファイル名になっていることもありますので注意願います。
  • 無効化のみを行うと、表示が崩れますので内部化を行うか、自分でCSSを編集してください。

以上、参考にしていただけたら幸いです。

2 件のコメント:

  1. 大変参考になりました。
    ありがとうございました。

    返信削除
    返信
    1. アクセスありがとうございます。参考になって何よりです。

      削除