Cumulative Layout Shift（CLS）は、ユーザーがウェブページを操作する際に予期しないレイアウトのシフトをどのくらいの頻度で経験するかを定量化し、視覚的な安定性を測定する指標です。高いCLSスコアはユーザーエクスペリエンスに影響し、不満や関与の低下につながる可能性があります。
WordPressユーザーにとって、CLSへの対処はサイトのパフォーマンスと訪問者の満足度を向上させるために不可欠です。このガイドでは、WordPressサイトでCumulative Layout Shiftの問題を理解し、診断し、修正する方法を解説します。
Contents
Cumulative Layout Shiftを理解する
Cumulative Layout Shiftとは、読み込み中にページ上の要素が予期せず移動することを指します。これらのシフトは、リソースが非同期で読み込まれるとき、または要素が既存のコンテンツの上にページに動的に追加されるときに発生する可能性があります。
CLSスコアはGoogleのCore Web Vitalsの一部であり、全体的なユーザーエクスペリエンスに貢献し、SEOランキングに影響する一連の指標です。
WordPressで高いCLSにつながる原因は以下のとおりです：
- 寸法のない画像：幅と高さが定義されていない画像が読み込まれると、シフトを引き起こす可能性があります。
- 寸法のない広告、埋め込み、iframe：広告や動画埋め込みなどの動的コンテンツは、適切にサイズ設定されていないとシフトを引き起こす可能性があります。
- 動的に挿入されるコンテンツ：動的に読み込まれるコンテンツは、他のコンテンツをページ内で下や周囲に押し出す可能性があります。
- FOIT/FOUTを引き起こすWebフォント：カスタムフォントが読み込まれるとき、Flash of Invisible Text（FOIT）またはFlash of Unstyled Text（FOUT）が発生し、レイアウトシフトを引き起こす可能性があります。
WordPressでCumulative Layout Shiftの問題を診断する
CLSの問題を修正する前に、それらを特定することが不可欠です。CLSの問題を診断するには、以下のツールを使用してください：
- Google Lighthouse：Chrome DevToolsの一部であるLighthouseは、CLSの問題を診断し修正案を提案するパフォーマンスチェックを含む自動監査を提供します。
- Chrome DevTools：Chrome DevToolsのPerformanceパネルまたはExperienceセクションを使用して、レイアウトシフトを観察し、それを引き起こしている要素を特定します。
- Google PageSpeed Insights：このツールは、CLSの問題を含む、ウェブページのパフォーマンスに関する詳細なレポートを提供します。
- Web Vitals Chrome Extension：この拡張機能は、ページのCore Web Vitals（CLSを含む）をリアルタイムで測定します。
- GTmetrix：GTmetrixは、CLSや他のCore Web Vitalsに関する詳細なレポートを提供し、問題のある要素を特定し、時間の経過に伴う改善を追跡します。
WordPressでCumulative Layout Shiftを修正する5つの方法
- 画像と動画の寸法を設定する
- プリロードされたローカルフォントをホストする
- フォントをプリロードする
- 動的に挿入されるコンテンツを避ける
- 画像、動画、iframeのLazy Loadingを有効にする
1. 画像と動画の寸法を設定する
WordPressサイトの画像と動画に正しい寸法を設定することは、Cumulative Layout Shifts（CLS）として知られる予期しないレイアウトシフトを防ぐ鍵です。以下は簡単な手順ガイドです：
WordPressダッシュボードにログインし、画像や動画を追加または編集したいページまたは投稿に移動します。
新しい画像を追加する場合は、+（ブロックを追加）ボタンをクリックし、画像ウィジェットを検索してクリックしてページに追加します。既存の画像を編集するには、エディタ内の画像をクリックします。
画像ブロックを選択した状態で、右側のサイドバーのブロック設定に移動します。ここで、画像の幅と高さをピクセル単位で手動で設定できます。お好みの寸法を入力するだけです。
あるいは、CSSのアスペクト比ボックスを実装して、画像と動画のスペースを事前に定義することを検討してください。このアプローチは固定寸法の設定と同じように機能し、事前にスペースを確保することで、レイアウトシフトを効果的に最小限に抑えます。
2. プリロードされたローカルフォントをホストする
プリロードされたフォントはウェブサイトを遅くする可能性があります。多くの場合、ゆっくり読み込まれ、完全に表示される前にフォールバックフォントに切り替わります。
TransfonterやOMGFプラグインなどのツールを使用してウェブサイト上で直接フォントをホストする方が良いでしょう。これらのツールを使えば、フォントURLを簡単に統合できます。以下にその方法を示します：
WordPressダッシュボードにログインし、プラグインセクションに移動して「新規追加」をクリックします。
右上の検索バーに「OMGF」と入力し、プラグインを見つけて「今すぐインストール」をクリックします。
インストール後、「有効化」をクリックします。
「設定」タブに移動し、「Optimize Google Fonts」オプションを選択します。
下にスクロールしてFont-Displayオプションを見つけ、「Swap」を選択し、「Save & Optimize」ボタンをクリックします。
これらの手順に従うことで、OMGFプラグインを使用してプリロードされたローカルフォントを効果的にホストし、WordPressのCumulative Layout Shiftsを軽減し、ユーザーエクスペリエンスとサイトパフォーマンスを向上させることができます。
3. フォントをプリロードする
フォントを素早く読み込むことは、ウェブサイトでのレイアウトシフトを避けるために不可欠です。人気のWordPressプラグインであるWP Rocketがこれをサポートします。フォントをプリロードする方法は次のとおりです：
WordPressダッシュボードにログインし、プラグインセクションに移動して「新規プラグインを追加」をクリックします。
「プラグインをアップロード」ボタンをクリックし、コンピュータからWP Rocketを選択して「今すぐインストール」ボタンをクリックします。
次に、「プラグインを有効化」ボタンをクリックします。
「設定」タブに移動し、WP Rocketをクリックします。
「Preload」タブをクリックして、フォントのプリロードに関する設定にアクセスします。
下にスクロールして「Preload Fonts」セクションを見つけます。先ほど特定したフォントのURLを所定のフィールドに貼り付けます。各URLが新しい行にあることを確認してください。次に「Save Changes」ボタンをクリックします。
WP Rocketを使用してフォントをプリロードすることで、ウェブサイトの読み込みがよりスムーズになり、CLSを減らしてユーザーエクスペリエンスを向上させることができます。
4. 動的に挿入されるコンテンツを避ける
動的に挿入される要素の使用を最小限に抑えて、ウェブサイトの安定性を向上させ、レイアウトシフトを防ぎましょう。
広告、ポップアップ、サードパーティのウィジェットなどのこれらの要素は、メインコンテンツの後に読み込まれると、予期しないレイアウト変更を引き起こす可能性があります。それらを管理する手順は次のとおりです：
使用を最小限に抑える：広告やポップアップなどの動的に挿入される要素の数を減らします。
スペースを予約する：CSSで動的要素の固定寸法（幅と高さ）を設定し、レイアウトシフトを防ぎます。
広告プレースホルダーのCSSの例：
.ad-placeholder {
width: 300px;
height: 250px;
background-color: #f0f0f0;
}プレースホルダーを使用する：レイアウトの整合性を保つために、動的コンテンツと同じサイズのプレースホルダー要素を活用します。
効率的な読み込み：必須コンテンツを優先し、重要でない要素にはlazy loadingを使用します。画像と広告に予約済みのスペースを確保し、レイアウトを安定に保ちます。
5. 画像、動画、iframeのLazy Loadingを有効にする
Lazy Loadingは、画像、動画、iframeが視野に入るまで読み込みを遅らせ、初期のページ読み込み時間を短縮し、Cumulative Layout Shift（CLS）を最小限に抑えます。WP Rocketを使えばlazy loadingを簡単に有効にできます。以下にその方法を示します：
まず、WP Rocketプラグインをインストールして有効化します。次に、WordPressダッシュボードから設定 > WP Rocketに移動します。
Mediaタブに移動し、画像、iframe、動画の「Lazy Load」オプションを有効にします。
その後、下にスクロールして「Save Changes」ボタンをクリックします。
WP Rocketを使用して画像、動画、iframeのlazy loadingを有効にすると、訪問者がサイトを訪れる際の初期データ読み込みが削減されます。これにより、読み込み時間が短縮され、レイアウトが安定し、Cumulative Layout Shiftsが減少し、ユーザーエクスペリエンスが向上します。
まとめ
この記事では、WordPressでCumulative Layout Shift（CLS）を最小限に抑える重要な方法を紹介しました。画像と動画に固定寸法を設定し、フォントをホストおよびプリロードし、動的コンテンツを避け、lazy loadingを使用することで、ウェブサイトをより速く、よりスムーズに読み込むことができます。
これらの変更はユーザーエクスペリエンスを向上させ、サイトのパフォーマンスとSEOを高めます。これらの戦略を試して、WordPressサイトをプロフェッショナルで魅力的に保ちましょう。
関連記事
- WordPressでアイキャッチ画像が表示されない
- WordPressで「Are You Sure You Want to Do This?」エラーを修正する
- WordPressで欠落しているPHP MySQL拡張を修正する
- 移行後にWordPressサイトが機能しない問題を修正する方法
- WordPressの「Sidebar Not Appearing」エラーを修正する方法
