すたすた式
Blogger QooQ
個人的な覚書、備忘録です。記事公開時の理解です、勘違いや間違いがあるかもしれません。
ソースコードを見ると<head>直下にこんな感じのコードが挿入されています。（新しいテーマContempoなどでは配信されないようになっている）
<head>
<link href='https://www.blogger.com/static/v1/widgets/3416767676-css_bundle_v2.css' rel='stylesheet' type='text/css'/>
これがPageSpeed InsightsやLighthouseでレンダリングを妨げるリソースの除外として指摘されています。
※合格した監査に入っている場合もあったりしました。（謎）
回避方法はいくつかあるようです。
自分の環境ではいずれのやり方も若干のスコアアップになりましたが、誤差といえる水準かもしれません。ただ、必要なコードを抽出してテンプレートに直接書く方法は、通信量を抑える点においてはプラスかなと思っています。
テンプレートのhtmlタグにb:css='false'を付与
b:css='false'
<html b:css='false' b:version='2' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' 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'>
これで該当CSSが配信、挿入されなくなります。
ブログのソースコードから、<head>直下にある下記のようなコードを見つける。（数字は個々に違うと思います。）
ソースコードはブログを表示したブラウザ上で Ctrl + U、もしくは右クリックから[ページのソースを表示]などで確認できます。
配信、挿入されるコード例
これのURL部分をコピー
https://www.blogger.com/static/v1/widgets/3416767676-css_bundle_v2.css
コピーしたURLを下記コードの該当部分に貼り付ける
<link rel="preload" href="ここに貼り付け" as="style"/> <link rel="stylesheet" href="ここに貼り付け" media="print" onload="this.media='all'"/>
貼り付けた例
<link rel="preload" href="https://www.blogger.com/static/v1/widgets/3416767676-css_bundle_v2.css" as="style"/> <link rel="stylesheet" href="https://www.blogger.com/static/v1/widgets/3416767676-css_bundle_v2.css" media="print" onload="this.media='all'"/>
調べる過程で<noscript>に言及しているサイトがいくつかありました。考慮するならば下記コードも追加する。
<noscript>
<noscript><link href='https://www.blogger.com/static/v1/widgets/3416767676-css_bundle_v2.css' rel='stylesheet' type='text/css'/></noscript>
<head>の下に追加しました
<head> <!-- ここに追加 -->
追加例
<noscript>も追加するなら
<link rel="preload" href="https://www.blogger.com/static/v1/widgets/3416767676-css_bundle_v2.css" as="style"/> <link rel="stylesheet" href="https://www.blogger.com/static/v1/widgets/3416767676-css_bundle_v2.css" media="print" onload="this.media='all'"/> <noscript><link href='https://www.blogger.com/static/v1/widgets/3416767676-css_bundle_v2.css' rel='stylesheet' type='text/css'/></noscript>
preloadの対応状況によっては<link rel="stylesheet" href="コピーしたURL" media="print" onload="this.media='all'"/>は不要になる
<link rel="stylesheet" href="コピーしたURL" media="print" onload="this.media='all'"/>
基本的に配信、挿入される該当コードのURLリンク先（例 https://www.blogger.com/static/v1/widgets/3416767676-css_bundle_v2.css）をコピペするだけですが。。。
ChromeのデベロッパーツールでCoverageをみると自分の環境ではトップページで4.5%しか使われていないようです。
なので必要だと思われる部分を抽出したいと思います。
適用されるCSSが違うと思うので、少なくともトップページと投稿（記事ページ）は個々に生成したほうが無難。なるべく多くの要素があるページ（コメントや、「前の投稿」「新しい投稿」ボタンなどがあるページ）で生成するのが望ましい。
スマートフォンのときの表示も要確認
生成後、ツールなどを使って差分を確認、必要に応じてコピペや結合。
CoverageをExportして解析できそうな拡張機能がありましたが自分の環境ではうまく動きませんでした。
オンラインツールに関して新しい記事を書きました。2020/10/01
訂正：下記オンラインツールは”スクロールせずに見える範囲のコンテンツ”に適用されているCSSを抽出するもののようなので今回の目的に使用するには不適当っぽいです。コメントがあるページを抽出してみたところ、コメントに関わるCSSは抽出されませんでした。2020/09/30
Critical Path CSS Generator - by Jonas Ohlssonを使う
※hoverなどは生成されない
hover
CSS Usedを使う。
ページに適用されているCSSが生成されるので/*! CSS Used from: https://www.blogger.com/static/v1/widgets/数字-css_bundle_v2.css */部だけをコピペ
/*! CSS Used from: https://www.blogger.com/static/v1/widgets/数字-css_bundle_v2.css */
body{margin:0;padding:0 0 1px;} .widget{position:relative;min-height:0;_position:static;_height:1%;} .section{margin:0 15px;} .widget{margin:30px 0;_margin:0 0 10px;} .section:first-child .widget:first-child{margin-top:0;} .section:last-child .widget:last-child{margin-bottom:0;} .Header h1{margin-bottom:10px;} a img{border:none;position:relative;} h1,h2,h3{margin:0;position:relative;} h1 a:hover{text-decoration:none;} h3 a:hover{text-decoration:none;} .widget{line-height:1.4;} .widget ul{padding:0 0 0 1.25em;margin:0;line-height:1.2;} .widget li{padding:.25em 0;margin:0;text-indent:0;} .item-control{display:none;} .item-control a{text-decoration:none!important;} .widget-item-control{float:right;height:20px;margin-top:-20px;position:relative;z-index:10;} .widget-item-control a{opacity:.5;} .widget-item-control a:hover{opacity:1;} .widget .widget-item-control a img{border:none;padding:none;background:none;-moz-box-shadow:none;-webkit-box-shadow:none;-ie-box-shadow:none;box-shadow:none;} body{min-height:100%;_height:100%;position:relative;} article{display:block;} div.clear{clear:both;} .quickedit{cursor:pointer;} .PageList LI A{font-weight:normal;} .PageList LI.selected A{font-weight:bold;text-decoration:none;} .PopularPosts .item-thumbnail{float:left;margin:0 5px 5px 0;} .PopularPosts .widget-content ul li{padding:.7em 0;} .PopularPosts img{padding-right:.4em;} .PopularPosts .item-title{padding-bottom:.2em;} body{overflow-wrap:break-word;word-break:break-word;word-wrap:break-word;} .container::after{clear:both;content:"";display:table;} input::-ms-clear{display:none;} #blog-pager-older-link{float:right;} #blog-pager{margin:1em 0;text-align:center;overflow:hidden;}
セレクタやプロパティ、値の重複が気になる場合は個別に調整
<b:skin><
コメントなし:
コメントを投稿