ワードプレスで発生した「CLSに関する問題」の具体的な原因と対策方法4選

2-3か月前から当ブログのgoogleサーチコンソール上で「CLSに関する問題」が出ていたのには気付いていたんですが、対象のページも少ないし大したことないべ。と問題を先送りにしていました。

先日確認した所、要改善のページが倍に増えておりそろそろマズイかなと1日かけて原因を調べ対策しました。結果は数日後にすべてのCLS問題が解決していたので、具体的な方法を書き残しておきます。

CLSの原因を見つける方法
CLSの原因と解決方法
まとめ
個人開発プログラマーを応援するメンバーシップを始めました('ω')ノ

CLSの原因を見つける方法

まずは「googleサーチコンソール > ウェブに関する主な指標 > レポート開く > 改善が必要 > URL グループ」を開いて問題が発生しているURLを確認します。

対象のページを確認したら当該ページを開き、リロードした瞬間に”プルッ”と動いているコンテンツを探します。埋め込みコンテンツとか後から読み込んでいるコンテンツとかが怪しいです。

ワードプレスの場合は自分で追加したCSSとかプラグインがほとんどの原因な気がします。自分のブログを全ページ見直して調べてみたら原因が4つ見つかりました。具体的にはこれ。

ワードプレスで発生した「CLSに関する問題」を全部やっつけた

CLSの原因と解決方法

解決方法自体は代替え手段を探せばいいだけなので難しくないんですが、CLSが発生しているページを全部見直すのに時間がかかりますね～、バズる記事を書くよりかは簡単なのでアクセスのために丁寧に見ていきましょう。

①ブロックによる動画埋め込み→youtube埋め込み

まず発見したのはブロック機能による動画の埋め込みです。僕は自作スクリプトの挙動を見てもらうために実行時の様子を動画で撮影して記事に埋め込むんですが、ブロック機能の「動画」を使って掲載していました。

上記のCLSチェックでガタガタ動いているのを見つけたので、同じ動画埋め込みでもガタつかないyoutubeにアップロードしてからhtmlをコピペして埋め込むと良さそうです。

ちなみにyoutube側で動画内容を公開したくないコンテンツの場合は、動画アップロード後に公開設定で視聴者を限定できるので僕はこれを良く使ってます。

②TablePressプラグイン→ブロックのテーブル機能

APIの仕様などを説明する際にテーブル機能を良く使うんですが、スクロールや検索・並び替え機能まで実装できるTablePressプラグインを使っていました。

確認すると毎回ではないんですがたまにガタガタ動くので、ブロックのテーブル機能に置き換えました。ただテーブルをレスポンシブ化するCSSは追記していたので、これも何かしら影響しているかもしれません。

/* 横スクロールレスポンシブテーブル用の要素の追加 */
.scrollable-table table{
  border-collapse: collapse;
  margin: 1em 0;
  max-width: 100%;
}

.scrollable-table th{
  background-color: #eee;
}

.scrollable-table th,
.scrollable-table td{
  border: solid 1px #ccc;
  padding: 3px 5px;
  white-space: nowrap;
}

.scrollable-table {
  overflow-x: auto;
  margin-bottom: 1em;
}