ビギナーズガイド：WordPressの累積レイアウトシフトの修正
公開: 2021-09-13WordPressの累積レイアウトシフトに問題がありますか？
累積レイアウトシフト（略してCLS）は、ユーザーエクスペリエンスに焦点を当てた指標であり、Googleの新しいCoreWebVitalsイニシアチブの一部です。
読み込み中にジャンプするページを閲覧したことがある場合は、レイアウトシフトを経験したことがあります。また、WordPressの累積レイアウトシフトがどれほど煩わしいこともご存知でしょう。 ただし、CLSは訪問者を煩わせるだけでなく、検索エンジンのランキングにも影響を与える可能性があるため、サイトで発生している問題を修正することが重要です。
幸いなことに、累積レイアウトシフトの問題を特定して解決するために技術者である必要はありません。 その原因を理解し、それらを修正する方法を知ることにより、Webサイトでの予期しないシフトの数を減らすことができます。
この記事では、Googleの累積レイアウトシフト指標を紹介し、サイトのCLSの問題を検出する方法を示します。 次に、問題を修正してサイトのCLSスコアを下げる3つの簡単な方法を紹介します。
目次：
- 累積レイアウトシフトとは何ですか？
- 累積レイアウトシフトの問題を特定する方法
- 累積レイアウトシフトを修正する方法
WordPressの累積レイアウトシフトの紹介
レイアウトシフトは、ページ上のコンテンツがユーザーの操作なしで移動するときに発生します。
一般的な例の1つは、メディアWebサイトでおそらく経験したことのあるレイトロード広告です。 ページが既に読み込まれた後に表示される広告によって「プッシュダウン」されるテキストについてのみ、ページ上のテキストを読み始めた可能性があります。
これがweb.devの人々からの役立つビジュアルです。ユーザーは「いいえ、戻る」をクリックするつもりでしたが、レイアウトのシフトにより最初のページの読み込み後にボタンの配置が移動したため、誤って「はい、注文します」をクリックしました。
累積レイアウトシフトは、ページで発生するすべてのレイアウトシフトを測定し、それを1つのスコアにまとめるメトリックです。 スコアリングについては、すぐに説明します。 ただし、一般的に、スコアが高い場合はレイアウトシフトが多い（悪い）ことを示し、スコアが低い場合はレイアウトシフトが少ない（良い）ことを示します。 また、スコアがゼロの場合は、サイトのレイアウトシフトの問題がゼロであることを意味します。これは完璧です。
ご想像のとおり、要素のシフトはユーザーにとって頭痛の種になる可能性があります。 上記の例が示すように、ページの一部を誤ってクリックしたり、誤って購入したりする可能性があります。
直接的な影響がない場合でも、多くのレイアウトシフトは視覚的に不快感を与える可能性があります。 読み込み時間が遅くなる可能性があるという事実と相まって、この一見小さな問題は、オーディエンスのユーザーエクスペリエンス（UX）に深刻な影響を与える可能性があります。
残念ながら、累積レイアウトシフトスコアが高い問題はそれだけではありません。 累積レイアウトシフトは、Googleの新しいCoreWebVitalsイニシアチブの一部でもあります。 GoogleのPageExperienceアップデートの時点で、サイトのCore Web Vitalsスコアは小さなSEOランキング要素になりました。これは、CLSの問題がサイトのランキングに影響を与える可能性があることを意味します。
WordPressの累積レイアウトシフトの問題を特定する方法
サイトの累積レイアウトシフトスコアを見つけて問題を特定するには、PageSpeedInsightsを使用することをお勧めします。 それはあなたのサイトの全体的なCLSスコアを与えますが、それはまたより深くなり、問題を引き起こしている特定のレイアウトシフトの問題にフラグを立てます。
まず、ボックスにURLを入力し、[分析]をクリックします。 このプロセスには少し時間がかかります。 結果が表示されたら、[ラボデータ]セクションまたは[フィールドデータ]セクションまでスクロールして、サイトの累積レイアウトシフトスコアを探します。
ここから、この領域でのサイトのパフォーマンスを判断できます。 一般的な経験則として、CLSスコアが分類される可能性のある範囲は3つあります。
- 良い、0.1以下
- OK 、これは0.1から0.25の間です
- 悪い、0.25以上
このメトリックはコアWebバイタルの最適化に直接影響するため、可能な限り低いスコアを目指す必要があります。 これを行う方法のより具体的なヒントについては、[診断]セクションまでスクロールして、[大きなレイアウトシフトの回避]を参照してください。 このセクションでは、サイトの個々のレイアウトシフトを一覧表示します。
この情報は、少しの作業を使用する可能性のあるサイトの特定の領域を指摘するのに役立ちます。 問題を特定したら、いくつかの簡単な方法を適用して問題を解決できます。
WordPressで累積レイアウトシフトを修正する方法（3つの方法）
CLSの問題を解決するための3つの効果的な方法を見てみましょう。 これらの方法は、一緒に使用すると最も強力になるため、それぞれのアプローチを試してみることをお勧めします。
1.画像、動画、広告にサイズを追加します
Webサイトに多くのメディアがある場合、画像とビデオごとにサイズが異なる可能性があります。 どんなサイトを運営していても、これは避けられないことです。
基本的に、この差異はCLSスコアに直接影響しません。 それでもなお、それは脅威をもたらします。アイテムの寸法を指定しないと、問題が発生し始める可能性があります。
ディメンションの追加は、ブラウザに重要な読み込み手順を提供するため、不可欠です。 ディメンション情報は、ブラウザがそのアセット用に正しい量のスペースを予約するのに役立ちます。
ブラウザがこれを実行できない場合、誤った容量のスペースを予測する可能性があります。 その結果、ページの読み込み後に修正が行われ、レイアウトがずれる可能性があります。 同じ原則が、サイトの広告や埋め込み素材にも当てはまります。
幸いなことに、WordPressの最近のバージョンは主にこの問題を処理します。 WordPressエディターを介して画像を挿入すると、WordPressが自動的にそのサイズの定義を処理します。 メディアを選択すると、結果を確認できます。
ただし、コードを使用して手動で、またはプラグインを介して画像を追加する場合は、画像のサイズがそこにあることを確認する必要があります。
WordPressのCLSでさらに大きな問題は、広告です。 コンテンツに広告を配置する場合は、CLSを回避するために、それらの広告用のスペースを予約していることを確認する必要があります。
これを行う1つの方法は、広告を含む<div>コンテナにmin-heightおよびmin-width CSSプロパティを適用することです。Googleには、これを実現するための優れたガイドがあります。
たとえば、ID in-content-adのdiv内に300x250pxの広告を表示する場合、次のコードを使用してスペースを予約できます。
<div>ここに広告コードを配置</div>
一部の広告ツールは、これを達成するのに役立つツールも提供する場合があります。 たとえば、Google広告を使用している場合、Googleはこれを支援する広告エディタを提供します。
2.フォントをプリロードします
メディアの場合と同じように、サイトではおそらく多くの異なるフォントが使用されています。 これは、それらがさまざまな量のスペースを占める可能性があることを意味します。 ただし、メディアとは異なり、フォントのサイズを正確に設定することはできません。
解決策は、代わりにこれらのアセットをプリロードすることです。 フォントをプリロードすると、特定のページに対して最初に生成されるものの1つである必要があることがブラウザに通知されます。 フォントを最初に含めることで、事後の修正シフトの必要がなくなります。
この方法は、多くのカスタムWordPressフォントを使用する場合に特に重要になる可能性があります。 これらは通常のフォントとはサイズが大幅に異なる可能性があります。つまり、この単純な変更が大きな影響を与える可能性があります。 ただし、フォントに依存しないサイトでも、少なくともマイナーなCLSスコアの改善が見られる可能性があります。
多くのWordPressパフォーマンスプラグインには、フォントをプリロードするオプションが含まれています。 たとえば、Autoptimize、Asset CleanUp、Perfmatters、およびWPRocketです。
ほとんどの人にとって、これらのプラグインの1つを使用することは、WordPressフォントをプリロードするための最も簡単なソリューションです。
ただし、上級ユーザーの場合は、独自のカスタムコードスニペットを使用してフォントをプリロードすることもできます。 このコードスニペットを追加するには、子テーマのheader.phpファイルを編集する必要があります。 このファイルを編集するには、WordPressサイトの[外観]>[テーマエディター]>[テーマヘッダー]に移動します。
子テーマのheader.phpファイルを編集したら、ページの一番下までスクロールし、次のコード行をコピーして貼り付けます。必ず、フォントリンクの例（この例ではroboto.woff2 ）を次のように置き換えてください。サイトで使用しているフォントファイルへの実際のリンク：
<link rel="preload" href="roboto.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>準備ができたら、[ファイルの更新]をクリックして変更を保存します。 あなたがしなければならないのはそれだけです-あなたのウェブサイトのフォントは今やブラウザでの読み込みの優先順位を優先します。
3.動的コンテンツを最適化します
最後に、サイトの動的コンテンツについて説明しましょう。 ニュースレターの登録フォーム、アプリのインストールプロンプト、GDPR通知などの動的コンテンツはすべて、ページが既にほとんど読み込まれた後にブラウザを再調整することで、レイアウトの変更を引き起こす可能性があります。
ただし、これは、ユーザーの操作によってトリガーされない動的コンテンツにのみ適用されます。 たとえば、ホームページのユーザーに挨拶するために自動通知バーを読み込んでいる場合、CLSスコアに悪影響を与える可能性があります。
これを修正する方法は2つあります。
- ユーザーの操作後にのみ動的コンテンツをトリガーします。これはCLSスコアには影響しません。 たとえば、メールオプトインフォームをすぐに表示する代わりに、ユーザーがボタンをクリックして2段階のオプトインを作成したときにトリガーする場合があります。
- 上記で説明したのと同様に、CSSを使用して動的要素用のスペースを予約します。 たとえば、CSSを使用してページ上部の通知バー用のスペースを予約する場合でも、レイアウトを変更せずにそのバーを読み込むことができます。
WordPressの累積レイアウトシフトを完全に修正
優れたユーザーエクスペリエンスを作成し、Core Web Vitalsのスコアを向上させたい場合は、累積レイアウトシフトスコアを低くすることが重要です。 幸いなことに、この厄介な問題を防ぐのは難しいことではありません。 いくつかの簡単な設定に注意を払うことで、サイトの読み込みの問題を修正できます。
この記事では、WordPressの累積レイアウトシフトを修正および削減する3つの方法について説明しました。
- すべてのメディアと広告のサイズが明確に定義されていることを確認してください。 WordPressは、エディターに埋め込んだ画像を自動的に処理しますが、広告やエディターの外部に追加した画像のサイズを手動で定義する必要がある場合があります。
- 直前の調整を避けるために、フォントをプリロードします。
- ユーザーの操作を要求するか、動的要素用のスペースを予約することにより、動的コンテンツを実装する方法に注意してください。
WordPressの累積レイアウトシフトの改善についてまだ質問がありますか？ コメントで教えてください！