ウェブサイト検索

累積レイアウト シフト (CLS) を改善する方法

ほとんどの Web サイトは、画面サイズや解像度が異なるさまざまなデバイスからアクセスできるように構築されています。したがって、複数のプラットフォーム間で同じエクスペリエンスを維持するのは困難な場合があります。 WordPress を使用すると、クロスプラットフォームの Web デザインが簡単になります。ただし、どのような形式のソフトウェア開発でも、万能のソリューションを構築するのは複雑になる可能性があります。

Web 開発の場合、ユーザーが Web サイト上のページからページへ移動する際に、いわゆる累積レイアウト シフト (CLS) が発生することがあります。ページの視覚要素が突然変更されたり、誤って読み込まれたりする場合です。突然、テキストが大きくなったり小さくなったり、画像の位置が変わったり、ページ全体のレイアウトが変わったりします。

なぜこのようなことが起こるのでしょうか?また、どうすれば修正できるでしょうか?このガイドでは、CLS とは何か、そして Web サイトで CLS を防ぐ方法について説明します。

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

CLS の最も一般的な認識可能な形式は、画像の読み込みの遅延です。視覚要素が多く含まれる複雑な Web サイトでは、テキストがメディア要素の前に読み込まれることがよくあります。さらに、すべての視覚要素が最終的に読み込まれると、Web ページのレイアウトが変わります。これらのインシデントは、スクロールしているかどうかに関係なく発生します。

Web ページの CLS スコアが高い場合、いつ完全に読み込まれたかを判断するのは困難です。 Web サイトが複雑でメディアが多いほど、エクスペリエンスのレイアウトが変更される可能性が高くなります。

たとえば、視覚要素がほとんどない単純な検索エンジンの Web ページには、CLS がほとんどまたはまったくありません。ただし、これは、すべての複雑な Web サイトや多機能 Web サイトの CLS スコアが高いことを意味するわけではありません。たとえば、Amazon のオンライン ストアにはウィジェット、画像、リンクが豊富にありますが、認識されるような変化もなく、すぐに読み込まれます。

累積的なレイアウトのずれの原因は何ですか?

CLS は、Web ブラウザが異なる時間に要素を順番に読み込むために発生する傾向があります。さらに、Web サイト上に不明なプロパティ (サイズなど) のメディア要素が存在する場合があります。

メディア要素 (画像など) の幅または高さを指定しない場合、Web ページが完全に読み込まれるまで、Web ブラウザーはどのくらいのスペースを割り当てるべきかわかりません。そこで大幅なレイアウト変更。まとめると、ほとんどの CLS の主な理由は、非効率的なロードです。

リアルタイムでレイアウトが変化していることに気づかない場合でも、必ずしも変化が発生していないことを意味するわけではないことに注意することが重要です。 Web ブラウザは Web サイトのデータをキャッシュすることが多いため、Web ページに再アクセスしたときに簡単に Web ページを読み込むことができます。 CLS スコアを測定することは、Web サイトに大幅なレイアウト変更が発生しているかどうかを判断する最良の方法です。

ウェブサイトの CLS スコアを測定する方法

CLS スコアは、Web ページがその存続期間中に経験するレイアウトのシフトの数を示します。 CLS スコアは、いわゆるセッション ウィンドウから導き出すことができます。セッション ウィンドウには、5 秒間隔内に発生するレイアウト シフトの数が記述されます。 CLS スコアを計算するには、距離の割合と衝撃の割合を掛ける必要があります。

CLS Score = Distance Fraction x Impact Fraction

影響率は、不安定な要素が 2 つのフレーム間の知覚可能な領域にどの程度影響を与えるかを表します。距離の割合は、要素がフレーム間で移動した量を表します。 CLS スコアが 0.10 以下 (0.0 ～ 0.10) であれば、優れています。 CLS スコアが 0.10 を超え 0.25 未満 (0.10 -0.25) の場合は中程度であり、改善が必要です。一方、CLS スコアが 0.25 を超える (0.25 <) 場合は不良です。

これらの概念は少し理解しにくいかもしれません。幸いなことに、Web サイトの CLS を手動で計算する必要はありません。 CLS スコアを計算できるオンライン (およびオフライン) ツールが多数あります。

現在、Web ページの CLS を測定する最も一般的な方法は、Google の PageSpeed Insights を使用することです。これにより、モバイルとデスクトップの両方の Web サイトのユーザー エクスペリエンス統計を確認できます。

その他の CLS ツールには次のものがあります。

  • GTメトリックス
  • Google Web Vitals CLS デバッガー
  • Google Chrome Web Vitals 拡張機能
  • Google ライトハウス
  • ウェブページのテスト

Google の PageSpeed Insights が最もよく知られているため、例としてそれを使用します。

CLS スコアを測定するには、PageSpeed Insight のホームページに移動し、Web ページの URL を上部のテキスト フィールドに挿入して、[<i>分析] ボタンをクリックします。 Web サイトの人気とインターネット速度に応じて、PageSpeed Insights は数秒以内にレポートを提供します。

CLS スコアを見つけるには、「Core Web Vitals Assessment」セクションまで下にスクロールします。

Amazon のホームページを例にすると、CLS スコアは 0.10 未満になる可能性が高くなります。テスト中に、モバイル Web サイトの CLS スコアが 0.01 であるのに対し、デスクトップ バージョンのスコアは 0.05 であることがわかりました。

しかし、サイトがリソースを大量に消費している場合、どうやってそれを行うのでしょうか? Amazon のような CLS スコアを得る方法を見てみましょう。

