前回Googleサーチコンソールで検出されたCLS に関する問題: 0.1 超(モバイル)の改善が検証できたが、再びCLSの問題が発生した。
サーチコンソールで検出された次の日には良好に転じたが(CLS=0.08で以前と変わらず)、サーチコンソールの検出結果はアクセス集計値を反映するので、あと数日様子を見た方がよいかもしれない。 件数としてはほぼ投稿した記事数に近いので、個別の記事の構成ではなくブログのレイアウトデザインに関係すると考えられる。
前回と同様にPageSpeed Insightsで分析してみると、前回改善時は累積レイアウト変更(CLS)は0だったが今回は0.145になっていた。
次にAvoid large layout shifts(レイアウトが大きく変わらないようにする)を見ると、要因が2つあり1つは<div class="entry-content">
で0.145、もう一つは<ul class="globalheader-right-nav">
となっている。
前回はコメント表示をはずすことで改善したが、今回の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を改善する有効な対策が考えにくいが、ここ数日の推移をみていきたいと思う。