css_bundle_v2.css をインライン化チャレンジ

2021年2月26日金曜日

Bloggerカスタマイズ

fontawsome もCDNでなく、SVG埋め込みしました。今後もこの方針でいくとなると、PageSpeedで出てくる css_bundle_v2.css が気になります。今回は、これをインライン化することにチャレンジします。

css_bundle_v2.cssとは

css_bundle_v2.cssは、Bloggerに最初から入っている基本のスタイルシートのようで、Chrome のディベロッパーツールでみると、HTMLソースの先頭にいます。

<head>の直下にありますね。

css_bundle_v2.css の無効化

だが、しかし、But、However 、ないのですよ。テーマで編集できるHTMLに。

ここの間にあるはずの “css_bundle_v2.css” がいません。これを解決してくれたのは、こちら。

日々のメモ帖 by holidaybuggy1980

Bloggerの表示速度を高速化するためbundle.cssを内部化してみた

Bloggerの表示速度を高速化するためbundle.cssを無効化したうえで内部化してみた話です。

dummy

このCSSは、<head>タグ中に差し込まれるので、<head>タグなんてなかったらいいんじゃね？ってことですね。でも、無くしてしまうわけにはいかないので、表記を変えてなかったことにするということです。素晴らしいアイデア。“<” を < “>” を>にします。こんな感じ。

元の、<head>、</head> はコメント化しました。

では、後ろ側についてる “” はなんでしょうか。これが凄くって、こうしておくと、自動で挿入されれてくるものがここにコメント化されて入ってきます。

あとは、これをダウンロードしてインライン化するだけですね。

PC仕様

<!--<head>
< link href='https://www.blogger.com/static/v1/widgets/3416767676-css_bundle_v2.css' rel='stylesheet' type='text/css'/>
< link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=6450298121806207978&zx=00137c9c-3a35-47dc-8162-43b683bc2490' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=6450298121806207978&zx=00137c9c-3a35-47dc-8162-43b683bc2490' rel='stylesheet'/></noscript>

</head>—>

モバイル仕様

インライン化

参考にさせてもらった記事では、モバイルとPCでそれぞれ違うBundle.cssのようですが、Chrome の切り替えボタンで確認しても、前述のとおり追加されるものは同じでした。ちょこちょこ変わるみたいなので、ここは共通化されてしまったかもしれません。

この時に読み込んでいる二つのファイルをダウンロードして入れ込むのですが、PC環境、モバイル環境の区分がいらないようなので、<style type=’text/css’></style>でくくってコピペするだけです。<head> エリアの先頭に入れておけば、同じになるはず。あと、Authorization.cssの中身がでてこなかったので、今回は入れませんでしたが、何かが欠けているかもしれません。

結果

レンダリングを妨げるリソース、っていうのはなくなりました。まあ、先にオフスクリーン画像の遅延読み込みってのをやらないといけないですね。