Googleの新しいページエクスペリエンスの更新は、あなたのウェブサイトの画像の意味があります

検索エンジンとして、Googleはキーワードを比較して検索結果を生成するだけではないことを忘れがちです。 Googleは、人々がWebページで経験を楽しんでいない場合、コンテンツを消費するのに十分な長さのページにとどまることはないことを知っています。

その結果、Googleは定量化可能なメトリックを使用してWebページのユーザーエクスペリエンスを分析する方法を実験しています。これらを検索エンジンのランキングに考慮して、ユーザーに優れた関連するコンテンツだけでなく、素晴らしいユーザーエクスペリエンスも提供することを望んでいます。

Googleのすぐに発売されるページエクスペリエンスの更新は、この方向への大きな一歩です。画像が多いウェブサイトを持つウェブサイトの所有者は、これらの変更に適応したり、道端で落ちたりするリスクに特に警戒する必要があります。この記事では、このアップデートに関して知っておくべきことすべてと、それを最大限に活用する方法について説明します。

注： Googleは2020年5月にページエクスペリエンスの計画を導入し、2021年5月に展開を開始することを2020年11月に発表しました。しかし、Googleは2021年6月中旬から徐々に展開される計画を遅らせました。

いくつかの背景

Googleの要因ユーザーエクスペリエンスメトリックを検索エンジンのランキングにどのように使用するかを最新の変更に入る前に、コンテキストを取得しましょう。 2020年4月、Googleはこの方向で最も重要な動きをしましたが、新しいイニシアチブであるCore Web Vitalsを紹介しました。

Core Web Vitals（CWV）が導入され、Web開発者がテスト可能なメトリックを使用して検索エンジンのランキングを最適化しようとする課題に対処するのを支援しました。

これを行うために、Googleは3つの重要なメトリック（「ユーザー中心のパフォーマンスメトリック」と呼ばれるもの）を特定しました。これらは：

1. LCP（最大のコンテンツフルペイント）： Webページが最初にロードされたときの折り畳みの上の最大の要素。通常、これは大きな特徴の画像またはヘッダーです。最大のコンテンツ要素がどれだけ速くロードされ、ユーザーがページの全体的な読み込み速度をどれだけ速く知覚するかに大きな役割を果たします。
2. FID（最初の入力遅延）：ユーザーが最初にページと対話するときと、メインスレッドがブラウザがイベントを処理するために無料であるときの間にかかる時間。これは、ボタン、リンク、または他の動的要素との対話をクリック/タップすることができます。ページと対話するときの遅延は、ユーザーにとって明らかにイライラする可能性があるため、FIDを低く保つことが重要です。
3. 累積レイアウトシフト（CLS）：これは、最初にロードされたときにページの視覚的安定性を計算します。アルゴリズムは、要素のサイズとそれらが移動する距離をビューポートに考慮して考慮します。不安定性が高いページは、ユーザーによってミスを引き起こす可能性があり、イライラする状況にもつながります。

これらのメトリックは、Si（速度インデックス）、FCP（最初のコンテンツペイント）、TTI（時間までの時間）など、しばらく使用されてきたより基本的なメトリックから進化しました。

これが重要な理由は、画像がWebサイトのCWVSスコアに重要な役割を果たすことができるためです。たとえば、LCPは多くの場合、倍以上の画像ではないか、少なくとも最初にロードするために画像と競合する必要があります。正しく使用されていない画像は、CLSにも悪影響を与える可能性があります。ロードの遅い画像は、ページの全体的なレンダリングにさらなる遅延を追加することにより、FIDに影響を与える可能性があります。

さらに、これはモバイルファーストインデックスにGoogleが更新した焦点の裏にありました。したがって、これらのメトリックはあなたのウェブサイトにとって重要であるだけでなく、あなたのページもモバイルデバイスでもうまくスコアを付けることを保証する必要があります。

