cocoonサンプルビジネスサイトのサーバの凍結解除しました。ご不便をおかけしました。

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

WEB
スポンサーリンク

普段そんなに細かく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もそんなに真面目にみているわけではないです。
アフィリエイトで頑張ってる方々に怒られちゃいそうですが…。

CLS に関する問題

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

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

 

そもそも「CLS」とは?

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

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

 

ふむふむ。

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

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

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

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

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

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

 

とりあえずの対処

わたしはテーマは「Cocoon」を使用しています。
もともとこのテーマにはサイト高速化の設定があるので、Lazy Loadを無効にしてみました。
CSSはこれからちょこちょこ直していきます。
広告も外すかー。

また経過を書きます。

 

【2020/07/31 追記】
とりあえず追加していたCSS、ほとんど削除しました。
残った指定はカルーセルの余白とヘッダのシャドウの削除くらいで、ほぼCocoonデフォルトです。
デフォルトでもほとんど変わらない、ってかむしろさっぱりして好きかも。

まじでCocoonテーマは最高ですよ、、、

 

【2020/08/11 追記】
「不良」から「改善が必要」になりました。笑
もうこれで様子見ます。

 

【2020/08/28 追記】
全ページ「良好」になっていました!

コメント

タイトルとURLをコピーしました