Google Search Consoleで「CLS に関する問題」不良が出るようになった

WEB

2021.01.262020.07.31

普段そんなに細かくGoogle Search Consoleを見ているわけではないのですが、昨日何の気なしに見てみたら「CLS に関する問題」が出ていました。

しかも半分以上のページ（78ページ中の44ページ！）に。

まっかっか。

CLSに関する問題

CLSに関する問題

「CLSに関する問題」はGoogle Search Console左ツールバーの「拡張　ウェブに関する主な指標」から見れます。
モバイルとPCの項目があって、私の場合はPCで43個も「不良」になっていました。

ちなみに「ウェブに関する主な指標」はほかにもあるようです。
LCP、FIDなど。
それぞれはこういったことを意味しているようです。

LCP：ロードパフォーマンスを測定します。優れたユーザーエクスペリエンスを提供するには、ページが最初にロードを開始してから 2.5秒以内にLCPが発生する必要があります。

FID：対話性を測定します。優れたユーザーエクスペリエンスを提供するには、ページのFIDが 100ミリ秒未満である必要があります。

CLSに関する問題とは？

Search Consoleは不親切（ですよね）なので、とりあえずSpeed Insightで計測してみます。
ちなみにSpeed Insightもそんなに真面目にみているわけではないです。
アフィリエイトで頑張ってる方々に怒られちゃいそうですが…。

画像が荒くて見にくいのですが、真ん中あたりに「ウェブに関する主な指標テストに合格していません。」とか書かれてますね
Cumulative Layout Shift（CLS）は赤い△だし。

ここに何か問題があるのは確実なようです。

そもそも「CLS」とは？

まず「CLS」がなんなのかさっぱりわかんないので、Speed Insight内にあった「ウェブに関する主な指標」のページにとんでみます。
もちろん英語で書かれています。

累積レイアウトシフト（CLS）：視覚的安定性を測定します。優れたユーザーエクスペリエンスを提供するには、ページのCLSを 0.1未満に維持する必要があります。

ふむふむ。

さらに「累積レイアウトシフト（CLS）」のページに行きます。

ページで何かが突然変化したときに、オンラインで記事を読んだことがありますか？警告なしに、テキストが移動し、場所を失いました。またはさらに悪いことに、リンクまたはボタンをタップしようとしていますが、指が着地する直前の瞬間（BOOM）にリンクが移動し、他の何かをクリックしてしまいます。

ほとんどの場合、これらの種類の経験は単に迷惑ですが、場合によっては、実際の被害を引き起こす可能性があります。

レイアウトの不安定さがユーザーに悪影響を及ぼす可能性があることを示すスクリーンキャスト。
リソースが非同期に読み込まれるか、DOM要素が既存のコンテンツの上のページに動的に追加されるため、通常、ページコンテンツの予期しない移動が発生します。原因は、サイズが不明な画像やビデオ、フォールバックよりも大きくまたは小さく表示されるフォント、動的にサイズを変更するサードパーティの広告やウィジェットなどです。

あー、なんとなくわかってきたような。
うにうに動くような仕組みがダメなんですかねきっと。

広告だけじゃなく、CSSでもけっこういろいろいじってるので、思い当たる節はめちゃめちゃあります。