つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録~CLS問題再び

前回Googleサーチコンソールで検出されたCLS に関する問題: 0.1 超(モバイル)の改善が検証できたが、再びCLSの問題が発生した。

atatat.hatenablog.com

atatat.hatenablog.com

サーチコンソールで検出された次の日には良好に転じたが(CLS=0.08で以前と変わらず)、サーチコンソールの検出結果はアクセス集計値を反映するので、あと数日様子を見た方がよいかもしれない。 件数としてはほぼ投稿した記事数に近いので、個別の記事の構成ではなくブログのレイアウトデザインに関係すると考えられる。

"サーチコンソールによるCLS問題の再検出"
サーチコンソールによるCLS問題の再検出

前回と同様にPageSpeed Insightsで分析してみると、前回改善時は累積レイアウト変更(CLS)は0だったが今回は0.145になっていた。

"pageSpeed Insightsによる結果"
pageSpeed Insightsによる結果

次にAvoid large layout shifts(レイアウトが大きく変わらないようにする)を見ると、要因が2つあり1つは<div class="entry-content">で0.145、もう一つは<ul class="globalheader-right-nav">となっている。

"pageSpeed InsightsによるCLS要因分析"
pageSpeed InsightsによるCLS要因分析

前回はコメント表示をはずすことで改善したが、今回のentry-contentはブログ記事本体のことで単純に削除するということはできない。またglobalheader-right-navは一番上にあるはてなブログのヘッダー部でpro版でないと表示は消せない。特にentry-contentに関する部分は前回から変更していないのでpageSpeed Insights側の仕様変更があったと思われる。(分析結果の表示も前回と変わっている)

entry-contentセレクタとするデザインCSSを眺めてながらモバイルでの表示を改めてみると、フォントサイズがいくつか大きてレイアウト的に不自然なものがあり、以下のようにブログ内のフォントサイズを調整した。 ただしCLSの改善には至っていない。

 @media(max-width:480px){ /*モバイルデバイスの表示幅*/

 #title a{
 font-size:80%; /*ブログタイトル(つれづれなる備忘録)の文字サイズ*/
 }

#blog-description{
font-size:70%; /*ブログ説明(日々の発見・・・)の文字サイズ*/
}

 .entry-content h2 {
  padding: 0.1em 0.2em; /*上下 左右の余白*/
  font-size:100%; /*ブログ内の文字サイズ*/
}

.entry-title {
 font-size:110%; /*記事タイトルの文字サイズ*/
}

.table-of-contents {
    padding: 0;
    font-size: 90%;  /*目次内のの文字サイズ*/
}

.table-of-contents:before {
    font-size: 100%;  /*"目次"の文字サイズ*/
} 

.entry-content a {
font-size:80%; /*リンクの文字サイズ*/
}

/*以下略*/
}

今回はCLSを改善する有効な対策が考えにくいが、ここ数日の推移をみていきたいと思う。