問題タブ [cumulative-layout-shift]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - CSS min-height を設定しても Lighthouse が高い CLS を報告する
Lighthouse の累積レイアウト シフトが高い数値を報告: 0.546
トレースを分析すると、最初は画像ブロックが必要なスペースを占有しておらず、コンテンツを下に押し込んでいることがわかりました。画像を参照してください:
image 要素のコンテナ div には min-height 設定があるため、これには驚きました。
CSS
HTML
css - 検索コンソールの累積レイアウト シフト (CLS) エラーを修正するにはどうすればよいですか?
Google検索コンソールでCumulative Layout Shift（CLS）の問題>.25エラーを示すウェブサイトindiabazaaronline.comがあります。このため、最近、オーガニック インプレッションとクリックの 50% を失いました。これがどのように修正されるかわかりません。この問題の修正につながる手がかりやチュートリアルは、高く評価されます。スティッキー ナビゲーション ヘッダーを削除しようとしましたが、それでも同じエラーが発生します。
lighthouse - 目に見えないレイアウトの変化を検出する灯台？(信じられないほど高い CLS)
WordPress Web サイトの速度を最適化しています (現時点ではモバイルのみ)。CLS を除いて成功しています。CSS配信を最適化（WP-Rocketで）したらCLSが異常に高くなりましたが、Dev Tools（性能テスト）を使ってもレイアウトのズレは見られません。(モバイル)
例を次に示します: https://trustmyscience.com/israel-a-pratiquement-eradique-la-covid-19/
つまり、Lighthouse が実際のレイアウト シフトとして認識するのは、目に見えないレイアウト シフトのようです。Lighthouse は、問題の原因が<div class="entry-content body-color clearfix link-color-wrap progresson">. したがって、すべての記事コンテンツの「ラッピング」に関連しているように見えますが、それはおそらくいくつかの CSS ルールのために、(表示されずに) バックグラウンドに移動します。
CSS 配信の最適化を無効にすると、CLS はほぼ 0 に戻ります (ただし、LCP が高すぎます)。
LCP の重要性のために、この CSS 配信の最適化が必要ですが、Core Web Vitals で CLS が導入されたため、この問題も解決する必要があり、Lighthouse が LS として検出しているものを見つける必要があります。また、おそらく、ライトハウスはその修正が必要ですか？目に見えるレイアウトの変化ではないので...
これを解決する方法について何か考えはありますか? それとも、LS開発者に連絡してこれを見せる必要があると思いますか?
よろしくお願いいたします。
よろしく、