累積レイアウトシフト (CLS) とは何ですか?

CLSは視覚的な安定性、つまり読み込み中にページコンテンツがどれだけ移動するかを測定します。画像のサイズを指定し、挿入コンテンツを避け、プロパティの変更ではなくCSS変換を使用することで、CLSを0.1未満に保ちましょう。

累積レイアウトシフト (CLS) とは何ですか?

CLSはGoogleのCore Web Vitalsの1つであり、 視覚的安定性 ページ上で。ページの読み込み中に、テキスト、画像、ボタンが突然動くなど、コンテンツが予期せず移動するインスタンスを追跡します。

例えば、ボタンをクリックしようとした際にその上に広告が読み込まれ、ボタンが移動した場合、これはレイアウトシフトとしてカウントされます。CLSが高いページは、ユーザーエクスペリエンスの低下、直帰率の上昇、検索結果のランキング低下につながる可能性があります。

CLS を監視および改善することで、ユーザーと SEO パフォーマンスの両方にメリットをもたらす、よりスムーズで予測可能なブラウジングエクスペリエンスを実現できます。

さまざまなCMSプラットフォームにおけるCLS

WordPress

WordPressサイトでは、重いプラグイン、読み込みの遅い画像、最適化されていないテーマなどが原因で、CLSの問題が発生することがよくあります。画像サイズの最適化、遅延読み込み、軽量テーマの使用により、レイアウトのずれを軽減できます。

Shopifyサービス

Shopifyストアでは、動的な商品画像、ポップアップ、プロモーションバナーなどにより、CLS（コンテンツ品質の低下）が発生する可能性があります。適切な画像サイズを設定し、サードパーティのスクリプトを最小限に抑えることで、レイアウトを安定させることができます。

ウィックス

Wix ユーザーは、画像のサイズ変更、自動読み込みバナーの回避、レイアウトのずれを最小限に抑えるためのレスポンシブデザインの確認に重点を置く必要があります。

ウェブフロー

Webflowでは要素の位置とサイズを正確に制御できるため、 CLS一貫した間隔、静的な寸法、制御されたアニメーションが重要です。

カスタムCMS

大規模なカスタム CMS プラットフォームでは、すべてのページ、特にトラフィックの多いランディングページで CLS を低く抑えるために、厳密なテスト、CSS の最適化、および慎重なスクリプト管理が必要です。

業界を超えたCLS

eコマース

CLSが高いと、特に商品ページで買い物客のストレスが溜まります。画像、値札、CTAボタンを常に安定させることで、コンバージョン率が向上します。

地元企業

予期しないレイアウトの変化によってユーザーがサイトに問い合わせたりナビゲートしたりすることを思いとどまらせる可能性があるため、小規模なサービス Web サイトでも CLS が低いとメリットがあります。

SaaSの

SaaS プラットフォームの場合、安定したダッシュボード、機能の説明、サインアップフォームにより、ユーザーの不満を防ぎ、オンボーディングエクスペリエンスが向上します。

ブログと出版社

ブロガーは、画像、広告、埋め込みメディアが予期せず動かないようにし、読者の関心を維持し、直帰率を下げる必要があります。

CLSのすべきこと、すべきでないこと

ドーズ

画像とビデオの幅と高さを明示的に設定してください。
広告、バナー、動的コンテンツ用のスペースを確保してください。
Google PageSpeed Insights や Lighthouse などのツールを使用してページをテストします。
安定したフォントを実装し、ページの読み込み中にレイアウトがシフトしないようにします。

しないでください

予約されたスペースなしでコンテンツが非同期的に読み込まれることを許可しません。
CLS を修正するためにプラグインだけに頼らないでください。
突然表示されるポップアップやバナーを追加しないでください。
モバイルの応答性を無視しないでください。CLS の問題はモバイルでは悪化することがよくあります。

避けるべき一般的な間違い

画像、ビデオ、埋め込みのサイズを定義できません。
予約されたスペースがないためにサードパーティのスクリプトを遅れて読み込みます。
レイアウトシフトをトリガーするアニメーションを無視します。
コンテンツの多いページのモバイル最適化を無視します。

よくあるご質問