何が変わるのですか？ Google検索のページエクスペリエンス

一般的に、Googleは、検索エンジンのランキングに関してユーザーエクスペリエンスをますます優先していることは明らかです。これにより、最新のアップデートになります。Googleは、2021年6月中旬の早期展開から始まるランキングファクターとしてページエクスペリエンスを組み込む予定です。

それで、ページエクスペリエンスとは何ですか？要するに、それは多くのメトリックからのデータを組み合わせて、Webページのユーザーエクスペリエンスがどれほど良いか悪いかを試してみようとするランキング信号です。それは次の要因で構成されています。

• コアWebバイタル：同じ、変更されていないコアWebバイタルを使用します。 Googleは、ここで見つけることができるガイドラインと推奨ランキングを確立しています。 「良い」ページエクスペリエンススコアの資格を得るには、全体的に「良い」CWV評価が必要です。
• モバイルユーザビリティ： URLには、「良い」ページエクスペリエンススコアの資格を得るためにモバイルユーザビリティエラーが必要です。
• セキュリティの問題：フラグ付きセキュリティの問題は、ウェブサイトを失格にします。
• HTTPS：資格を得るには、HTTPSを介してページを提供する必要があります。
• 広告エクスペリエンス：たとえば、邪魔になり、気を散らすなど、Webページのユーザーエクスペリエンスにどの程度に悪影響を与えるかについての測定。

この変更の一環として、Googleは、ページエクスペリエンス基準を渡したWebページを強調する視覚インジケーターまたはバッジを含める意向を発表しました。これは、検索エンジンがAMP（アクセラレーションされたモバイルページ）またはモバイルに優しいページを宣伝するために使用した以前のバッジに似ています。

この公式認識は、GoogleのSERPである非常に競争の激しいアリーナで、高性能のWebページに大きな利点を与えます。この視覚的な手がかりは、特にすでにうまくランク付けされているサイトの場合、間違いなくCTRと有機トラフィックを後押しします。この機能は、現在の試行段階を通過するとすぐに低下する可能性があります。

非AMPユーザーにとってもう1つの良いニュースは、すべてのページがブラウザとGoogleニュースアプリの両方でトップストーリーの対象となるようになることです。 Googleは、ページが「コアWebバイタルスコアやページエクスペリエンスステータスに関係なく」トップストーリーの資格を得ることができると述べていますが、これが現在または下の適格性の役割を果たさないことを想像するのは困難です。

キーテイクアウト：これはあなたのウェブサイトの画像にとって何を意味しますか？

Googleは、灯台とPageSpeed Insightツールの消費者使用量が70％急増しており、ウェブサイトの所有者がページを最適化することの重要性に追いついていることを示しています。これは、検索エンジンのランキングのために他のWebサイトと競合する場合にのみ、標準がますます高くなることを意味します。

Googleは、これらの変更にもかかわらず、コンテンツがまだ王様であることを再確認しました。ただし、コンテンツはページのテキストだけではありません。また、本当に魅力的でユーザーフレンドリーなコンテンツは、思慮深く使用されるメディアで構成されており、その大部分はおそらく画像になります。

提案されているページの経験バッジとトップストーリーの適格性が得られることで、 Google検索アルゴリズムで非常にランク付けするために、賭け金がかつてないほど高くなっています。あなたが得ることができるあらゆる利点が必要です。そして、私が示しようとしているように、あなたの画像資産を最適化することは、これらのメトリックによると、スコアリングに具体的な効果をもたらすことができます。

追いつくために何ができますか？

コアWebバイタルの画像資産を最適化するのに役立つソリューションを提案する前に、画像がパフォーマンスにしばしば有害である理由を見てみましょう。

