Home Blogs フロントエンド開発者が累積レイアウトシフトを修正する方法
Applications

フロントエンド開発者が累積レイアウトシフトを修正する方法

About The Author

Outline

Googleは再びアルゴリズムを更新しています-そしてそれは大きいです。 Core Web Vitals のアップデートは5月にリリースされますが、これはスピードとユーザーエクスペリエンスに関するものです。 具体的には、Googleは最大のコンテンツフルペイン(LCP)、最初の入力遅延(FID)、および累積レイアウトシフト(CLS)のすべての測定を開始します。

このブログ記事では、これらの要素のうち1つだけに焦点を当てます。累積レイアウトシフトと、それを修正するためにフロントエンド開発者として何ができるか。

累積レイアウトシフトがあるかどうかを確認する方法

Page Speed Insightsを使用して 、ウェブサイトのコンテンツシフトを定量的に確認します(LCPやFIDなどの他の指標と一緒に)。

Core Web Vitalsはユーザーエクスペリエンスに関するものであるため、エアブレーキパフォーマンスモニタリングのようなツールを使用すると便利 です。 開発者向けに設計されたパフォーマンス監視ツールを使用すると、Apdexスコア、レイテンシー、クエリおよびルート情報などを測定する機能を使用して、アプリケーションのUXを即座に把握でき ます。

ウェブサイトの速度を完全に最適化するMoovwebと組み合わせると、アプリケーションのUXを測定するだけでなく、5歩先を行くのに最適な場所にいます。

UXとCLSに関してウェブサイトがどこにあるのかがわかったら、それを修正する時が来ました。

フロントエンド開発者が累積的なレイアウトシフトを修正する方法

ウェブサイト上の記事をクリックしようとしたことがありますか?それが突然移動し、他の何かをクリックしてしまいますか? あるいは、記事を読んでいる途中で、すべてが下にシフトしているかもしれません。 うん、これは累積レイアウトシフトの例です。 累積的なレイアウトシフトは、他のすべての要素が読み込まれた後にWebサイト上の要素が読み込まれると発生します。 ユーザーにとって非常に迷惑になる可能性があります。 Googleはこれにあなたを与えるだけでなく、あなたのロードを待つよりもむしろ別のウェブサイトに行きたい潜在的なユーザーを失うでしょう。 CLSの問題がユーザーに影響を与える前に、時間をかけて修正することで、これを防止します。

フロントエンド開発者として、Webサイトの累積レイアウトシフトを減らすために実行できる4つのアクションを次に示します。

フォントの更新

フォントはウェブサイトに文字と個性を追加しますが、これらの特殊なフォントにはコストがかかります。 フォントファイルのサイズが大きいため、ブラウザはFOITを使用して補正する傾向があります。FOITは、目に見えないテキストのフラッシュとして知られています。 FOITは、Webページの読み込み時間を大幅に遅くする可能性があります。

FOITに依存する代わりに、「スタイルなしテキストのフラッシュ」メソッド(FOUT)を使用する必要があります。 WebサイトのテキストをFOUTに変更する最も簡単な方法は、次の方法です。

伝統的には、フォントを次のようにコード化します。@font-face { font-family: Georgia; }

代わりに、次のコードを使用する必要があります。@font-face { font-family: Georgia; font-display: swap; }

「font-display」は、システムフォントを使用してAPI t0の表示フォントを即座に通知します。 フォントファイルが読み込まれると、Webサイトで必要なフォントと入れ替えられます。

残念ながら、FOUTメソッドはすべてのブラウザで機能するとは限りません。 そうでない場合、ブラウザーはフォントをロードするためのデフォルトの動作に戻ります。 このツールを使用すると、これらの動作の詳細な内訳を確認できます

フォントファイルの長い読み込み時間をなくすために使用できる2番目の方法は、すべてのブラウザーで機能しますが、コード行を更新するほど簡単ではありません。

前の方法と同様に、デフォルトのフォントが完全に読み込まれるまで待ってから、カスタムフォントに切り替えます。 違いは、WebサイトのCSSコードとJavaScriptコードの両方に飛び込む必要があることです。

最初に、CSSを更新することで、最初のページ読み込み時にカスタムフォントを使用しないようにします。 できるだけ早くページのテキストをダウンロードするには、システムフォントを使用してください。

JavaScriptコードを使用して、Font Face Observerを実装できます。 このコードは、Webフォントがロードされたときに監視し、通知します。 scrollイベントを使用することで、Font Face Observerはフォントをすばやく読み込むことができます。 完全なガイドについては、fontfaceobserverのGitHubページを参照して ください。

