問題タブ [cls]
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.
core-web-vitals - Cumulative Layout Shift (CLS) の問題が再び発生
理由はわかりませんが、コンソールにこれが表示されます (写真を参照) コンソールがすべてのブロック全体を CLS コントリビューションとしてマークしている可能性はありますか? ユニークな小さな部品として表示する必要があります
それは試すURLです：
「https://www.bebemovil.com/inglesina-quid-2-silla-de-paseo-id575」
これも起こります... cls の変更はありませんが、CLS の値が非常に悪いです... わかりません (この URL https://www.bebemovi l.com/inglesina-aptica-quattro- carrito-bebe-trio-3-piezas-id567 )
javascript - CLS は、アニメーション化された HTML 要素を使用する Web サイトにペナルティを科しますか?
多くのオンライン ゲームでは、コア ゲームプレイ メカニズムとして HTML 要素のアニメーションが使用されています。たとえば、ソリティア ゲームでは、ゲームボード上のすべてのカードに DIV 要素または IMG 要素が含まれる場合があります。プレイヤーはボード上でこれらのカードをドラッグ アンド ドロップします。ゲームでは、数秒間続くアニメーションが表示されることがよくあります。このようなアニメーションの例としては、カードの配付があります。つまり、ゲームの開始時にカードをデッキからゲームボードの適切な場所に配ります。これは通常、1) Web サイトにアクセスしたときにユーザーの操作なしで行われ、2) ユーザーの操作の後、1 つのゲームが終了して別のゲームが開始されたときに行われます。
これらのアニメーションは 500 ミリ秒より長いため、ユーザーがアニメーションを開始したかどうかに関係なく、(私が理解しているように) その後に動きを終了する要素は CLS にカウントされます。さらに、ウェブサイトでユーザーに挨拶するカード ディール アニメーションは、すべて CLS にカウントされます。これは、最初のアニメーションの前にユーザーに Web サイトとの対話を強制することで解決される可能性がありますが、これはユーザーにとって余分な不必要で迷惑なクリックになる可能性があるため、悪い UX です。書きたいことはたくさんありますが、ここでは、(ユーザーが開始したものではない) 挨拶アニメーションを表示することが、このコンテキストでの最良の UX プラクティスであり、最も人気のあるゲーム (また、キャンバス）。
HTML 要素に基づくゲームの Web サイトは非常に人気があり、ソリティア、麻雀、マインスイーパなどがあります。一部のサイトは Google 検索結果の上位にランクされ、毎月数十万人のユーザーがいます。ゲームに関係のない他のサイトでも、ユーザーに喜ばれる HTML 要素の便利な動きのアニメーションが採用されているのではないかと思います。したがって、一般的に次のように質問します。
- このような HTML 要素のアニメーションは、ユーザーが期待しているにもかかわらず、現在の CLS の測定では予期しないものとして誤分類されていることを正しく理解していますか?
- CLS 対策の設計者の意図は、この種の Web サイトの動作にペナルティを課すことですか? CLS が一部のランキング アルゴリズムの要素として使用されている可能性があるため、特に SEO に関して質問しています。