ソースを表示すると見えるのに、HTMLテンプレートの編集から見えない現象について

Question

Bloggerというブログサービスでブログを運営しており、記事数が増えたことや読み込む
jQueryが増えたことで、サイトの読み込み速度が遅くなりました。
そこでGoogle Developers PageSpeed Insights でチェックしてみてCSSのインライン化や外部化、
jQueryの重複を削除したり・・と体感できるくらいの軽量化が出来たのですが。

PageSpeed Insightsによれば・・

https://www.blogger.com/static/v1/widgets/ブログID-widget_css_bundle.css' />

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=ブログID' />

という項目が重たいので最適化してください言われるのでBloggerのテンプレート編集にて
探そうとするのですが一向に見つかりません。

しかし、ブログに行って右クリックでソースを表示すると、上記の2つの項目を
確認できるのです。

ソースを表示すると、見える。
テンプレート編集から行くと、見えない。

この現象を解決できる方法があれば、教えてほしいです。

よろしくお願いします。

Answer 1

私はBloggerを使ってないので細かい部分は分かりませんが英語ソースでググったら出てきたので手順だけ訳しますね。

1．まずテンプレートのバックアップを取ります。
2．Bloggerのダッシュボードからテンプレートを編集
3．HTMLを編集します。
4.<b:skin><![CDATA[/*という文字列を検索します。
5.以下のコードを検索した文字列の直前にペーストします。

<style type="text/css"><!-- /*

6.このような感じにします。

<style type="text/css"><!-- /*
<b:skin><![CDATA[/*
*/
// The the CSS and and style codes for the Blogger template
/]]></b:skin>

7.必要ならば<b:skin><![CDATA[/* と ]]></b:skin>の間にあるコードを全てコピーして、中身をstyleタグで囲います。
8.テンプレートを保存します。

以上のようです。

情報元:How to Remove Default Widgets CSS from Blogger

Comments

[misa_ayagi]

やってみた結果、本当にPageSpeed Insightsの評価が変わりました。
ありがとうございました。動作も目に見えて速くなりました。

[yuya3110]

どういたしまして。
お役に立てて良かったです。