2018年7月13日金曜日
ウズマスター戦記
ウズマスター戦記 https://www.uzumax.org/2018/07/bloggercssbundlev2css.html

Bloggerのcss_bundle_v2.cssを除去してインライン化する

最近、管理人はSEOを自力で頑張っています。

その一環として「css_bundle_v2.css」の消去を行いましたので、手順の解説です。

問題の検知

サイトの評価を高める為の要素として「表示速度」があるわけですが、サイトの表示速度を確認してくれるツールがこちら、Google提供の「PageSpeed Insights」です。
自分のブログの表示速度はどんなもんかと思って計測してみました。


css_bundle_v2.cssは遅延の原因と指摘

私のブログ「ウズマスター戦記」を計測した結果がこちら。

css_bundle_v2.cssがサイトを遅くしている

指摘対象に「css_bundle_v2.css」が出てきてしまいました。。。

css_bundle_v2.cssとは何か?

css_bundle_v2.cssは、Bloggerに最初から入っている基本のスタイルシートです。

HTMLソースを見ると、最初も最初。
headerの直後に入っているんですね。
これがいけないのです。

HTMLソース中のcss_bundle_v2.css

これをインラインに変更すれば解決するはずです。

HTMLの編集の中にcss_bundle_v2.cssが無い

ところが、「テーマ→HTMLの編集」に行ってもcss_bundle_v2.cssの記述が無いんです。

css_bundle_v2.cssの記述が無い

どうやらcss_bundle_v2.cssはHTMLの編集で設定しているのではなく、Bloggerが勝手に挿入してくるもののようですね。

参ったな。。。

<head>タグを置換することで対応可能

対応方法はこちらのサイトが参考になりました。


どうやら、Bloggerのcss_bundle_v2.css自動挿入機能は「<head>の下」というロジックで作動しているようです。

だから「<head>」を「&lt;head&gt;」に差し替えればロジックが作動しなくなるということです。
何か裏技みたいなやり方ですが、これに従ってやっていきましょう。

Bloggerのcss_bundle_v2.cssのインライン化作業実施

では、作業を開始します。

css_bundle_v2.cssの中身のチェック

css_bundle_v2.cssをただ消すだけだとレイアウトが崩れてしまうので、css_bundle_v2.cssの中身を直接HTMLに書くインライン化により速度改善を施したいと思います。

従って、最初にcss_bundle_v2.cssの中身を確認。

css_bundle_v2.cssは「パソコン用」と「モバイル用」の2つがあるので、両方の中身をコピー出来る状態にて下さい。

それぞれのcssのURLは以下です。

  • パソコン用:https://www.blogger.com/static/v1/widgets/2437439463-css_bundle_v2.css
  • モバイル用:https://www.blogger.com/static/v1/widgets/1171200566-widget_css_mobile_2_bundle.css

上記は私のcss_bundle_v2.cssのパスです。
URLは個人毎に違うので各自URLを書き換えて下さい。

インライン化してもcss_bundle_v2.cssそのものが消えてしまうわけではないので、URLだけ分かっていれば大丈夫です。

<head>タグの書き換え

「<head>」と「</head>」を置換します。

置換前

<head>
 ………
</head>

置換後

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

この「<!--<head/>-->」は必要なのか?って話ですが、
こうしておかないと「The theme must include a "<head>" tag.」なんてエラーが出てきますので必須です。
コメントアウト状態で「<head/>」を入れることでBloggerのチェック機構を誤魔化しているわけですね。
裏技です。

これでひとまず、css_bundle_v2.cssが除去された状態になります。

インライン貼り付け

このままではレイアウトが壊れた状態ですので、css_bundle_v2.cssの中身をコピペして持ってきます。

以下のロジックでパソコン用とモバイル用を分けて張り付けて下さい。

<b:if cond='data:blog.isMobile'>
  <!-- モバイル用のcss_bundle_v2.css -->
  <style type='text/css'>
    [モバイル用のcssをここに貼り付け]
  </style>
<b:else/>
  <!-- パソコン用のcss_bundle_v2.css -->
  <style type='text/css'>
    [パソコン用のcssをここに貼り付け]
  </style>
</b:if>

張り付ける場所は、元々のheadタグ直下でも問題ありませんが、個別カスタム用cssを記述している「<b:skin>」の直前にした方が、cssが纏まった形になるので良いでしょう。

CSSを挿入

これにて作業完了です。

結果をチェック

さあ、これで問題が改善したはずです。
再測定してみましょう。



やったね!!

0 件のコメント:

コメントを投稿

お気軽にコメント下さい。