フロントエンド開発者として、これらはフォントの読み込み時間を改善するために行うことができるいくつかの簡単な変更です。

Webサイトの画像を修正する

Webサイトに画像がどのようにロードされるかは、レイアウトの累積的なシフトに大きな影響を与え、削減します。 属性なしでアップロードされた画像は、大きな変化を引き起こす傾向があります。 そのため、Webサイトに画像を追加する場合は、次の方法を使用することをお勧めします。

画像およびビデオエレメントにサイズ属性を使用する

今回のアップデート以前は、画像に「幅」と「高さ」の属性を追加しても、Googleでのウェブサイトのランク付けにはほとんど影響しませんでした。 今、Core Vitals Updateでは、大きな違いが生まれます。 ここから画像に属性を追加するには、時間をかけてください。

画像をアップロードする場合:

例: <h1>エラー監視は素晴らしい</h1>

<p>壊れたコードの迅速な検索と修正</p>

<img src=”Erron_image.jpg” alt=”””>

<P>適切なエラー監視ソフトウェアを使用すると、コードをバグなく保つことができます。<>

ユーザーのブラウザがHTMLを最初に読み込んでダウンロードします。 それが完了すると、最終的にイメージをダウンロードします。 最終的には、ブラウザが画像のためのスペースを確保するにつれて、Webページのコンテンツシフトが発生します。

このCLSの問題を修正するのは簡単です。heightとwidthの属性タグを画像に追加するだけです。

例: <h1>エラー監視は素晴らしい</h1>

<p>壊れたコードの迅速な検索と修正</p>

幅=”450”高さ=”450”>

<P>適切なエラー監視ソフトウェアを使用すると、コードをバグなく保つことができます。<>

画像に幅と高さを追加すると、残りのHTMLドキュメントをダウンロードするときにWebページにスペースを残すようにブラウザーに指示します。

より厳密なアプローチの場合は、CSSアスペクト比ボックスを使用することもできます

どちらのアプローチも間違っていませんが、Webサイトでの累積的なレイアウトシフトを防ぐために、どちらかを使用することが不可欠です。

動的な広告を慎重に配置する

コンテンツレイアウトのシフトに関しては、広告はひどいものです。 あなたがそれらに注意していないならば、彼らはあなたのコンテンツをあちこちに広めるでしょう。

Webサイトに広告を掲載する場合は、コンテンツの変化を防ぐために次のヒントを参考にしてください。

  • 画像と同様に、広告にWebサイト上に十分な予約スペースがあることを確認する必要があります。

  • Webページの一番上に広告を配置しないでください。 これにより、その下のすべてのコンテンツのコンテンツがシフトする可能性があります。

  • Webページの中央または下部に広告を配置します。

ダイナミック広告に関しては、これらがベストプラクティスです。 ユーザーエクスペリエンスを大幅に向上させるだけでなく、累積的なレイアウトシフトも可能です。

埋め込みウィジェットに注意する

埋め込みウィジェットは、ウェブサイトのゲームチェンジャーです。 それらはあなたのウェブサイトのための興味深く、ポータブルなコンテンツを作成することを可能にしますが、それらには重大な欠点があります。 画像や広告とは異なり、ウィジェット用にWebサイトのスペースを予約するのは難しい場合があります。

Twitter用のウィジェットがあるとします。 ツイートの長さが数文字しかない場合もあれば、画像やリンクが含まれている場合もあります。必要なスペースが継続的に変化している場合に、予約する必要があるスペースをどのようにして知ることができますか?

これを修正するには、Webサイトのスペースを予約して埋め込み用のプレースホルダをアップロードします。 でもどうやって?

「GlobalKey」を作成し、ウィジェットに割り当てる必要があります。 キーを取得すると、ウィジェットのサイズを見つけて、ウィジェット用にWebサイト上の適切な容量を予約できるようになります。

結論

Webサイト上の累積的なレイアウトシフトを減らすために使用できる方法はいくつかあります。 CLSに関連する多くの問題には、画像、広告、ウィジェット用にWebサイトのスペースと十分なスペースを確保することが含まれます。 フォントのアップロード方法も、Webサイトの速度に大きく影響します。

5月のCore Web Vitalsのロールアウトで、Googleのランキングに落ちないように、今すぐこれらの変更を開始する必要があることを忘れないでください。