このページで: [隠れる]
累積レイアウトシフトとは?
累積レイアウトシフトまたはCLSは、ユーザーのブラウザの画面上でのWebページの移動です。. このパフォーマンスメトリックを説明する良い例の1つは、Webサイトにアクセスし、リンクやボタンなどのオブジェクトをクリックしようとしたときに、ページが突然上下に移動した場合です。, 突然広告が表示されます, 代わりに広告をクリックさせます. 広告をユーザーのビューポートに表示させるこの動きはCLSと呼ばれます.
この投稿では, この指標をどのように使用できるかを説明することを目的としています, CLSとも呼ばれます, あなたのウェブサイトを改善することに向けて.
一般的, Googleは、ユーザーエクスペリエンスの向上を強く重視した、優れたレイアウトで最適化されたWebサイトに優先順位を付けることを目指しています。. この主なポイントは、ユーザーがWebサイトをどのように操作するかに焦点を当てた最新のトレンドです。. このユーザーエクスペリエンスの優先順位により、累積レイアウトシフトが実現します, これは、CoreWebVitalsメトリックの一部であるGoogleパフォーマンスメトリックです。. これは、ユーザーが特定のWebサイトをどのように操作するかについての分析を改善するために行われます。.
また、多くのWebサイトでは、ページの改善と安定化に重点を置いており、コンテンツを複数の異なるタイプのポップアップやその他の広告で埋めることに重点を置いています。これらの広告は、ユーザーエクスペリエンスにとって悪夢のようなものです。, Googleはユーザーを優先しました.
累積レイアウトシフトはどのように機能しますか?
これはGoogleのパフォーマンス指標であるため, コンテンツの安定性を測定する責任があります, 視覚的に. それが担当するエキサイティングなアクティビティの1つは、サイトのWebページが作成された時点からどのように変化するかを追跡することです。. 方法を知ることの非常に重要な側面 “良い” その値は.
CLSスコアとは何ですか？どのように機能しますか?
CLSスコアリングは、このGoogle指標の機能の一部であり、 0 あなたのウェブページのより多くの動く要素があなたのウェブサイトのライフサイクルを通して追加されるにつれて、より多くの数に. 誰かがあなたのウェブページの価値が低いと言うかもしれません, ページレイアウトの安定性が向上します. Googleはそれらのスコアを悪いものとして分類します, 改善と善が必要で、彼らはこのように見えます:
- より低い 0.1 – 良いCLSスコア.
- 間 0.1 と 0.25 – あなたはそれを改善する必要があります.
- 上記のすべて 0.25 – 悪いスコア.
あなたが心に留めておかなければならない一つの詳細は、これがグーグルであなたのウェブサイトのランクの位置に直接責任がないということです, しかし、その主なアイデアは、Google CoreWebVitalsの一部になることです。 – パフォーマンスを測定するためのセット, これは、Googleが将来新しいアップデートを公開するときに、突然不可欠になる可能性があることを意味します. したがって、今後数か月で重要になる可能性があることを覚えておいてください.
そして、これらの値の高い結果は基本的にサイトユーザーにとって悪い経験であるため, 私たちの推奨事項は、それを改善しようとすることです (それを下げる).
CLSスコアを計算する方法?
小さな影響から大きな影響まで、Webサイトに悪影響が及ぶ可能性があります. 迷子の広告は、顧客が間違った製品を購入するように導く可能性があります, これは基本的に、アニメーションの配置方法に注意し、最小限に抑えるようにする必要があることを意味します. しかし、これらのオブジェクトを改善する方法を正確に知るために, CLSスコアの計算方法を知る必要があります.
このGoogle指標の価値を測定するには, 次の要素を考慮する必要があります:
- 移動距離.
- 影響領域.
- ビューポートの高さ.
このメトリックを測定する主な要因は2つあります:
- インパクトフラクション.
- 距離分数.
測定するには 影響, 影響領域を計算する必要があります, これは、特定のアニメーションまたはオブジェクトの影響を受けた領域です. 通常、おなじみのフレーム形状がいくつかあります, 正方形や長方形のように, しかし、それはもっと複雑になる可能性もあります, あなたがそれを作った方法に応じて.
あなたの影響の計算のために, 次の式を適用します:
影響領域の領域 (フレーム) / ビューポートの面積=影響の割合
測定するには 距離, あなたはそれが最初に何であるかを知る必要があるでしょう. Googleは後で距離を追加しました。これは、シフト前とシフト後の要素の移動距離に関連しています。. したがって、それが何であるかを知るには、この式を使用する必要があります:
最大移動距離 / ビューポートの高さ=距離の割合
したがって、特定の要素の全体的な結果を計算するには, ImpactFractionとDistanceFractionを使用する必要があります, これにより、サイト上の1つのアニメーションの値が得られます:
影響の割合 * 距離の割合=のCLSスコア 1 エレメント
合計結果は、さまざまな要素のすべてのスコアを単純に合計することで計算できます。.
累積レイアウトシフトスコアを上げることができるもの?
グーグルは、高い結果の主な理由は:
- 動的コンテンツ.
- 指定された寸法のない写真.
- いわゆる不可視テキストのフラッシュを引き起こしているフォント
- スタイルのないText.tのフラッシュを引き起こすフォント
DOMを更新する前にネットワークからの応答を待機するように設定されたアクティビティ (ドキュメントオブジェクトモード).
累積レイアウトシフトを改善する方法?
あなたはそれを改善し、グーグルの目にそれをより良くするために以下の活動を行うことができます:
1 – オンラインでホストされているフォントに近づかないでください またはそれらがオンラインでホストされている場合, フォールバックなどのフォント表示には値を使用する必要があります, ブロック, スワップ, オプションまたは自動. リンクを使用して一部のフォントファイルをプリロードすることもできます rel=プリロード 特定のフォント用. 最後の1つは、基本的にフォントをプリロードすることです。これは、私たちが強くお勧めする優先事項です。.
2 – 画像のサイズ変更にアスペクト比を使用する, 例えば 4:3 また 16:9 ピゼルの画像サイズの代わりに, 800のように×600 等々. これにより、写真を表示するために必要なスペースをブラウザが計算できるようになるため、合計が増えるリスクを最小限に抑えることができます。.
3 – 動的で特に動的なコンテンツの実装には近づかないでください 別のオブジェクトの上 すでにアクティブになっているページ.
この累積レイアウトシフトとそれを最適化する方法について詳しく知りたい場合, Googleの拡張ナレッジベースを確認することをお勧めします。 CLSの最適化.
今のところ, CLSは、ユーザーがサイトをどのように認識するかにのみ直接関係します, それはそれを不可欠にします. Googleがユーザーインタラクションの洞察とウェブサイトでの全体的なエクスペリエンスに重点を置いていることを考えると、近い将来、それが重要な要素になる可能性があると考えています。, だからあなたが物事の上にとどまりたいなら, 注意深く監視することをお勧めします.
CLSとその仕組みについてさらに質問がある場合, コメントを残すことを躊躇しないでください. 私たちのHowtohosting.guideチームは、常に迅速に回答し、あなたを助けることを目指しています.