WordPressの累積レイアウトシフト（CLS）を改善する方法

公開: 2021-12-16

ほとんどの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スコア=距離の割合x影響の割合

影響の割合は、不安定な要素が2つのフレーム間の知覚可能な領域にどの程度影響するかを示します。距離の割合は、要素がフレーム間でシフトした量を表します。 0.10以下（0.0 – 0.10）のCLSスコアは素晴らしいです。 0.10を超え0.25（0.10 -0.25）未満のCLSスコアは中程度であり、改善が必要ですが、0.25（0.25 <）を超えるCLSスコアは不十分です。

これらの概念は、頭を包み込むのが少し難しいかもしれません。幸い、WebサイトのCLSを手動で計算する必要はありません。 CLSスコアを計算できるオンライン（およびオフライン）ツールが多数あります。

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

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

GTメトリックス
Google WebVitalsCLSデバッガー
Google Chrome Web Vitals Extension
Google灯台
Webページテスト

GoogleのPageSpeedInsightsが最もよく知られているので、この例で使用します。

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

CLSスコアを見つけるには、[コアWebバイタルアセスメント]セクションまで下にスクロールします。

GoogleのPageSpeedInsights

例としてAmazonのホームページを使用すると、おそらく、CLSスコアは0.10未満であることがわかります。テストの結果、モバイルWebサイトのCLSスコアは0.01でしたが、デスクトップバージョンのスコアは0.05でした。

しかし、彼らのサイトが非常にリソースを大量に消費している場合、彼らはどのようにそれを行うのでしょうか？アマゾンのようなCLSスコアを取得する方法も見てみましょう。

CLSを最適化する方法

どの要素が高いCLSスコアを引き起こしているかを確認する最良の方法は、Google WebVitalsCLSデバッガーを使用することです。それはあなたのウェブサイト上のすべての変化する機能のGIFをあなたに示します。広告とメディアファイルは、CLSスコアが高い場合の最も一般的な原因です。その他の原因には、フォント、非同期CSS、アニメーション、Iframeなどがあります。 CLSスコアを向上させるには、これらの要素を最適化する必要があります。

あなたのウェブサイトが立派なCLSを持っていることを保証することは、それが強力なローカルSEOと関連するコンテンツを持っていることを保証することと同じくらい重要です。 Googleの検索エンジンは、優れたユーザーエクスペリエンスを提供し、十分に最適化されたWebサイトを優先する傾向があります。

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

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

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

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

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

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

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

FOITとFOUTを避けてください

フォールバックフォントを指定しなかった場合、非表示テキストのフラッシュ（FOIT）が発生します。 Webブラウザーがフォントをロードしたり、別のフォントを見つけたりしようとしている間、ユーザーにはテキストがあるべき場所に空のスペースが表示されます。

スタイルなしテキストのフラッシュ中（FOUT）、指定されたフォントをロードできるようになるまで、Webブラウザーのデフォルトのフォールバックフォントが表示されます。これを修正するには、プロパティfont-display：swapを追加します。

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

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

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

フォントのプリロード

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

WPロケット
プレ*パーティーリソースのヒント
パーマター

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

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

WP Rocketを使用してCSS配信を最適化するか、LiteSpeed Cacheと非同期でCSSをロードしている場合、スタイルなしコンテンツ（FOUC）のフラッシュが発生する可能性があります。 CLSスコアを向上させたい場合は、それぞれのプラグインでこれらのオプションを無効にすることをお勧めします。

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

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

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

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

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

ほとんどのレイアウトシフトを排除する最良の方法は、Webページのロード方法を変更することです。次に、WordPressサイトの速度と効率を上げることができます。いつものように、それはユーザーエクスペリエンスを改善することです。 Webサイトの応答性が高いほど、ユーザーがWebサイトをブックマークして再訪問する可能性が高くなります。