どうも。
一向に良くなる気配が無い、我がブログのPageSpeed Insightスコア。
少しだけ改善策をやってみました。
いろいろあるのですが、「レンダリングを妨げるリソースの除外」について、対応を考えてみたいと思います。
テーマの環境によって違いがあると思いますが、当方の使用するテーマ（Vaster2）では3つのリソースがリストされました。
除外出来そうなリソースは、以下の赤で囲ったbundle cssと呼ばれるリソース。
後の2つはjqueryとfont awesome（icon font）のリソースなので、現状は放置します。
いろいろする前にテンプレートのバックアップを取り、HTMLを変更していきます。
Bloggerの管理画面より テーマ＞＞HTMLの編集と進みHTMLを変更します。
HTMLタグにb:css='false'を追加します。
（以下、青字）
これだけでbundle cssの読込が行われません。
自己紹介ガジェットを見てみると、bundle cssのスタイルが無くなった事によりスタイルが崩れています。
スタイルの崩れを避けるためには、以下のどちらかの対応を実施する必要があります。
上記の1.については、使用中のテーマに対してスタイルを対応させるのは重労働。
勇気と時間がある人向け。
2.bundle cssの内容をテーマに直接htmlに追加する方が簡単です。
但し、cssの肥大化にはなります。
自己紹介ガジェットのソースをChromeの検証機能で見てみると、以下の赤で囲った様に見つける事ができます。
リンクになっているので、クリックすると内容を確認できます。
クリックすると以下のように表示されます。
1ラインで大量に記述されてます。
かなり長いですが、コピーしてテキストエディター等に貼付けておきます。
今回はテーマの <b:skin>の前に以下を配置しました。（Vaster2のcss前にしました。）
「レンダリングを妨げるリソースの除外」も無くなりました。しかし、残念ながらスコア微増の+1でした。
効果は薄い。
但し、Bloggerの公式で用意されている新しいテーマ（Contempo/Soho/Emporio/Notable）はBundle cssは使ってないので、読込を止めても問題は無さそうですね。
スコアが上がらない最大の原因は、AdSenseの掲載による可能性を疑っています。
広告の画像が大きいとか…。
こちらでは修正出来ないですから。
テーマのバックアップは忘れずに、変更は変更については自己責任で行なって下さい。
以上。
一向に良くなる気配が無い、我がブログのPageSpeed Insightスコア。
少しだけ改善策をやってみました。
PageSpeed Insight「レンダリングを妨げるリソース除外」
PageSpeed Insightを実施した結果、改善出来る項目を教えてもらえます。いろいろあるのですが、「レンダリングを妨げるリソースの除外」について、対応を考えてみたいと思います。
テーマの環境によって違いがあると思いますが、当方の使用するテーマ（Vaster2）では3つのリソースがリストされました。
除外出来そうなリソースは、以下の赤で囲ったbundle cssと呼ばれるリソース。
bundle cssとは
Vaster2等のカスタムされたテンプレートでは、大部分のスタイルはhtmlに直接書き込まれていますが、ガジェットや基本的な箇所のスタイルはBloggerで用意された、bundle cssと呼ばれるデフォルトcssの設定のスタイルをそのまま使用しています。bundle cssの読込み廃止
廃止自体は非常に簡単。いろいろする前にテンプレートのバックアップを取り、HTMLを変更していきます。
Bloggerの管理画面より テーマ＞＞HTMLの編集と進みHTMLを変更します。
HTMLタグにb:css='false'を追加します。
（以下、青字）
<html b:css='false' 以下略
これだけでbundle cssの読込が行われません。
問題はbundle css読込みの廃止後
当然ですが、bundle cssが読み込まれない場合、適用していた各ページのスタイルが崩れています。自己紹介ガジェットを見てみると、bundle cssのスタイルが無くなった事によりスタイルが崩れています。
- テーマ（Vaster2）のスタイルが崩れた箇所のcssを追加する。
- bundle cssを直接テーマHTMLに書き込む。（内容を移植）
上記の1.については、使用中のテーマに対してスタイルを対応させるのは重労働。
勇気と時間がある人向け。
2.bundle cssの内容をテーマに直接htmlに追加する方が簡単です。
但し、cssの肥大化にはなります。
bundle cssをcopy
Bundle cssを探します。自己紹介ガジェットのソースをChromeの検証機能で見てみると、以下の赤で囲った様に見つける事ができます。
リンクになっているので、クリックすると内容を確認できます。
クリックすると以下のように表示されます。
1ラインで大量に記述されてます。
<style>タグで囲って追加
前述で確認したbundle cssの内容を<style type='text/css'>〜</style>タグで囲い、テーマに追加します。今回はテーマの <b:skin>の前に以下を配置しました。（Vaster2のcss前にしました。）
<style type='text/css'>body{margin:0;padding:0 0 1px}.content-outer,.header-outer, 長いので以下略
</style>
Bundle cssの内容で、設置していないガジェットの物は削除しても良いかと思いますが、一応そのままにしています。</style>
効果は？
Bundle cssを内部化しただけで、崩れてた表示は直りました。
「レンダリングを妨げるリソースの除外」も無くなりました。しかし、残念ながらスコア微増の+1でした。
効果は薄い。
今回の変更について
やらなくても良さそう。但し、Bloggerの公式で用意されている新しいテーマ（Contempo/Soho/Emporio/Notable）はBundle cssは使ってないので、読込を止めても問題は無さそうですね。
スコアが上がらない最大の原因は、AdSenseの掲載による可能性を疑っています。
広告の画像が大きいとか…。
こちらでは修正出来ないですから。
ご注意
各自の環境設定等により、同じ変更を加えても表示が崩れてしまう事もあるかもしれません。テーマのバックアップは忘れずに、変更は変更については自己責任で行なって下さい。
以上。
0 件のコメント:
コメントを投稿