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

トラブル対応

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

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

CLSの原因を見つける方法

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

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

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

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;
}

③Enlighterプラグイン→Highlighting Code Blockプラグイン

上記のようにコードを紹介する際、複数のデザインを選択できる所が気に入ってEnlighterプラグインというプラグインを使っていました。

残念ながらこのスクリプト枠もガタついていたので、シンプルでインストール数が比較的多いHighlighting Code Blockプラグインへと代替えしました。

④googleアドセンス→除去

最後はgoogleアドセンスです、すべてというワケではなく僕の場合は記事中のクリック数や目視が多い場所に手動でアドセンスを貼っていたんですが、これがガタついて記事の表示を変動させていました。

なので、大した金額にもならないし思い切って自動広告以外は外しました。僕の場合は自動広告が悪さをしている感じはないんですが、人によっては自動広告でCLSが悪化している方もいるようなので、設定を見直す必要が今後あるかもしれません。

重要な収入源になっている方は広告を外す選択肢は難しいと思うので、広告の表示枠に高さと幅を設定すれば問題ないそうです。詳しくは公式の「Minimize layout shift」ページに対策方法が書いてありますんで必要な方は読んでみて下さい。

まとめ

今回紹介した原因はすべて”悪”というわけではないと思ってまして、僕の環境とマッチしていなかった・使い方が良くない・アプデで直る、など対策して使い続ける事は全然できると思います。

代替え機能が見つからない場合は、使い続ける方向で対応策を模索してみてもいいのかなと思います。

コメント