• 画像は、特に画像が最適化されていない場合（つまり、適切にサイズではないなど）、ウェブサイトページの全体的なサイズを膨らませます。
• 画像は、さまざまなデバイスに対応する必要があります。小さな画面で同じ視覚品質を維持するには、はるかに小さな画像サイズが必要です。
• さまざまなコンテキスト（ブラウザー、OSSなど）には、画像を最適にレンダリングするための異なる形式があります。ただし、ほとんどの画像はまだ.jpg/.png形式で使用されています。
• ウェブサイトの所有者は、幅/高さの属性を明示的に指定するなど、ウェブサイトページで画像を使用することに関連するベストプラクティスについて常に知っているわけではありません。

従来の方法を使用して、これらの問題に取り組むために多くの血、汗、涙が必要です。画像の手動で編集したり、ハードコーディングレスポンシブ構文などのほとんどのソリューションには、スケーラビリティ、変更を簡単に更新/調整したり、開発パイプラインを膨らませる機能に固有の問題があります。

特にCWVの改善に焦点を当てて、画像資産を最適化するには、次のことが必要です。

• 画像ペイロードを減らします
• 効果的なキャッシングを実装します
• 配達をスピードアップします
• 画像を最適な次世代形式に変換します
• 画像が応答していることを確認してください
• 実行時ロジックを実装して、さまざまなコンテキストで最適な設定を適用する

幸いなことに、これらの課題を解決し、これらのソリューションである画像CDNを提供するために特別に設計されたツールのクラスがあります。特に、私が実施したページパフォーマンステストで他のCDNを常に上回っているImageEngineに焦点を合わせたいと思います。

ImageEngineは、Webサイトの画像（GIFを含む）を提供するために使用できるインテリジェントなデバイス認識画像CDNです。 ImageEngineはWURFLデバイス検出を使用して、ウェブサイトのページにアクセスされるコンテキスト（デバイス、画面サイズ、DPI、OS、ブラウザーなど）を分析し、それに応じて画像アセットを最適化します。これらの基準に基づいて、それらをインテリジェントにサイズ変更、再フォーマット、および圧縮することにより、画像を最適化できます。

これは、完全に自動的なセットアンドフォーゲットイットソリューションであり、セットアップされてからほとんどまたはまったく介入を必要としません。 CDNには20以上のグローバルポップがあり、エッジサーバーにロジックが組み込まれており、さまざまな領域でより速くなります。 ImageEngineは、98％のキャッシュヒット比を達成し、画像のペイロードを75％削減すると主張しています。

段階的なテストImageEngineを使用してページエクスペリエンスを改善する方法

ImageEngineのような画像CDNを使用して違いを説明するために、実用的なテストをお見せします。

まず、PageSpeed Insightsを使用して画像コンテンツスコアを大量に備えたページをどのように備えているかを見てみましょう。これは簡単なページですが、テキストだけでなく、ボタンやリンクなどのインタラクティブな要素を備えた高品質の画像で構成されています。

FIDは、ユーザーがWebサイトと一緒に持っている実際のインタラクションからのデータに依存しているため、ユニークです。その結果、FIDは「フィールドで」のみ収集できます。十分なトラフィックがあるウェブサイトがある場合は、Googleコンソールでページエクスペリエンスレポートを生成することでFIDを取得できます。

ただし、LighthouseやPageSpeed Insightsなどのツールからのラボの結果については、TTIとTBTを見ることでリソースのブロックの影響を推測できます。

ああ、はい、そして私はまた、いくつかの理由でモバイル監査の結果に焦点を当てています：

1. Google自体は、モバイル信号とモバイルファーストインデックスの優先順位付けです
2. Webページと画像の最適化資産は、多くの場合、モバイルデバイス/一般的な応答性にとって最も困難です
3. それは、CDNが提供できる画像の最大改善を示す機会を提供します

それを念頭に置いて、ここに私たちのページの結果があります：

あなたが見ることができるように、私たちにはいくつかの問題があります。役立つと、PagesSpeed Insightsは、存在する2つのCWV、LCPとCLSにフラグを立てます。ご覧のとおり、巨大な画像ペイロード（約35 MB）のために、1分近くのばかげたLCPがあります。

