hiroの長い冒険日記

主にコンピュータ周辺の興味を持った内容を綴ります

過去記事のはみ出した表の修正 (CLS改善)

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日のページでした。

hiro20180901.hatenablog.com

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 を利用している以上、回避できない項目もあるでしょうから、一つ一つ確認しながら対処できればと考えています。