実際、計測してみたところ、下記のような改善項目がありました。
＜モバイル＞
パフォーマンスが大幅に改善する項目
次の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...パフォーマンスが大幅に改善する項目
次の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>タグを検索し下記に置き換える。
<head>- </head>タグを検索し下記に置き換える。
</head><!--<head/>-->内部化の方法
- 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>注意
- CSSのファイル名は自分の環境におけるファイル名のため、環境によって違うファイル名になっていることもありますので注意願います。
- 無効化のみを行うと、表示が崩れますので内部化を行うか、自分でCSSを編集してください。
以上、参考にしていただけたら幸いです。
大変参考になりました。
返信削除ありがとうございました。
アクセスありがとうございます。参考になって何よりです。
削除