つのディメンションを決定できます。ピクセル画像のアスペクト比がわかれば、ブラウザは高さと関連領域に十分なスペースを計算して予約できます。シフトを防止できます。属性に基づいてデフォルトのアスペクト比が追加されます。属性に基づいてアスペクト比が計算されます。この情報は、レイアウト計算の開始時に提供されます。)を指定するだけで、アスペクト比を使用して高さが計算されます。処理時に主要なブラウザで計算されるため(その理由についてはこちらの投稿をご覧ください)、値の表示が若干異なります。セクションには、次のように表示されます。属性スタイルソースを使用した場合も同様に動作します。パネルには一切表示されませんが、レイアウトに使用されます。この部分により、画像のダウンロード後に画像のサイズがデフォルトのアスペクト比をオーバーライドします。正しくない場合に備えて、画像のアスペクト比が使用可能になったときに使用されるようにします。シフトが少なくなります。アスペクト比がよくわからない場合は、便利な計算ツールをご利用ください。アスペクト比の詳細やレスポンシブな画像については、メディアのアスペクト比を使用したジャンクのないページ読み込みをご覧ください。使用してコンテナの幅に合わせて画像のサイズを変更できます。ブラウザが選択できるようにする画像と、各画像のサイズを定義します。属性を設定できるようにするには、各画像で同じアスペクト比を使用する必要があります。狭いビューポートには画像の切り抜きショットを含め、パソコンでは画像全体を表示できます。シフトを引き起こすコンテンツは画像だけではありません。増加する可能性があります。シフトの原因として、広告が最も大きな要因の一つとなっています。多くの場合、広告ネットワークやパブリッシャーは動的な広告サイズに対応しています。広告サイズを使用すると、クリック率が向上し、オークションに参加する広告が増えるため、パフォーマンスや収益の向上につながります。エクスペリエンスが低下する可能性があります。コンテンツをページに追加できます。多くの場合、これらのウィジェットはコンテンツのサイズを読み込み前に認識していません。これらの問題に対処する手法はすべて似ています。主な違いは、挿入されるコンテンツをどの程度制御できるかです。広告パートナーなどのサードパーティによって埋め込まれたコンテンツの場合、埋め込まれるコンテンツの正確なサイズがわからない場合や、埋め込みコンテンツ内で発生するレイアウトのずれを制御できない場合があります。シフトを回避できます。ルールを追加してスペースを予約することです。プロパティを使用します。ファクタ間で広告やプレースホルダのサイズの微妙な違いを考慮する必要がある場合があります。シフトを完全に排除するために必要なスペースの正確な量を確保できない場合があります。シフトを避けるため、大きいコンテナのスタイルを設定するか、過去のデータに基づいて広告スロットに最も適したサイズを選択します。この方法の欠点は、ページ上の空白スペースが増えることです。代わりに、初期サイズを使用される最小サイズに設定し、サイズの大きいコンテンツについてはある程度のずれを許容することもできます。シフトの影響を抑えながら、必要に応じて親要素を拡大できます。広告が返されなかった場合など、プレースホルダを表示して、予約済みスペースが折りたたまれることを避けてください。発生する可能性があります。遅延読み込みされるコンテンツをビューポートの下部に配置するビューポートの上部に近い位置に動的に挿入されたコンテンツは、ビューポートの下部に挿入されたコンテンツよりもレイアウトのずれが大きくなることが一般的です。ビューポート内の任意の場所にコンテンツを挿入すると、多少のずれが生じます。影響を軽減することをおすすめします。シフトが発生した経験があるのではないでしょうか。広告と同様に、これは多くの場合、ページの残りのコンテンツを移動するバナーやフォームで発生します。スペースが予約されていない動的コンテンツ。コンテンツをオーバーレイして、その要素がドキュメントの流れの一部ではないことを確認します。プラクティスの投稿をご覧ください。エクスペリエンスの重要な要素となります。コンテンツを更新する場合などです。このような場合に予期しないレイアウトのずれを回避するには、いくつかの方法があります。固定サイズのコンテナ内で古いコンテンツを新しいコンテンツに置き換えるか、カルーセルを使用して移行後に古いコンテンツを削除します。移行が完了するまでは、リンクやコントロールをすべて無効にしてください。これにより、新しいコンテンツが導入される際に誤ってクリックやタップが発生してしまうことを回避できます。ユーザーが新しいコンテンツの読み込みを開始できるようにします(「もっと読み込む」ボタンや「更新」ボタンなど)。これにより、ユーザーはコンテンツの切り替えに驚かされることはありません。コンテンツをすぐに表示できるように、ユーザー操作の前にコンテンツをプリフェッチすることをおすすめします。コンテンツを画面外にシームレスに読み込み、表示が可能であることを知らせる通知をオーバーレイします(「上へスクロール」ボタンなど)。シフトを引き起こさずに動的コンテンツを読み込む例。ライブフィードのコンテンツを読み込んでいます。ウェブサイトの「もっと見る」の例。最適化した方法をご覧ください。スコアに含まれないようにします。プロパティの値を変更すると、ブラウザがこれらの変更に反応する必要がある場合があります。一部の値は、再レイアウト、ペイント、コンポジットをトリガーします。これらのプロパティを使用したアニメーション化は避けてください。プロパティは、再レイアウトをトリガーせずに変更できます。アニメーションを使用して、要素の移動、スケーリング、回転、傾斜などを行います。合成されていないアニメーションでも、再レイアウトは行われません。プロパティについて詳しくは、高パフォーマンスのアニメーションをご覧ください。つの方法のいずれかで処理されます。「非表示」ウェブフォントが利用可能になるまで、代替フォントを使用してテキストが表示されます(FOIT(非表示テキストの点滅))。シフトが発生する可能性があります。ブロックと周囲のコンテンツは、表示フォントの場合と同じように移動します。テキストのシフトを最小限に抑えるには、次のツールが役立ちます。ウェブフォントが初期レイアウトの時点までで利用可能な場合にのみ使用されるため、再レイアウトを回避できます。適切な代替フォントが使用されていることを確認します。代替フォントが使用されます。「Times」です)。フォントよりも適合しないセリフフォントです。フォントとウェブフォントのサイズの差を最小限に抑えます。使用すると、必要なフォントを取得するまでの時間を短縮できます。使用して、重要なウェブフォントをできるだけ早く読み込みます。満たす可能性が高くなります。この場合、レイアウトは移動しません。プラクティスについては、フォントに関するおすすめの方法をご覧ください。スコアを低く保つための非常に効果的な手法は、ウェブページが前後キャッシュ(bfcache)の対象となるようにすることです。ページから移動した後もブラウザのメモリにページを短時間保持するため、ページに戻ったときに、そのページは離れたときとまったく同じ状態で復元されます。前述したような理由で読み込み時に見られるような移動を発生させることなく、完全に読み込まれたページをすぐに利用できます。シフトが繰り返し表示されないということです。ナビゲーションで移動しないようにすることで、影響を軽減できます。前後に移動するナビゲーションは、多くのサイトで一般的です。ページ、カテゴリページ、検索結果に戻る操作などです。著しく改善されました。使用できないサイトもあります。ガイドをご覧ください。スコアを向上させてください。特定して改善するための手法はいくつかあります。完全に排除できない場合でも、これらの手法の一部を使用することで影響を軽減できるはずです。これにより、上限内に収まり、ウェブサイトのユーザーにとっての利便性が向上します。ライセンスにより使用許諾されます。ライセンスにより使用許諾されます。サイトのポリシーをご覧ください。関連会社の登録商標です。