Google Search Console の「ウェブに関する主な指標」を見ていると不良URLが15件発生していました。その理由を「レポートを開く」から確認すると「CLS に関する問題: 0.25 超(モバイル)」が出ていました。更に PageSpeed Insights で詳細を確認すると最大で 0.6 になっていました。「不良」と言われると気持ちが悪いので、完全ではありませんが修正してみました。
PageSpeed Insights とは
PageSpeed Insights とは、Google が公開している Web の評価、特に読み込み速度に特化した評価を点数付けするサイトです。
PageSpeed Insights
Google の評価項目としては 6項目があります。
- FCP (First Contntful Paint)
- SI (Speed Index)
- LCP (Largest Contentful Paint)
- TTI (Time to Interactive)
- TBT (Total Blocking Time)
- CLS (Cumulative Layout Shift)
その一つが CLS になります。
CLS (Cumulative Layout Shift) とは
PageSpeed Insights の結果ページを見ると、CLS について以下のように書かれています。
Cumulative Layout Shift はビューポート内の視覚要素がどのくらい移動しているかを測定する指標です。
ページが読み込まれてから表示される物の高さや幅が変わってしまい、レイアウトが変わってしまう事を言うようです。
2021年2月17日からは、0.1 以下が「良好」、0.25 以下が「改善が必要」、0.25 を超えると「不良」に判断されます。
該当していた日記のページ
私の日記のモバイル表示で最も CLS の評価が悪かったのは2020年2月4日のページでした。
Ryzen Master の使い方の説明で色々と試行した結果を表にしています。PC と iPhone で表を表示させて気付いたのは、
- 表のタイトル行の文字列が長い -> タイトル行が2行になっている
- 表の桁数が多い -> 通常の画面の幅に入りきらずに右側に飛び出している
という点です。読み込み時には普通に表示しようとしても、途中でレイアウトが変化していると推測できます。
対処方法
該当日を含む、表を使用している日記について、此方を参考にスクロールさせるように変更しました。
【はてなブログ】表がはみ出す場合にスクロール機能をつけるCSS - (O+P)ut
新しく作る表についての対応はこれから検討しますが、既に書いた日記については、個々にスクロールする css を追加する事で対処しました。
具体的には、
<div style="overflow-x: scroll;overflow: auto;white-space: nowrap;"> 表 </div>
と、表を囲むように div 要素を追記しました。
結果
Google Search Console で指摘されていた URL は全て修正し、個々に PageSpeed Insights で調べてみた所、最大 0.60 から 0.25 未満に修正する事ができました。2月18日に再検証を依頼し今は検証フェーズに入っています。28日間以内に検証が完了する予定です。
まとめ
今回は CLS (Cumulative Layout Shift) に着目して日記の内容を修正しました。表のレイアウトが悪影響を及ぼしていましたので、スクロールさせるように変更する事により回避しました。それでも、不良レベルの 0.25 以上は解消できましたが、未だ 0.2 台 ですので更なる改善が必要だと思います。
また、他の項目についても改善が必要です。はてなブログの無料版を使用していて Google AdSense を利用している以上、回避できない項目もあるでしょうから、一つ一つ確認しながら対処できればと考えています。