すたすた式
Blogger Vaster2
新しい記事を書きました。
[Blogger] css_bundle_v2.cssに関する覚書-すたすた式
PageSpeed InsightsやLighthouseで「レンダリングを妨げるリソースの除外」として指摘されているcss_bundle_v2.cssに関する覚書です。
Firefoxでレイアウトが崩れるのを確認しました。おすすめできる方法ではなさそうです。
IE11、Firefoxなど対応していません。
Can I use... Support tables for HTML5, CSS3, etc
PageSpeed Insightsを見ると遅延の原因とされるCSSとしてhttps://www.blogger.com/static/v1/widgets/2437439463-css_bundle_v2.css がありました。
https://www.blogger.com/static/v1/widgets/2437439463-css_bundle_v2.css
[テーマ]-[HTMLを編集]からソースコードを見ても上記のものが見当たりませんが、実際にブログを表示した時は <head>の直下に上記アドレスがありました。
<head>
調べると、これを除去する方法はいくつかありましたが、除去するとレイアウトが崩れてしまいました。
なので、詳しいことはよくわかりませんが、css_bundle_v2.cssの読み込み等のタイミングを非同期？にすることでPageSpeed Insightsでの遅延を回避しました。
css_bundle_v2.css
再掲：Firefoxでレイアウトが崩れるのを確認しました。おすすめできる方法ではなさそうです。
HTMLを編集するので必ずバックアップをとってから作業してください。
参考サイト
<link rel="preload"></link>を使ってCSSを非同期で読み込む - Qiita
Preload を用いたリソースプリローディングの最適化 | blog.jxck.io
<head>の直下に下記コードを追加します
<link rel="preload" as="style" href="挿入されるアドレス" onload="this.rel='stylesheet'"/>
挿入されるアドレスは<head> の下にあるはずです。（chromeであればブログを表示したあとに右クリックで”ページの要素を表示”をクリック）
このブログではこんな感じです
<link rel="preload" as="style" href="https://www.blogger.com/static/v1/widgets/2437439463-css_bundle_v2.css" onload="this.rel='stylesheet'"/>
widgetsの後の数字はレイアウトの変更などで変わるようですがどうなんでしょう？
これでPageSpeed Insightsで指摘されなくなりました。
※ </head>の直上に挿入されるhttps：//www.blogger.com/dyn-css/authorization.css~は </head>を<!--</head>--></head>置き換えれば同じような方法がとれると思います
</head>
https：//www.blogger.com/dyn-css/authorization.css~
<!--</head>--></head>
<link rel="preload" as="style" href="挿入されるアドレス" onload="this.rel='stylesheet'"/> <!--</head>--></head>
だだ、アドレスのリンク先を見てみると2行くらいのCSSなので<style type='text/css'></style>でHTML内に直に書く（インライン化）でもいいかと思っています。
<style type='text/css'></style>
<style type='text/css'> 挿入されるアドレスの内容・中身 </style> <!--</head>--></head>
<head>を下記に書き換え
<!--<head>--> <head>
またはHTMLの上のほうにある <html b:version='2' class='v2' のタグのなかに b:css='false'を追加
<html b:version='2' class='v2'
b:css='false'
<html b:css='false' b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='en-US' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
How to Remove Blogger Default CSS | Blogger Tips and Tricks
Blogger Coding: Defer loading CSS (official PageSpeed) for Mobile and Desktop for Blogger
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