CLSを最適化する方法

CLS スコアが高い原因となっている要素を確認する最良の方法は、Google Web Vitals CLS デバッガーを使用することです。ウェブサイト上のすべての変化する機能を GIF で表示します。 CLS スコアが高くなる最も一般的な原因は、広告とメディア ファイルです。その他の原因には、フォント、非同期 CSS、アニメーション、および Iframe が含まれる可能性があります。 CLS スコアを改善するには、これらの要素を最適化する必要があります。

Web サイトに適切な CLS が設定されていることを確認することは、Web サイトに強力なローカル SEO と関連性の高いコンテンツが含まれていることを確認することと同じくらい重要です。 Google の検索エンジンは、優れたユーザー エクスペリエンスを提供し、適切に最適化された Web サイトを優先する傾向があります。

そのために、サイトの CLS スコアを改善するためのいくつかの手順を以下に示します。

すべてのメディア ファイルにディメンション プロパティを追加する

不明なプロパティを持つメディア ファイルをアップロードすると、Web ブラウザーが画像のサイズを把握し、読み込み後にレイアウトの方向を決定する必要があるため、レイアウトが変更されるリスクが高まります。このような状況は、高解像度の画像やファイルが大きい場合に発生する可能性が高くなります。

サイズプロパティが欠落しているメディア ファイルをアップロードすると、Web ブラウザーに多大な作業を委ねることになります。アップロードするビジュアル メディア ファイルごとに高さと幅のプロパティを追加する必要があります。これを行うには、ソース コードを表示し、幅と高さのプロパティを手動で追加します。

フォントがローカルにロードされていることを確認する

フォントの読み込み中、テキストは表示されたままでなければなりません。これを実現するための最初のステップは、フォントがサードパーティのフォント Web サイトから取得されるのではなく、ローカルに読み込まれるようにすることです。

フォントがサードパーティの Web サイトから取得されていることがわかった場合は、OMGF などのプラグインを使用してフォントをローカルにホストし、より速く読み込むことができます。これは CLS スコアを向上させるだけでなく、環境に優しい設計への一歩でもあります。

FOIT と FOUT を避ける

フォールバック フォントの指定に失敗すると、不可視テキストのフラッシュ (FOIT) が発生します。 Web ブラウザがフォントを読み込むか、代替フォントを見つけようとすると、テキストがあるべき場所に空のスペースがユーザーに表示されます。

スタイルなしテキストのフラッシュ中 (FOUT)、指定したフォントを読み込めるようになるまで、Web ブラウザーのデフォルトのフォールバック フォントが表示されます。これを修正するには、<i>font-display: swap プロパティを追加します。

Google からフォントをダウンロードしたことがある場合は、このタグが各 URL の末尾に追加されることに気づくでしょう。このプロパティを自分で追加する最も簡単な方法は、WP の Swap Google Fonts Display プラグインを使用することです。

ただし、このプラグインは Google フォントに対してのみ機能し、それらの URL に表示切り替えプロパティを自動的に追加することに注意してください。フォントをローカルでホストしている場合は、String Locator プラグインを使用してすべてのフォント ファイルを検索し、変更できます。 WP でフォント スタイルシートを開いて変更する必要があります。

あるいは、フォント スワップ プロパティを追加してフォントを自動的に最適化するキャッシュ プラグインなどを使用することもできます。

フォントのプリロード

フォントをローカルでホストしていることを確認するには、次のようなプラグインを使用してフォントをプリロードします。

  • WPロケット
  • Pre* パーティー リソースのヒント
  • パーマターズ

これらのプラグインを使用する余裕がない場合は、header.php ファイルを編集してフォントをプリロードできます。フォントをプリロードした後は、必ずサイトを徹底的にテストしてください。あまりにも多くのフォントをプリロードすると、Web サイトに悪影響を及ぼす可能性があります。したがって、主要なバックエンドの可能性と同様に、事前に WordPress サイトをバックアップすることをお勧めします。

CSS配信の最適化を無効にする

WP Rocket を使用して CSS 配信を最適化している場合、または LiteSpeed Cache で CSS を非同期的に読み込んでいる場合、スタイルのないコンテンツのフラッシュ (FOUC) が発生する可能性があります。 CLS スコアを改善したい場合は、それぞれのプラグインでこれらのオプションを無効にすることをお勧めします。

あるいは、いわゆるフォールバック クリティカル CSS を設定することもできます。これには、クリティカル パス CSS ジェネレーターなどのツールを使用して重要なフォールバック スクリプトを生成することが含まれます。

レンダリングをブロックするスクリプトを削除すると、CLS スコアが低下する可能性があります。最初に CSS 配信の最適化を有効にして CLS をテストし、次に比較のために無効にしてテストすることをお勧めします。

アニメーションを無効にする

アニメーションを使用している場合は、アニメーションが Web サイトの読み込み時間を妨げる可能性があるため、Web サイトのモバイル バージョンではアニメーションを無効にすることをお勧めします。 Web サイトにアニメーションを使用したい場合は、CSS 変換および翻訳オプションを使用することをお勧めします。

あるいは、Happy Addons Elementor プラグインを使用することもできます。これにより、レイアウトを変更せずに要素をアニメーション化できます。

ほとんどのレイアウトの変化をなくす最善の方法は、Web ページの読み込み方法を変更することです。その結果、WordPress サイトの速度と効率が向上します。いつものように、ユーザー エクスペリエンスを向上させることが重要です。 Web サイトの応答性が高ければ高いほど、ユーザーが Web サイトをブックマークして再訪問する可能性が高くなります。