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

グーグルは再びアルゴリズムを更新している。 Core Web Vitalsのアップデートは5月に公開され、スピードとユーザーエクスペリエンスがすべてだ。 より具体的には、Googleは以下のすべての測定を開始する:最大のContentful Pain (LCP)、First Input Delay (FID)、Cumulative Layout Shift (CLS)。

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

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

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

Core Web Vitalsはユーザーエクスペリエンスに関するものであるため、Airbrake Performance Monitoringのようなツールがあれば役立つかもしれない。 開発者向けに設計されたパフォーマンス監視ツールを使用すると、Apdexスコア、レイテンシ、クエリとルート情報などを測定する機能を備えたアプリケーションのUXに関する瞬時の洞察を得ることができる。

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

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

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

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

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

フォントを更新する

フォントはウェブサイトに特性および人格を加えるが、それらの専門のフォントは費用で来る。 フォントファイルの性質が大きいため、ブラウザはFOIT、または見えないテキストのフラッシュとして知られている使用によって補正する傾向がある。 FOITはWebページの読み込み時間を大幅に遅くすることができる。

FOITに頼る代わりに、「スタイルのないテキストのフラッシュ」メソッド(FOUT)を使うべきである。 ウェブサイトのテキストをFOUTに変更する最も簡単な方法は次の方法である:

伝統的に、フォントを次のようにコーディングする:@font-face { font-family: Georgia;}

代わりに、次のコードを使うべきである:@font-face { font-family: Georgia; font-display: swap;}

「Font-display」は、システムフォントを使用してAPI t0表示フォントを直ちに指示する。 あなたのフォントファイルがロードされたら、それはあなたがあなたのウェブサイトでほしいフォントとそれを取り替える。

残念ながら、FOUTメソッドはすべてのブラウザで動作するわけではないかもしれない。 そうでない場合、ブラウザはフォントを読み込むためのデフォルトの動作に戻る。 このツールを使用して、これらの動作の詳細な内訳を見ることができる。

フォントファイルの読み込み時間が長くなるのを防ぐために使用できる2つ目の方法は、すべてのブラウザで動作するが、コード行を更新するほど簡単ではない。

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

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

JavaScriptコードを使用することで、Font Face Observerを実装できる。 このコードは、Webフォントが読み込まれたときに監視し、通知する。 SCROLLイベントを使うことで、Font Face Observerは素早くフォントを読み込むことができる。 完全なガイドについては、fontfaceobserver GitHubページをチェックしてほしい。

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

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

Webサイトの画像ロード方法は、累積的なレイアウトシフトに大きな影響を与え、減少させる。 属性なしでアップロードされた画像は、大きなシフトを引き起こす傾向がある。 そのため、Webサイトに画像を追加する際には、次の方法を使用するのが最善である。

画像およびビデオ要素にサイズ属性を使用する

この更新の前に、画像に「幅」と「高さ」の属性を追加することは、あなたのウェブサイトがGoogleでどのようにランク付けされたかにほとんどまたはまったく影響を与えなかった。 今、コアバイタルアップデートで、それは大きな違いをもたらすだろう。 ここからは、画像に属性を含めるために時間をかけたい。

イメージをアップロードする場合：

例：<h1>エラー監視が素晴らしい</h1>

<p>壊れたコードをすばやく見つけて修正</p>

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

<p>適切なエラー監視ソフトウェアを使用すると、コードのバグが発生しないようにすることができる。</p>

ユーザーのブラウザが最初にHTMLを読み込んでダウンロードする。 それが完了すると、それは最終的に画像をダウンロードする。 ブラウザが画像のためのスペースを作るときに、最終的に起こっていることはウェブページのコンテンツシフトである。

このCLSの問題を修正することは簡単である:あなたがする必要があるのはあなたのイメージにheightおよびwidth属性タグを加えることだけである。

例：<h1>エラー監視が素晴らしい</h1>

<p>壊れたコードをすばやく見つけて修正</p>

width=”450”height=”450”>

<p>適切なエラー監視ソフトウェアを使用すると、コードのバグが発生しないようにすることができる。</p>

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

より厳密なアプローチのために、CSSアスペクト比ボックスを使用することもできる。

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

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

コンテンツレイアウトの変更に関しては、広告はひどい。 注意しないと、コンテンツがあちこちに散らばってしまう。

Webサイトに広告を掲載する場合は、コンテンツの変化を防ぐために次のヒントを使用する。

• 画像と同じように、広告にあなたのウェブサイトの十分な予約されたスペースがあることを確かめる必要がある。

• あなたのウェブページの非常に上にadsを置いてはいけない。 これにより、その下にあるすべてのコンテンツのコンテンツシフトが発生する可能性がある。

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

これらは動的な広告に来るときベスト・プラクティスである。 ユーザーエクスペリエンスを大幅に向上させるだけでなく、累積的なレイアウトシフトも同様に。

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

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

Twitter用のウィジェットがあるとしよう。 ツイートの長さが数文字しかない場合もあれば、画像やリンクを含む場合もあるので、必要なスペースが絶えず変化しているときに、どのくらいのスペースを確保する必要があるかをどのように知ることができるのだろうか。

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

「GlobalKey」を作成してウィジェットに割り当てる必要がある。 一度キーを手に入れたら、ウィジェットのサイズを見つけて、ウィジェットのためにウェブサイト上の適切なスペースを予約できるようになる。

結論

あなたがあなたのウェブサイトの累積的なレイアウトシフトを減らすのに使用できる少数の方法しかない。 CLSに関連する多くの問題はスペースを含み、画像、広告、ウィジェットのためのあなたのウェブサイトの十分なスペースを予約する。 フォントをアップロードする方法はまた大幅にあなたのウェブサイトの速度に影響を与える。

5月にCore Web Vitalsがリリースされると、Googleのランキングに落ちないように、これらの変更を今すぐ開始する必要があることを覚えておいてほしい。