WordPressで累積レイアウトシフト（CLS）を減らす方法
公開: 2022-07-07検索エンジン最適化（SEO）は、取扱説明書のない絶え間なく変化するゲームです。 コンテンツにキーワードを追加するだけでなく、最適化にはさらに多くのことがあります。 Googleのような検索エンジンは、サイトの読み込み速度、訪問者がサイトを操作するのがいかに簡単かなど、高品質で安全なWebエクスペリエンスの指標も考慮に入れています。
累積レイアウトシフト（CLS）は、ウェブページが読み込まれるときに再配置される量を測定するためにGoogleが使用する指標です。 大幅に移動するサイト（ユーザーが間違ったリンクをクリックしたり、コンテンツを読むのに問題が発生したりする）は、ユーザーエクスペリエンスを低下させ、Googleに嫌われます。
サイトのCLSスコアやその他のコアWebバイタルを確認することで、サイト全体の健全性を向上させ、ランキングを上げる方法を特定できます。
この記事では、CLSの原因、最小化する理由、およびCLSを削減するためのいくつかの方法について説明します。
累積レイアウトシフトとは何ですか？
累積レイアウトシフト（CLS）は、アセットの読み込み時にWebページ上の移動の重大度を測定します。 Webサイトを開くと、画像やビデオが異なる時間に表示され、読み込まれるときに他のコンテンツをプッシュすることがあることに気付いたかもしれません。
ここでは、CLSの動作を確認できます。
特に長いロード時間と組み合わせた悪いCLSスコアは、訪問者を苛立たせる可能性があります。 ページがカーソルの下に突然移動したために、誤って広告をクリックすることほど悪化することはほとんどありません。
CLSはWordPressサイトのユーザーエクスペリエンスにどのように影響しますか？
Webページをナビゲートするときに、シフトが煩わしい場合があります。 読み込もうとしているときにテキストがジャンプしたり、ボタンをクリックしたときにボタンが移動したり、他の何かとやり取りしたいときに誤って広告やリンクをクリックしたりする可能性があります。
訪問者がページが完全に読み込まれ、シフトする要素と戦うまで数秒待たなければならない場合、訪問者は単にサイトを離れる可能性があります。 これは、すべてのページが大幅にシフトする場合に特に当てはまります。 訪問者は、数回のミスクリックまたは過度の待機時間の後にバウンスする可能性があります。
CLSスコアには何が影響しますか？
CLSスコアが低いのは、主要なサイト要素がすべて異なる時間にページに読み込まれることが原因です。 最悪の原因は、写真、ビデオ、および広告である傾向があります。これらはテキストよりもロードが遅いことが多く、画面サイズに基づいて調整する必要がある場合があるためです。
また、読み込み時間を短縮するとUX全体を改善できますが、実際にはシフトの量を減らすことはできず、影響を軽減するだけです。
CLSスコアに影響を与える可能性のある5つの要因は次のとおりです。
1.サイズ属性のない画像と動画
サイズ属性が事前設定されていないと、画像や動画などのビジュアルコンテンツが小さいプレースホルダーに読み込まれることがよくあります。 この設定により、プレースホルダー周辺のコンテンツが読み込まれる可能性があります。 次に、画像が到着すると、より多くのスペースを占有し、隣接する要素の周りを移動します。
サイズ属性を設定することにより、プレースホルダーは要素と同じスペースを占有します。 そのため、同じ領域に読み込まれ、近くのコンテンツの配置には影響しません。
次の図では、GameStopホームページにロードされている初期の要素をいくつか見ることができます。
画像は数秒後に読み込まれ、トップセラーを押し下げて見えなくなります。 これは代表的な例であり、読み込みの遅い画像が事前設定された境界なしで入力されると、読み込みの速いテキストが移動します。
このシナリオは、まさにサイトで回避または最小化する必要があるシナリオです。
2.サイズ属性のない広告と埋め込み
ウェブサイトで広告を販売または表示する場合、それらは画像またはビデオ形式である可能性があります。 上記の例のように、これらの広告がサイズ属性なしで読み込まれる場合、他のコンテンツよりも遅くページにヒットし、状況が変化する可能性があります。
これは、広告を選択する一部のサードパーティサービスに特に当てはまります。 これらの広告は、常に同じサイズであるとは限らず、同じスペースに収まるとは限りません。
小さなグラフィックは問題にならないかもしれません。 ただし、大きな動画広告の読み込みが遅く、多くのスペースを占める場合、ページ上の他の要素が劇的に移動する可能性があります。
広告と埋め込みコンテンツを最適化してすばやく読み込むことで、煩わしさを軽減できますが、CLSスコアは依然として低下する可能性があります。 訪問者が誤ってサイトの広告をクリックする原因となるレイアウトの変更は、訪問者をだまされたと感じさせ、戻ってくる可能性を損なう可能性があります。
3.カスタムフォント
カスタムフォントは通常、Webサーバーに保存されます。 彼らはあなたのブログやウェブサイトのためのより多くのカスタマイズオプションを提供することができますが、それらはしばしば既存のテキストの上にロードされる必要があります。
たとえば、Didotフォントがオフラインで表示される可能性はほとんどありません（古いフランス語の本を見つけた場合を除く）。 このフォントは、フォーマルでエレガントな雰囲気を提供し、高級レストランやアンティーク関連のWebサイトに最適なオプションです。
ただし、このフォントがサーバーでホストされている場合は、訪問者がサイトにアクセスするときに、各訪問者のブラウザにダウンロードする必要があります。 この設定では、フォントがダウンロードされるまでテキストが表示されない場合があります。 次に、すべてのフォントが突然表示され、ページに既に読み込まれているアセットが混乱している可能性があります。
もう1つのオプションは、すべてのテキストをSerifなどのより基本的なフォントでロードすることです。 その後、ブラウザに読み込まれると、Didotに置き換えられます。 異なるフォントの文字は通常同じ量のスペースを占めるわけではないため、フォントを変更すると、テキストが移動し、プロセスで隣接する要素がプッシュまたはプルされます。
これらのシフトはCLSスコアを増加させるので、それらを回避することが最善の利益になります。 幸いなことに、いくつかの回避策では、ロード時間の遅延を解決しながら、カスタムフォントを引き続き使用できます。 これらのメソッドについては、投稿の後半で詳しく説明します。
4.合成されていないアニメーション
合成されていないアニメーションは多くのリソースを必要とし、ブラウザが1回以上レンダリングする必要があります。 この問題は、要求の少ないアニメーションを使用するか、都合のよい時間にロードするようにアニメーションを戦略的に配置することで軽減できます。
ブラウザが基本的なレベルでWebサイトをロードしているときは、ビジュアルをレンダリングしてページに「ペイント」する必要があります。 このプロセスは、表示する色を各ピクセルに「通知」します。 残念ながら、合成されていないアニメーションにより、レンダリングプロセスが再開される可能性があります。
結果は部分的にロードされたページです。 ブラウザはすでにいくつかの作業を行っており、アニメーションがトリガーされ、ブラウザが最初からやり直してすべてを再度レンダリングするように強制されます。 このプロセスでは、特定の要素を複数回レンダリングする必要があり、レイアウトがずれる可能性があるため、読み込み時間が長くなります。
5.動的に注入されたコンテンツ
動的に挿入されるコンテンツは、特定の要因に基づいて変化するWebページ要素です。 多くの場合、これらの要因はユーザーによって異なり、よりパーソナライズされたエクスペリエンスを可能にします。
たとえば、オンラインストアは、訪問者の履歴に基づいて製品を提案する場合があります。 天気予報のWebサイトは、ユーザーのデバイスの位置データを使用して、その地域の結果を表示する場合があります。
動的コンテンツは、より関連性の高いエクスペリエンスと製品提供により、コンバージョンを増やすことができます。 それでも、その反動的な性質は、リソースに負担をかけ、レイアウトの変更につながる可能性があります。
上記の天気の例のように、さまざまな天気情報、都市の名前、または使用される言語でさえ、ページ上のさまざまな量のスペースを占有します。 晴れた空と穏やかな天気の町は、来たるべきハリケーンの十字線にある都市よりもはるかに簡単な入り口かもしれません。
その結果、前者の例では読み込まれるコンテンツが少なくなり、後者の例では読み込まれるコンテンツが多くなり、画面上で隣接する要素がどのようにシフトされるかに影響します。 サイズや量が変化する可能性のある動的に挿入されるコンテンツと同様に、これはページのCLSに影響を与えます。
WordPressで累積レイアウトシフトを減らす方法
WordPressのレイアウトシフトの主な要因がわかったので、その影響を減らすことに取り組むことができます。
Webサイトに基本的な変更を加えるときはいつでも、バックアップを作成し、ステージングサイトを使用して、問題が発生する前に問題を検出することをお勧めします。
以下に、CLSを減らし、サイトのユーザーエクスペリエンスを向上させるためのソリューションを示します。
1. CoreWebVitals用に設計されたプラグインをインストールします
Core Web Vitalsは、次の3つの指標を検討しています。
- 累積レイアウトシフト（CLS）
- 最初の入力遅延（FID）
- 最大のコンテンツフルペイント（LCP）
Jetpack Boostを使用すると、WordPressダッシュボードから直接CoreWebVitalsやその他のパフォーマンスメトリックを監視および改善できます。
それはあなたのウェブサイトをスキャンし、改善すべき領域を含むパフォーマンスレポートを返します。 ただし、サイトの速度を低下させ、ユーザーエクスペリエンスを損なう可能性のある一般的な問題に対するワンクリックソリューションでは、推奨事項を超えています。
2.画像と動画のサイズを設定します
ページ上の他の要素と一緒に画像や動画を使用する場合は、幅と高さの属性を割り当てることを検討してください。 これらの設定により、グラフィックに必要なスペースが予約され、シフトが回避されます。
幸い、WordPressでは寸法の設定は非常に簡単です。 埋め込まれた画像をクリックして、画像のサイズを適切な値に調整するだけです。
アスペクト比ボックスを使用して、CSSで視覚要素をロードする前にスペースを割り当てることもできます。 これらのボックスは、設定されたサイズと同じ効果があり、画像とビデオのスペースを事前に割り当てることでレイアウトのずれを減らします。
3.広告と埋め込みコンテンツのサイズを設定します
上記の手順と同様に、ページシフトを引き起こす可能性のある広告やその他の埋め込みコンテンツ用のスペースを作成することを検討する必要があります。 これを行うには、これらの要素の寸法を設定するか、CSSを使用してスペースを割り当てます。
広告がサードパーティによって作成されている場合、そのサイズを予測するのは難しい場合があります。 そのため、広告が読み込まれるときに他のコンテンツが重ならないように、確保するスペースの量を見積もり、ボックス化することができます。
この設定により、小さい広告の周囲に余分な空白が生じる可能性があります。 それでも、これは通常、ページ上の他の要素を劇的に移動させる大きな広告（ロードに時間がかかることが多い）よりも優れています。
4.カスタムフォントをローカルでホストし、それらをプリロードします
以前、カスタムフォントと、それらがどのようにシフトを引き起こす可能性があるかについて説明しました。 幸い、問題を回避するために、これらのフォントをサーバー上でローカルにホストできます。
これを行うには、google-webfonts-helperに移動し、左側のオプションから使用するフォントを選択します。
次に、使用するオプション（ほとんどの場合、デフォルト）を選択し、手順3の[ベストサポート]の選択からCSSをコピーします。
このコードをCSSファイルに貼り付けます。 これで、訪問者がすでにフォントを持っているかどうかがサイトで確認されます。 そうでない場合、Webサイトはサーバーからロードします。これは、Web上の他の場所からフェッチするよりも高速です。
WordPressでフォントをプリロードするための最も簡単なソリューションは、GoogleFontsTypographyプラグインです。 このツールは、追加のフォントオプションを提供し、それらをより効率的にロードして、遅延を最小限に抑え、CLSを回避します。
もう1つの解決策はより技術的であり、アセットがサイトに読み込まれる順序を並べ替える必要があります。 この方法では、Webフォントファイルをロードシーケンスの早い段階で挿入して、必要なときに準備ができていることを確認します。 ただし、このプロセスには、平均的なWordPressユーザーにとっては少し高度なカスタムコーディングが必要です。
5.動的に挿入されたコンテンツのプレースホルダーを設定します
動的に挿入されたコンテンツは便利な機能ですが、レイアウトの変更を回避するために戦略的に実装する必要があります。 重要なのは、注入されたコンテンツの最大バージョンに合わせて、隣接する要素をこぼしたり移動したりすることなく、十分なスペースを割り当てることです。
挿入されたすべてのコンテンツを同じサイズまたは可能な限り類似させることで、このプロセスを簡素化できます。 この設定により、ページ上にさまざまな量のスペースを必要とするさまざまな結果を防ぐことができます。
スペースを割り当てる実際の方法は、コンテンツとそれを注入するためのアプローチによって異なります。 ただし、通常は、ロードするアセットの固定位置とプリセット境界を追加する必要があります。
6.アニメーション用のElementorプラグイン用のHappyAddonsを使用します
アニメーションは読み込み時間が長くなり、CLSスコアに悪影響を与える可能性がありますが、Webページの重要な要素である場合もあります。
アニメーションを使い続けたい場合は、Happy Addons for Elementorプラグインを使用してアニメーションを安全に挿入し、読み込みの問題を防ぐことを検討してください。
このプラグインはCSSを処理して、可能な限りアニメーションプロパティを変換および変換します。 Happy Addonsはこのプロセスを最適化して、読み込み時間を最小限に抑え、Webサイトでのシフトの影響を減らします。 さらに、無料で使用できます。
WordPressサイトのCLSスコアを測定するにはどうすればよいですか？
CLSはWebサイトのコアWebバイタルの重要な部分であるため、ほとんどのサイトヘルスレポートまたは監視ツールでCLSが強調表示されます。 以下は、サイトのCLSスコアを確認するための最良のオプションの一部です。
1. PageSpeed Insights
PageSpeed Insightsは、CoreWebVitalsに関するレポートを提供するシンプルなリソースです。 URLを入力するだけで、いくつかのコンポーネントが分析され、スコアが付けられ、改善のためのヒントが提供されます。
PageSpeed Insightsは、モバイルデバイスとデスクトップデバイスのレポートを実行できるため、あらゆる種類の訪問者のWebサイトの弱点を特定できます。 また、サイトのパフォーマンスの問題の詳細な視覚的内訳のツリーマップを表示することもできます。
2.Google検索コンソール
Google Search Consoleは、検索結果に関連するサイトの状態に焦点を当てたGoogleのレポートジェネレータです。 PageSpeed Insightsと同様に、サイトのモバイルバージョンとデスクトップバージョンのレポートを、FID、LCP、CLSなどの指標とともに表示できます。
Google検索コンソールを使用するには、最初にドメインの所有権を確認する必要があります。 次に、レポートはサイトのパフォーマンスの低い側面にフラグを立て、それらを特定して解決できるようにします。
3.灯台
ページ品質を評価するためのもう1つのGoogleツールはLighthouseです。これは、GoogleChromeブラウザを使用している人なら誰でも簡単に使用できます。 アクセシビリティ、パフォーマンス、SEOなどについてWebサイトをリアルタイムで監視します。
Lighthouseを見つけるには、Google Chromeブラウザーの設定に移動し、[その他のツール]にカーソルを合わせて、下部にある[開発者ツール]を選択します。
次に、上部のメニューを展開して、 Lighthouseを選択する必要があります。 そこから、現在表示しているページのレポートを実行できます。
必要なオプションを選択して、[レポートの生成]ボタンをクリックするだけです。
各主要指標の上部に色分けされたスコアが表示されます。 次に、それぞれをクリックして下にスクロールし、詳細な分析と改善の機会を確認します。
今すぐCLSスコアを簡単に最適化するにはどうすればよいですか？
上記のツールとヒントを使用して、CLSを含むコアWebバイタルの弱点を特定できます。 これらの問題のいくつかを修正し始めると、サイトの状態が改善され、将来同様の問題を回避する方法を学ぶことができます。
WordPressサイトにJetpackBoostプラグインをインストールすることは、始めるのに最適な方法です。 このツールは使いやすく、CLSスコアをすぐに向上させるのに役立ちます。
上記の他のソリューションを利用すると、CLSスコアが良好な状態に保たれ、サイトのSEOとUXが向上します。 レポートを使用して、すべてが緑色に戻るまで、LCPやFIDなどの他のWebVitalsスコアをターゲットにすることもできます。
JetpackBoostの使用を開始する
開始するには、WordPressプラグインページからJetpack Boostをインストールするだけです（無料です）。
ツールがアクティブになったら、ダッシュボードの左側にある[Jetpack]タブから[ Boost ]を選択します。
これで、モバイルデバイスとデスクトップデバイスでのサイトのパフォーマンススコアが表示されます。
ページのさらに下で、CSSの読み込み、必須ではないJavaScriptの延期、遅延画像の読み込みなど、追加のパフォーマンス最適化設定をオンにすることができます。 これらの各構成により、CoreWebVitalsスコアを向上させることができます。
よくある質問
以下は、WordPressのCLSに関するよくある質問と回答で、飛び込むときに役立つ場合があります。
良いCLSスコアとは何ですか？
0.1未満のものは、良好なCLSスコアと見なされます。
この数値は、元のロードサイトと要素の最終的な配置の差です。 スコアは累積的です。つまり、異なる要素からの複数のインスタンスを使用します。
0.1から0.25の間のスコアは問題ないと見なされ、改善が必要です。 0.25を超えるスコアはすべて不良です。 彼らは、CLSがサイトのユーザビリティに悪影響を及ぼしていることを示唆しています。
レイアウトの変更が避けられない場合はどうなりますか？
知識不足やページ上の要素の性質により、レイアウトの変更が避けられない場合があります。 心配しないで！
ここでいくつかのレイアウトを変更しても、サイトに大きな影響を与えることはありません。 結局のところ、CLSはページ全体から編集された評価です。 スコアがフラットゼロでなくても、いくつかのマイナーなインスタンスで全体的な評価を上げることができます。
一部のページでは、シフトを解決できない場合があります。 繰り返しになりますが、サイトの全体的なUXの小さな傷は、懸念の主な原因にはなりません。
ユーザーの操作は累積レイアウトシフトに影響しますか？
いいえ！ レイアウトシフトをトリガーするユーザーアクティビティは、CLSへの影響が少なく、アクションの直後に結果が読み込まれる場合は登録されないと考えられます。 可変コンテンツをロードする前にユーザーアクションを要求することは、実際には、状況によってはCLSを回避するのに役立つトリックになる可能性があります。
たとえば、動的に挿入されたコンテンツを使用して、訪問者のために近くの店舗の地図を読み込んだとします。 これが自動的に発生した場合、ユーザーの位置データを取得して地図を読み込むときに、レイアウトがずれる可能性があります。 ただし、ユーザーが地図を読み込むためにクリックする必要のあるボタンがある場合、この操作により、レイアウトのシフトがページのCLSスコアに影響を与えるのを防ぐことができます。
WordPressの累積レイアウトシフトを改善する
WordPressで累積レイアウトシフト（CLS）を修正する方法とその測定方法がわかったので、WebサイトのSEOとUXを改善できます。 シフトを減らすと、訪問者にとってWebサイトのナビゲートがより快適になり、検索エンジンの結果ページでのランキングも上がるはずです。
CLSスコアを最小化するには、次のことを忘れないでください。
- JetpackBoostのようなコアWebバイタルプラグインをインストールします。
- 画像、動画、広告、その他の埋め込みコンテンツのサイズを設定します。
- Webフォントをローカルでホストし、それらをプリロードします。
- 動的に挿入されるコンテンツのプレースホルダーを設定します。
- アニメーションには、Happy AddonsforElementorプラグインを使用してください。
累積レイアウトシフトは、サイトのSEOに影響を与える1つの要因にすぎませんが、UXに関する重要な考慮事項でもあります。 少しの作業で、検索ランキングと訪問者が到着した後のエクスペリエンスを永続的に改善できます。