優れたUXのために最大のコンテンツフルペイントを測定および最適化する方法

公開: 2022-02-16

オンラインでの成功に関しては、さまざまな方法があります。最適化されたユーザーエクスペリエンスはそのような方法の1つです。 Googleは、さまざまなユーザーエクスペリエンスと関連する指標を使用して、SEOのウェブサイトをランク付けします。 Webパフォーマンスを向上させるために複数のツールを作成し続けています。 Googleがユーザーエクスペリエンスの向上を目指しているいくつかの方法を以下で見ていきます。

Google Core Web Vitalsとは何ですか？

グーグルは、適切なユーザーエクスペリエンスと見なされるものの測定と理解を変更する最近の試みで、ページのメトリックを規制しました。これらの標準化されたメトリックは、コアWebバイタルと呼ばれ、Webサイトでの実際のユーザーの専門知識の評価を容易にします。

最大の満足のいくペイントとは何ですか？

まず、Largest Contentful Paint（LCP）を見てみましょう。これは、主要なWebバイタルメトリックの1つです。ビューポート内の最大のコンテンツコンポーネントが表示されるようになるまでの読み込み時間を測定します。 TTFBやFirstContentfulPaintなどの代替メトリックは、ライブページのエクスペリエンスを共同で促進します。ページがユーザーにとって「意味のある」ものになると、それらは存在しなくなります。

通常、ページ上の最も重要なコンポーネントが完全に表示されない限り、ページはユーザーに十分なコンテキストを提供しない可能性があります。したがって、LCPはユーザーの期待を表しています。コアWebバイタルメトリックとして、LCPはパフォーマンススコアの25％を占めます。これが、最適化するための最も重要なメトリックの1つである理由です。

LCP時間を確認する

Googleによると、最大のコンテンツフルペイントで考えられるパーツのカテゴリは次のとおりです。

<img>要素
<svg>要素内の<image>要素
<video>要素（ポスター画像を使用）
URL関数を介してロードされた背景画像を持つ要素
テキストノードおよび/または他のインラインレベルのテキスト要素で構成されるブロックレベルの要素

LCPはどのように測定されますか？

もちろん、WebページのLCPを測定する方法は複数あります。これを行う最も簡単な方法は、Lighthouse、PageSpeed Insights、検索コンソール、Chromeユーザーエクスペリエンスレポートなど、利用可能なプラットフォームの1つを使用することです。たとえば、レポートのGoogle PageSpeed Insightsは、LCPを計算するためのコンポーネントを示しています。

良いLCPとは何ですか？

適切なユーザーの専門知識を提供するには、サイトで2.5秒以下のLCPを維持するように試みる必要があります。ページの読み込みの大部分は、このしきい値を下回って行われるはずです。 LCPとは何か、そして私たちの目標は何であるべきかがわかったので、LCPを強化する方法を調べてみましょう。

（ページの大部分は2.5秒以下のLCPでロードする必要があります.jpgという名前の画像を追加してください）

最大のコンテンツフルペイント（LCP）を最適化する方法

LCPを完全に削減するための基本的なシステムは、ユーザーのデバイスにダウンロードされるデータを削減し、そのコンテンツの管理にかかる時間を短縮し、シームレスなユーザーエクスペリエンスを確保することです。

写真を最適化する

ほとんどのサイトでは、折り畳み上にあるコンテンツには通常、LCPに必要な特大の画像が含まれています。ヒーロー画像、カルーセル、バナーなどが考えられます。より堅牢なLCPを実現するには、これらの画像を最適化する必要があります。

写真を最適化するには、ImageKit.ioなどのサードパーティの画像CDNを使用する必要があります。サードパーティのイメージCDNを採用する利点は、実際のビジネスをターゲットにして、イメージの最適化をイメージCDNに任せることができることです。

レスポンシブな写真のためのリアルタイム変換

Googleは、ほぼすべてのサイトでモバイルファーストの区分化を使用しています。これが、デスクトップよりもモバイル向けにLCPを最適化する必要がある理由です。各画像は、レイアウトの要求に応じて縮小する必要があります。

たとえば、リストページでは画像を小さくし、商品詳細ページでは画像を大きくしたいとします。このサイズ変更により、その正確なページに必要なバイト数よりも余分なバイトを使用していないように見えます。

写真をキャッシュして配信時間を改善する

画像CDNは、コンテンツ配信ネットワーク（CDN）を使用して写真を配信します。 CDNを採用することで、世界中の中間にある可能性のあるサーバーではなく、近くの場所から写真を確実に読み込むことができます。

重要なリソースをプリロードする

LCPに影響を与える場合、ブラウザがビジュアルをロードしない場合があります。例として、折り目の上のバナー画像は、CSSファイル内の背景画像として表示される場合があります。ブラウザは、CSSファイルがダウンロードされるまで画像についてこれを認識しないため、画像をロードしません。

さて、「最大のContentfulペイント画像をプリロードするにはどうすればよいですか？」と尋ねる場合、答えは簡単です。ハイパーテキストマークアップ言語ドキュメントの上部にrel=“ preload”属性を持つタグを使用することで、それらをプリロードできます。

ドキュメントに複数のリソースをプリロードすることはできますが、それを折り畳み上の写真やビデオ、ページ全体のフォントファイル、または重要なCSSファイルとJSファイルに制限する必要があります。

サーバーの応答時間を短縮する

サーバーの読み込みに通常と見なされる時間よりも時間がかかる場合は、画面にページを読み込むのにかかる時間が長くなります。これは、LCPとともに、各ページ速度メトリックに悪影響を及ぼします。サーバーの応答時間を向上させるために、次のことができます。

サーバーを分析して最適化する
コンテンツ配信ネットワークを使用する
サードパーティのオリジンに事前接続します
コンテンツキャッシュを提供する-最初にServiceWorkerを使用する
テキストファイルを圧縮する

クライアントデバイスの応答時間を改善する

ページの読み込みに時間がかかる場合は、潜在的な顧客に不快感を与える可能性があります。幸いなことに、それが彼らの側で適切にロードされ、シームレスなユーザーエクスペリエンスを作成することを確実にするためにあなたがすることができるいくつかのことがあります。これも：

重要なCSSのインライン化
コンテンツを縮小して押す
クライアント側のレンダリングのためのLCPの最適化
サーバーサイドレンダリングの使用
事前レンダリングの使用

LCPは、ユーザーエクスペリエンスとジャーニーと強力に相関する大きな検索ランキング要素になりました。したがって、Webビジネスを運営している場合は、これらのコンポーネントを最適化して、取り組みを確実に成功させる必要があります。

著者略歴

Ghia Marnewickは、ライター、ソーシャルメディアマネージャー、デジタルマネージャーです。 彼女はAumcoreのコンテンツを作成し、世界と情報を共有する新しい方法を見つけることに情熱を注いでいます。