簡単なレイアウトと、画像の幅と高さの属性を明示的に提供したという事実のため、私たちのページはたまたま0 CLSで安定していました。ただし、読み込みの遅い画像がページの知覚された安定性にも影響を与える可能性があることを認識することが重要です。したがって、CLSを直接改善できなくても、画像が読み込まれるなどの大規模な要素が大きいほど、実際のユーザーの全体的なエクスペリエンスが向上します。

TTIとTBTもサブパーでした。最初の要素がページに表示されている瞬間から、ページがインタラクティブになり始めることができる瞬間から少なくとも2秒かかります。

改善と診断の機会からわかるように、ほとんどすべての問題は画像関連でした。

ImageEngineを設定し、結果をテストします

さて、ImageEngineをミックスに追加して、同じページのパフォーマンスメトリックをどのように改善するかを確認する時が来ました。

ほぼすべてのWebサイトでImageEngineを設定するのは比較的簡単です。まず、ImageEngine.ioにアクセスして、無料トライアルにサインアップします。必要な単純な3段階のサインアッププロセスに従ってください。

1. 最適化したいWebサイトを提供し、
2. 画像が保存されているWeb場所、そして
3. 配信アドレスをコピーして、ImageEngineが割り当てます。

後者は{random String} .cdn.imgeng.inの形式になりますが、ImageEngineダッシュボード内から更新できます。

このドメインを介して画像を提供するには、Webサイトのマークアップに戻り、 src属性を更新してください。例えば：

から：

 <img  src="%E2%80%9D" mywebsite.com alt="Googleの新しいページエクスペリエンスの更新は、あなたのウェブサイトの画像の意味があります" >

に：

 <img  src="%E2%80%9D" myimages.cdn.imgeng.in alt="Googleの新しいページエクスペリエンスの更新は、あなたのウェブサイトの画像の意味があります" >

それがあなたがする必要があるすべてです。 ImageEngineは、訪問者がウェブサイトのページを表示するときに、画像を自動的にプルし、最適な結果を得るために動的に最適化します。 Magento、Shopify、DrupalなどでImageEngineを使用する方法に関するドキュメントの公式統合ガイドを確認できます。公式のWordPressプラグインもあります。

ImageEngineテストページが設定された後の結果は次のとおりです。

ご覧のとおり、結果はほぼ完璧です。すべてのメトリックが改善され、グリーンでスコアリングされました - 速度インデックスとLCPの偶数であり、これらは大きな画像によって大きな影響を受けました。

その結果、改善の機会はもうありませんでした。また、ご覧のとおり、ImageEngineは合計ページペイロードを968 kbに減らし、画像コンテンツを約90％削減しました。

結論

ある程度、Googleと同じように、一貫してモバイル方向に移動し、検索エンジンユーザーにとって可能な限り最高の「ページエクスペリエンス」を把握するためにメトリックの成長リストを採用しています。この方向への動きを再確認するとともに、Googleは、シグナルのリストをテストして修正し続けると述べました。

TTFB、TTI、FCP、TBT、またはおそらくまったく新しいメトリックなど、ツールで表面化できる他のメトリックは、将来の更新でさらに大きな役割を果たす可能性があります。

現在および将来、これらのメトリックのスコアを高めるのに役立つソリューションを見つけることは、この非常に競争の激しい環境で先を行くための鍵です。画像の最適化は1つのファセットにすぎませんが、特に画像が多いサイトに大きな意味を持つ可能性があります。

ImageEngineのような画像CDNは、画像コンテンツに関連するほぼすべての問題を解決できます。時間と労力を最小限に抑え、将来の更新に対してWebサイトを証明できます。

以上がGoogleの新しいページエクスペリエンスの更新は、あなたのウェブサイトの画像の意味がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。