コンテンツに移動
Silktideヘルプ

レイアウト シフト

Silktide はページの読み込み中の状態を監視し、レイアウトがどの程度動くかを測定して、ページ内のどの部分が移動したかを特定します。安定したページは一度表示されたらその位置に留まりますが、不安定なページは画像、フォント、埋め込みコンテンツが読み込まれるたびに移動します。

測定値は Cumulative Layout Shift（CLS）です。これは Google の の1つです。読み込み中に発生した予期しない移動をすべて合計します。0.1以下は良好、0.25以上は不良と見なされます。

重要な理由

レイアウト シフトは実際の操作ミスを引き起こします。訪問者がリンクをタップしようとした瞬間にコンテンツが移動し、別のものをタップしてしまいます。広告の場合もあれば、「キャンセル」ではなく「購入」の場合もあります。訪問者が読んでいるテキストが、突然その人の視界から飛び出します。訪問者はその理由を言葉にできなくても、サイトが壊れていて信頼できないように感じます。

Google はこの指標を含む Core Web Vitals も検索順位のシグナルとして使用しているため、不安定なページは好感度だけでなく検索での可視性も損なう可能性があります。

修正方法

Silktide は移動した要素を表示します。修正するには、読み込まれる前にその要素のスペースを確保します。

  1. すべての画像と動画に明示的な幅と高さ（または CSS のアスペクト比）を指定し、ファイルが到着する前にブラウザーが適切なスペースを確保できるようにします。画像サイズの明示を参照してください。
  2. 広告、埋め込みコンテンツ、その他の遅れて読み込まれるコンテンツのために、固定サイズのコンテナーでスペースを確保します。場合によって一部が空いていても構いません。
  3. 訪問者がすでに読んでいる内容の上に新しいコンテンツを挿入しないでください。ただし、訪問者自身の操作への応答である場合を除きます。
  4. カスタムフォントは、テキストの目に見える再配置を避ける方法で読み込みます。読み込み中のテキストの表示を参照してください。

Silktide によるテスト方法

  1. 速度テスト用に設定されたデバイスの種類、接続速度、テスト場所を使用して、実際のブラウザーでページを読み込みます。
  2. ページの読み込み中に発生した予期しないレイアウトの移動をすべて記録し、ページの Cumulative Layout Shift スコアに合計します。
  3. 移動した各要素について、その と合計への個別の寄与度を報告します。
  4. この測定の公開スケールに基づき、合計スコアでページを評価します。0.1以下は良好、0.25以上は不良です。

トラブルシューティング

ページが動いているように見えません

シフトは、読み始める前の読み込み直後に発生することや、ファイルが時間をかけて少しずつ到着する低速接続時にのみ発生することがあります。また、ブラウザーにページの画像やフォントがキャッシュされているため、遅れて到着するものがない場合もあります。チェックに一覧表示される要素によって、たとえ一瞬であっても何が移動したかを特定できます。

他のツールとスコアが異なります

CLS は、デバイス、接続速度、測定範囲によって異なります。Silktide は、設定された速度テストの設定を使用して、制御されたページ読み込みを測定します。一方、実際の訪問者データに基づくツールや、ユーザーがスクロールして操作している間も測定を続けるツールでは、同じページについて異なる値が報告されることがあります。

詳細情報

最終更新

このページは役に立ちましたか？