キーボードを備えたデスクと 2 台のモニターを備えたセットアップ。

累積的なレイアウト シフトについて

累積レイアウト シフト

キーボードを備えたデスクと、累積的なレイアウト シフトを理解する 2 台のモニターを備えたセットアップ。

動きを止めろ

ページをしっかりとしたものにする

理解 累積レイアウトシフト

による: サイモン | カテゴリー: ページ速度
発行日: 2024 年 1 月 9 日

累積レイアウト シフト (CLS) は、ユーザーが Web サイトをどのように認識し、操作するかに直接影響を与える重要な指標として浮上しています。

CLS は、Google の Core Web Vitals の重要なコンポーネントとして、Web サイトの全体的なパフォーマンスを決定する上で重要な役割を果たします。この記事では、累積的レイアウト シフトの概念を詳しく掘り下げ、その影響、それに寄与する要因、およびそれを最小限に抑えるための効果的な戦略を探ります。

とは 累積的なレイアウト変更?

累積レイアウト シフトは、Web ページが読み込まれてインタラクティブになるときの Web ページの視覚的な安定性を定量化するために使用される指標です。簡単に言うと、CLS は Web ページ上のコンテンツの量を測定します。 ユーザーの操作中に移動したり移動したりする。この動きは、特に特定の要素をクリックしたり、コンテンツを読もうとしたりするときに、ユーザーにとってイライラする可能性があります。

CLS は、影響率 (シフトによって影響を受ける可視空間の量) と距離率 (ビューポートに対して要素がシフトした距離) を乗算することによって計算されます。より高いCLS スコアは、より破壊的で不快なユーザー エクスペリエンスを示します.

CLS の影響 ユーザー体験

ユーザーの不満

Web ページ上の要素が予期せず移動すると、ユーザーはイライラし、全体的なエクスペリエンスが低下する可能性があります。頻繁かつ大幅なレイアウトの変更は、ユーザーの関与を妨げ、ボタンのクリックやフォームへの入力などのタスクの実行を妨げる可能性があります。

コンバージョン率の低下

CLS スコアが高いと、コンバージョン率が低下することがよくあります。視覚的に不安定な Web サイトに遭遇すると、ユーザーはトランザクションを完了したり、コンテンツに参加したりする可能性が低くなります。これは、CLS がユーザーの満足度だけでなく、オンライン ビジネスの成功にとっても重要であることを強調しています。

検索エンジンのランキング

Google は、Cumulative Layout Shift を含む Core Web Vitals をランキング アルゴリズムに組み込みました。これらの指標によって測定されるパフォーマンスが優れている Web サイトは、検索エンジンの結果で上位にランクされる可能性が高くなります。したがって、CLS 問題に対処することは、次のようなメリットがあるだけではありません。 ユーザーエクスペリエンスだけでなく、検索の可視性の維持と向上にも役立ちます.

あなたのことを見てください ページロード

ジャンプに注意

再描画のチェック

累積の原因 レイアウトシフト

サイズのない画像とメディア

CLS の一般的な原因の 1 つは、サイズが指定されていない画像やメディア要素が含まれていることです。これらの要素が読み込まれると、要素に必要なスペースが動的に割り当てられるため、レイアウトがシフトする可能性があります。画像の幅と高さの属性を指定すると、ブラウザで必要なスペースを確保できるため、レイアウトが変更される可能性が低くなります。

コンテンツの非同期読み込み

広告や動的に生成された要素など、非同期で読み込まれるコンテンツは、レイアウトの変更に寄与する可能性があります。これらの要素用のスペースが事前に予約されていない場合、コンテンツが最終的に読み込まれるときにレイアウトが変わる可能性があります。重要な要素の読み込みに優先順位を付けるか、プレースホルダーを使用すると、この問題を軽減できます。

Web フォントの読み込み中

Web フォント、特に読み込み時間や遅延が異なるものは、レイアウトの変更を引き起こす可能性があります。最初のレンダリング後にフォント サイズが変更されると、レイアウトに予期しない変化が生じる可能性があります。 font-display プロパティを利用し、フォントをプリロードすると、このような変化を防ぐことができます。

戦略への 最小化する 累積レイアウトシフト

主要なリソースをプリロードする

ページの読み込みを改善し、CLS を削減するには、画像、フォント、スタイルシートなどの重要なリソースをプリロードすることを検討してください。プリロードにより、これらのリソースがページ読み込みプロセスの早い段階でフェッチされるようになり、レイアウトが変更される可能性が最小限に抑えられます。

画像のサイズを指定する

画像とメディア要素のサイズを明示的に指定すると、ブラウザーはコンテンツを読み込む前に必要なスペースを割り当てることができます。この簡単な方法により、画像の動的サイズ変更によってレイアウトが変更される可能性が大幅に減少します。

重要な CSS の読み込みを優先する

最初に重要な CSS を読み込むと、ページの最初の表示に不可欠なスタイルが即座に適用されます。これは、スタイルのないコンテンツのフラッシュ (FOUC) を回避するのに役立ち、より安定したレイアウトに貢献します。

遅延読み込み

スクロールしないと見えない部分に表示される画像やその他の重要ではないリソースに対して遅延読み込みを実装します。遅延読み込みでは、これらの要素がビューポートに入る直前まで読み込みが延期され、最初のページ読み込み中に不必要なレイアウトが移動するのを防ぎます。

監視と分析

Google などのツールを使用してウェブサイトのパフォーマンスを定期的に監視する ページ速度 Insights、Lighthouse、またはその他の Web パフォーマンス ツール。これらのツールは、CLS やその他に関する洞察を提供します。 コア Web Vitals メトリクス、問題を積極的に特定して対処するのに役立ちます。

私の 結論

累積的なレイアウト シフトは、ユーザー エクスペリエンスとユーザー エクスペリエンスに直接影響を与える Web パフォーマンスの重要な側面です。 検索エンジンのランキング。 Web 開発者とサイト所有者は、CLS を最小限に抑え、訪問者がシームレスで視覚的に安定したエクスペリエンスを確保できるようにするための戦略を優先する必要があります。

原因に対処し、ベスト プラクティスを実行することで、Web サイトはユーザーの満足度を高めるだけでなく、オンラインでの全体的なプレゼンスも向上させることができます。デジタル環境が進化し続ける中、オンラインでの競争力を維持するには、CLS などのパフォーマンス指標に常に注意を払うことが重要です。

技術ブログの著者

その他の最近の ページスピードブログ

ニトロパックのレビュー。欺瞞的な速度の最適化

NitroPack は、疑わしい速度の最適化以外にも、Web サイトの検索エンジン最適化 (SEO) の取り組みに重大なリスクをもたらします。 Google などの検索エンジンは、重要なランキング要素としてユーザー エクスペリエンスとページ速度を優先します。 NitroPack は両方を強化すると主張していますが、その無差別な最適化技術は実際には SEO のパフォーマンスに悪影響を与える可能性があります。

ユーザー エクスペリエンスが PageSpeed スコアよりも優れている理由

高速な Web サイトの重要性はいくら強調してもしすぎることはありませんが、検索エンジン、特に Google の目においてユーザー エクスペリエンスが独自の、おそらくより重要な位置を占めていることを認識することが不可欠です。

パフォーマンスとユーザーエクスペリエンスのバランスをとる

オンライン ビジネスとデジタル プレゼンスのペースの速い世界では、Web サイトの所有者は、Web サイトを「環境に優しい」ものにするために、より高いページ速度スコアの終わりのない追求に巻き込まれることがよくあります。

他の カテゴリー

ウェブデザイン & SEO