Keynotes Summit/2020: Web of Tomorrow のパフォーマンスとユーザー エクスペリエンス
公開: 2023-02-12WP Engine の 2020 Summit で、Google のプロダクト マネージャーである Mariya Moeva が、Web の将来と、プライバシー、速度、質の高いユーザー エクスペリエンスの育成が果たすべき重要な役割について話し合います。 WordPress サイトのパフォーマンスを評価して向上させるために使用できる、WordPress 用の AMP、Site Kit、Web Stories などのツールについて学びます。
セッションのスライド
Google のプロダクト マネージャーである Mariya Moeva が次のように説明しています。
- Google がどのように WordPress、WP Engine、およびコミュニティと緊密に連携して、WordPress エコシステムを前進させ、サポートしているか。
- Google がウェブの繁栄と健全性を維持し、ウェブを明日も役立つものにするための 3 つの主な方法について、洞察を共有します。
- 速度とパフォーマンス:ユーザー エクスペリエンスに一致する指標を定義し、実用的な方法でコミュニティと共有します。
- 優れたユーザー エクスペリエンス:サイト所有者とエンド ユーザーの両方が、必要なときに適切なコンテキストで、Google サービス全体から最も関連性の高い情報を入手できるようにします。
- プライバシーとセキュリティ: ユーザーのプライバシーを尊重しながら、エコシステムをサポートする新しいモデルを設計します。
これは、エクスペリエンスが遅いとユーザーが別の場所に移動するという事実のためだけでなく、日常のデジタル ライフ全体で快適なネイティブ アプリケーション エクスペリエンスを使用するため、ユーザーの期待が高まるためでもあります。
全文転写
[00:00:00.03]
こんにちは、みんな。 私の名前は Maria です。Google 検索チームのプロダクト マネージャーです。 私はほとんどの時間を、サイト所有者が Web で成功するための製品の構築に費やしています。
[00:00:09.08]
今日は、ウェブが健全で繁栄するために Google が重要だと考えていることと、そのために行っていること、そして Google がどのように協力できるかについてお話しできることを非常に嬉しく思います。
[00:00:21.03]
しかし、前を向くために、まず周りを見ましょう。私たちは今どこにいるのでしょうか? そして、ウェブの風景はどのようなものですか？
[00:00:27.07]
CMS プラットフォームは、Web の成功にとってますます重要になっています。
[00:00:32.03]
CMS プラットフォームで構築されたサイトの全体的な割合は着実に増加しています。
[00:00:37.08]
これらは、特に尻尾と胴体のビジネスにとって重要ですが、CMS を使用する非常に大規模なサイトにとっても重要です。
[00:00:44.04]
Google では、さまざまな CMS プラットフォームと緊密に連携して、
ウェブは健全でプライベートです。
[00:00:51.02]
そしてもちろん、私たちは WordPress やコミュニティと緊密に連携して、WordPress エコシステムを発展させ、サポートすることを約束します。
[00:00:59.04]
これにはさまざまな方法があります。 たとえば、コアの WordPress プラットフォームに貢献して、画像の遅延読み込みなどでパフォーマンスを向上させたり、サイトマップなどでコンテンツの発見を増やしたりします。
[00:01:12.03]
また、さまざまな Google 製品の重要な機能を提供したり、WordPress サイトで AMP などの特定のテクノロジーを有効にする方法を示したりするプラグインも作成します。
[00:01:23.01]
そして、WordPress プラグイン ディレクトリの全員に提供しています。
[00:01:26.09]
最後になりましたが、私たちは、ヨーロッパ、アジア、米国でのさまざまな WordCamps などのさまざまなイベントについて話したり、後援したりして、コミュニティと積極的に関わっています。また、地方の小都市やその他の業界イベントでも活動しています。
[00:01:41.06]
また、WP Engine に関しては、WordPress に関して言及したのと同じすべての領域にまたがる良好な関係があります。
[00:01:51.01]
たとえば、WP Engine のプラットフォームは、Google Cloud Platform のコンピューティング最適化仮想マシンを提供するようになり、サーバーの実行時間を大幅に短縮できます。
[00:02:01.00]
たとえば、この新しいインフラストラクチャに移行した boardingarea.com のようなサイトでは、backend_processing_times がすぐに低下し、サイトのパフォーマンスが最大 40% 向上しました。
[00:02:13.00]
AMP プラグインやサイト キットなどの主要なプラグインは WP エンジン ソリューション センターで取り上げられており、ジェネシス フレームワークは AMP と互換性があり、顧客が高性能で美しいサイトを構築するのに役立ちます。
[00:02:25.06]
最後になりましたが、私たちは WordCamp US での WP Engine パーティーや今日ここにある主要なイベントに集まります。
[00:02:34.04]
Web 上の CMS プラットフォームの重要性に加えて、無視できない要因の 1 つは、COVID-19 パンデミックにより、すべての活動分野でわずか数か月で世界が劇的に変化したことです。
[00:02:46.09]
これはウェブにも影響を与えました。 一部のサイトではアクセスとトラフィックが過負荷になっていますが、他のサイトでは活動を一時的に停止する必要がありました。
[00:02:57.07]
現在、Web は成長に欠かせないものであり、場合によっては、多くの企業にとって生き残るための唯一のチャンスです。
[00:03:05.01]
ビジネスを存続させ、オンライン化と成長を支援することが重要です
私たちの観点からの優先順位。
[00:03:12.08]
また、パンデミックの結果、多くの重要なサービスや情報がオンラインに移動したため、エンド ユーザーにとっても重要です。
[00:03:22.07]
以上のことをすべて理解した上で、Web の繁栄と健全性を維持し、明日も役立つものにするために、私たちが本当に重要だと考える 3 つの重要な方向性を見ていきましょう。
[00:03:32.08]
私たちが重要だと考える分野は3つあります。
[00:03:35.08]
サイトが高速で、パフォーマンスが高く、アクセスしやすいことを確認します。
[00:03:39.09]
サイト所有者とエンド ユーザーの両方が Web 上で優れたユーザー エクスペリエンスを享受できるようにします。
[00:03:46.00]
また、エンド ユーザーのプライバシーと選択を認識しながら、繁栄するエコシステムを維持することも確認します。
[00:03:53.04]
そこで、私が今やりたいことは、Google がこれらの各分野で何をしているか、どのように協力できるかをお話しすることです。
[00:04:01.01]
これら 3 つの重要な領域のそれぞれについて、私たちが重要だと考えていることと、CMS プラットフォーム、サイト所有者、ホスティング プロバイダーなど、エコシステム内のパートナーと協力するために取っている手順を共有したいと思います。
[00:04:15.06]
速度とパフォーマンスに関しては、実際のユーザー エクスペリエンスに可能な限り一致するメトリックを定義し、それらを実用的な方法でコミュニティと共有するために懸命に取り組んでいます。
[00:04:26.04]
優れたユーザー エクスペリエンスを実現するために、サイト所有者とエンド ユーザーの両方が、必要なときに適切なコンテキストで、Google サービス全体から最も関連性の高い情報を入手できるように取り組んでいます。
[00:04:38.05]
最後になりましたが、プライバシーとセキュリティについては、ユーザーのプライバシーを尊重しながらエコシステムをサポートする新しいモデルの設計を支援するために取り組んでいます。
[00:04:49.00]
それでは、速度とパフォーマンスから始めましょう。
[00:04:51.07]
これらの要素を最適化することで、すべての Web ブラウザーとサービスのユーザーにとって Web がより快適になり、モバイルでのユーザーの期待に合わせてサイトを進化させることができます。
[00:05:02.00]
ユーザーはますます積極的に関与し、より少ない摩擦で必要なことを実行できるようになるため、これが Web でのビジネスの成功に貢献すると信じています。
[00:05:12.01]
このことは誰もが知っていると思いますが、繰り返し言う価値があります。今日の Web では、ユーザーを第一に考えることは非常に重要です。
[00:05:18.08]
これは、エクスペリエンスが遅いとユーザーが別の場所に移動するという事実のためだけでなく、日常のデジタル ライフ全体で快適なネイティブ アプリケーション エクスペリエンスを使用するため、ユーザーの期待が高まるためでもあります。
[00:05:33.06]
比較的小さな改善や遅延がユーザー エクスペリエンスに大きな違いをもたらし、コンバージョン率に影響を与える可能性があることを示す 2 つの統計を次に示します。
[00:05:45.02]
高品質のエクスペリエンスを実現するために、3 つの重要な領域に焦点を当てました。 まず、高速ロード。 だから、すぐに何かを見ることができます。 次に、レスポンシブなインタラクションと、最終的にはシフトやジクのないスムーズで楽しいページです。
[00:06:00.09]
私たちはこれら 3 つの属性を測定しようとしました。これらを紹介し、フィードバックをいただけることを嬉しく思います。
[00:06:06.03]
それでは見てみましょう。 これらは、新しい指標であるコア ウェブ バイタルです。
[00:06:12.03]
これは、ユーザー エクスペリエンスの重要な側面を評価する、実際のユーザー中心の一連の指標です。 これらは、読み込み時間の短縮、双方向性、コンテンツの安定性など、Web のユーザビリティの側面を測定します。 そのため、タップしたくないボタンを誤ってタップすることはありません。
[00:06:30.06]
私たちの目標は、サイトの所有者が Web でのユーザー エクスペリエンスを測定し、改善できるようにすることです。
[00:06:35.03]
これらの指標のほとんどについて、フィールド データとラボ データの両方を提供します。つまり、ユーザーが Chrome でこのページをどのように体験したかを集計した統計に基づくデータと、ページで実行した分析に基づくデータです。
[00:06:49.02]
したがって、最初のメトリックは、Largest Contentful Paint です。 これは新しい指標の 1 つで、ウェブページのメイン コンテンツが読み込まれてユーザーに表示される速度を測定するのに役立ちます。
[00:07:01.08]
この指標は、かなりの量の研究と指標の開発を組み合わせたものです。 その前身は、速度インデックスや最初の意味のあるペイントなどのメトリックです。
[00:07:11.03]
LCP は、最大のコンテンツ要素がブラウザーのビューポートに表示されたときにキャプチャすることを目指しています。 サーバーの応答時間、CSS のブロック時間、アセット サブリソースの読み込み時間などの主要な要因が LCP に影響します。 また、ラボとフィールド データ セットの両方で利用できます。
[00:07:32.02]
2 番目のメトリックは First Input Delay で、実際のユーザーの操作が必要なため、フィールドのみのメトリックです。 これは、ユーザーがページに初めて入力を提供したときに、ブラウザーが実際に応答するまでにかかる時間の測定値です。
[00:07:47.00]
First Input Delay を確認することは非常に重要です。これは、サイトの応答性に対するユーザーの第一印象を示すものだからです。
[00:07:56.04]
この指標を改善するためのソリューションには、JavaScript の事前ロード、コード分割などが含まれます。
[00:08:03.06]
300 ミリ秒を超えると、ユーザー エクスペリエンスが低下します。 100 ミリ秒を超える値であれば問題ありません。
[00:08:14.01]
最後になりましたが、Cumulative Layout Shift (CLS) です。 このスライドでは、この指標があまり良くない場合に何が起こるかの例を見ることができます。
[00:08:24.03]
ユーザーに多くの不満をもたらす可能性があります。 ロード中にビューポート内の要素が移動する量を測定します。
[00:08:32.09]
CLS は、広告を誤ってクリックする可能性を高める方法でリストの先頭に広告を追加したり、記事の写真が完全に読み込まれたときにテキスト コンテンツがページの下に移動するニュース ページを作成したりするなどの測定を試みています。
[00:08:47.08]
レイアウト シフト スコアを計算するために、ブラウザはビューポート サイズと、レンダリングされた 2 つのフレーム間のビューポート内の不安定な要素の動きを調べます。
[00:08:57.04]
レイアウト シフト スコアは、その動きの 2 つの測定値の積です。 衝撃の割合と距離の割合。
[00:09:04.04]
つまり、コンテンツが実際に移動した量と移動距離を測定しています。
[00:09:11.00]
優れたユーザー エクスペリエンスを提供するために、サイトは累積レイアウト シフトが 0.1 未満になるように努める必要があります。
[00:09:18.09]
CLS は、Largest Contentful Paint と同様に、フィールドとラボの両方で測定できます。
[00:09:24.04]
一方、単純な遅延については、前に述べたように、フィールドにあるだけです。
[00:09:30.01]
さまざまなツールが効果的かつ一貫して計測されるように、さまざまなツールに取り組んでいます。これにより、特定のページまたはサイトがこれらの指標全体でどのように機能しているかに関する情報を取得し、その情報をチームまたはあなたのクライアントと。
[00:09:46.05]
そしてもちろん、パフォーマンスについて話している場合、心に留めておくべきことの 1 つは、AMP フレームワークについて言及する必要があるということです。
[00:09:53.06]
これは、ユーザー ファーストの Web サイト、メール、およびストーリーを簡単に作成するための Web コンポーネント フレームワークです。 そして、Web での一般的なパフォーマンスの問題の多くを既に解決しています。
[00:10:03.05]
いくつかの例を挙げると、AMP は重要でないコンテンツの遅延読み込みなどを自動的に処理します。
[00:10:10.02]
そのため、ページの他の場所にある他の要素がバックグラウンドでダウンロードされている間、表示されているコンテンツがはるかに高速に読み込まれます。
[00:10:17.05]
また、ユーザーはサイトの重要性をよりよく認識できます。 また、サイトの追跡を最適化します。
[00:10:24.01]
AMP 分析コンポーネントを使用すると、サイトでの行動とインタラクションを一度測定してから、それらを多くの分析バックエンドに効率的に配信できます。
[00:10:35.02]
最後に、HTML タグに属性を追加するのと同じくらい簡単にレスポンシブ デザインを実現することもできます。
[00:10:42.08]
したがって、パフォーマンスが気になる場合は、現在のサイトの設定に適合するかどうかを調査する興味深いフレームワークであり、多くのパフォーマンスの問題を解決します.
[00:10:52.05]
今日私たちが注力している 2 番目の重要な領域は、優れたユーザー エクスペリエンスです。
[00:10:57.09]
ビジネス オーナーやコンテンツ クリエーターが正しいステップを踏み、オンラインになり、存在感を高め、より多くの訪問者を獲得し、顧客に変える力を与えます。
[00:11:08.07]
ビジネス オーナーやコンテンツ クリエーターと話をすると、さまざまな複雑なレポートから、特に複数のレポートから情報を引き出す必要がある場合に、どのような手順を踏むべきかを推測するのが非常に難しいと感じているという声をよく耳にします。サイトで何が起こっているかの全体像を把握するために製品。
[00:11:28.02]
彼らは自分のビジネスに集中する必要があり、Web の専門家になるための知識も時間もありません。 そして、彼らはそうする必要はありません。
[00:11:36.05]
改善と成長の方法について、直感的で理解しやすく、実行可能な提案を提供できます。
[00:11:44.06]
このフィードバックを基に、製品を構築する際の基本原則を定義しました。 たとえば、Site Kit などの WordPress のプラグイン。
[00:11:52.08]
私たちは、ユーザーが必要なときに必要な情報を正確に表示することを目指しています。 WP 管理ダッシュボードで直接、複雑なレポートを排除し、最も関連性の高い統計のみを表示します。 Google ではさまざまな Google サービスでそれを行っています。
[00:12:09.08]
メトリックが分析、AdSense、またはページ速度のインサイトから得られたものであるかどうかは関係ありません。同じ使いやすいダッシュボードに表示されるため、サイトと Google に関連するすべてを 1 か所で確認できます。
[00:12:24.01]
これらの原則を実際に適用する良い例は、Site Kit です。 これは、WordPress 用の Google 公式プラグインです。
[00:12:30.05]
これは、現在 4 つの異なる Google 製品からの統計を、WordPress サイトの管理ダッシュボードで直接、非常にシンプルなダッシュボードのインサイトに結合します。
[00:12:40.09]
サイトの状況が一目でわかるようになっています。 非常に忙しいサイト所有者が定期的に最新情報を簡単に把握できるようにします。
[00:12:50.00]
適切なインサイトとコンテキストを提供するアプローチは、WordPress サイトの所有者の共感を呼んでいます。
[00:12:55.09]
2019 年 11 月のローンチ以来、非常に強力なオーガニック採用が見られ、現在 400,000 を超えるアクティブなインストールがあり、毎日着実に成長を続けています。
[00:13:09.06]
では、Site Kit の何が特別なのでしょうか? ウェブ上での旅の最初の摩擦を改善するように設計されました。
[00:13:16.06]
特に初期設定中、多くのユーザーは、さまざまな製品から重要なデータを収集してアクセスするために、サイトを編集したり、トラッキング スニペットやタグを配置したりする方法を知りません。
[00:13:29.05]
ユーザーの許可があれば、Site Kit はユーザーに代わってそれを処理し、サイトを送信して適切な製品アカウントを接続する最初の瞬間のボトルネックを取り除きます。
[00:13:42.04]
そして、これが例です。 これらの製品を接続したら、Site Kit が必要なときに関連情報をユーザーのダッシュボードに直接表示する方法について説明します。
[00:13:51.08]
多くのユーザーは、自分で何度も確認するよりも、何か重要なことが起こったときに知らせるために積極的に情報を共有することを好みます。
[00:14:01.03]
これは、複数の製品からの情報を組み合わせて洞察を得る機会でもあります。
[00:14:06.06]
同様に、読み込みが最も速いページは、ページ滞在時間とアクセス収益が最も高いページでもあります。
[00:14:13.01]
したがって、これらは P 速度の洞察、アクセント、および分析から得られた 3 つの統計であり、ユーザーが何が起こっているのかを理解できるようにするためにそれらをまとめました。
[00:14:23.00]
サイトの所有者とエンド ユーザーの両方にとって優れたユーザー エクスペリエンスのもう 1 つの重要な側面は、求められているコンテンツと、より多くの訪問者とユーザーを獲得するために戦略的に作成する方法を理解することです。
[00:14:36.02]
どのタイプのコンテンツが消費され、何が人気があるかという点で、エコシステム全体で観察されているいくつかの変化があります。 Web をその方向に前進させるために私たちが行っていることを皆さんと共有したいと思います。
[00:14:50.01]
ストーリーについては、すでにご存知の方も多いでしょう。 これは、最初のモバイル ネイティブ コンテンツ フォーマットです。 スマートフォン ユーザーの 4 人に 3 人近くが、ソーシャルでタップ可能なストーリーを読んだり閲覧したりしています
メディア、少なくとも毎週。
[00:15:05.04]
ユーザーの 64% がストーリー形式を好み、75% 以上がタップ可能なストーリーを読むことに興味を持っています。
[00:15:16.08]
ストーリー フォーマットは一時的なユース ケースを超えて機能し、メディア ランドスケープの独自の柱になることができると信じています。
[00:15:25.03]
ストーリーは、ウェブページを見ることができる場所ならどこでも見ることができるウェブページですが、Google ではストーリーが輝けるようにさらに努力しています。
[00:15:34.07]
したがって、たとえば、ニューヨークでやるべきことなどの選択クエリでは。 パブリッシャーのストーリーで、このようなビジュアル ブロックをトリガーします。
[00:15:44.01]
Discover は、ストーリーが表面化するもう 1 つの製品であり、Android と iPhone の両方のユーザーの間で非常に人気があり、月間アクティブ ユーザー数は 8 億人を超えており、これはすでに 2 年前のことです。
[00:15:59.04]
Discover を定期的に使用している方は、Discover でストーリーのこの非常にユニークな外観の大きなプレビュー エクスペリエンスを既に見たことがあるでしょう。
[00:16:08.06]
ストーリーはフィード内でかなりのスペースを占めており、そのうちの 1 つをタップすると、パブリッシャーのストーリーに直接移動します。
[00:16:16.06]
これは今日すでに実用化されており、多くのパブリッシャーにかなりの量のトラフィックを配信しています。
[00:16:23.01]
WordPress のサイト所有者がストーリー形式に簡単にアクセスできるようにしたいと考えています。 そこで、WordPress プラグイン用に再設計された Stories を作成しました。
[00:16:33.01]
私たちは、視覚的に見事なストーリーを簡単かつ楽しく作成できるエディターの構築に着手しました。
[00:16:39.02]
多数のテンプレートと、マスキング プリセット、他の画像への画像のドロップ、フォント、テキスト画像、形状、ビデオを編集するための広範なオプション、およびこれらすべてを非常にシンプルで直感的な UI にするなどの多くの機能を備えています。
[00:16:54.04]
これのより良いバージョンがリリースされたときに通知を受け取りたい場合は、このスライドの短いリンクに関心を示してください。
[00:17:01.08]
さらに詳しく知りたい場合は、次のセッションをご覧ください。
私の同僚である Paul Bakaus は、今日 Web ストーリー プラグインについて話し、スニーク プレビューを行う予定です。
[00:17:15.07]
最後になりましたが、Web プライバシーに対する私たちのビジョンの概要を簡単に説明し、そのビジョンを実現するための道筋を説明し、フィードバックを共有し、プロセスで協力するためのオプションについて説明したいと思います.
[00:17:29.07]
サードパーティの Cookie のサポートを終了する Chrome の計画に関する見出しを見たことがあるでしょう。
[00:17:35.03]
しかし、そのビジョンは、見出しが示唆するよりも幅広く、より繊細です。
[00:17:40.06]
これは、ユーザーのプライバシーをより尊重するように Web を進化させると同時に、すべての人にとって Web を活気に満ちた健全な状態に保つコア ビジネス モデルとユース ケースを引き続きサポートすることを保証することです。
[00:17:55.05]
Web コミュニティは、ユーザーのプライバシーと選択をサポートするために、さらに多くのことを行う必要があります。
[00:18:01.03]
これは、コンテンツと広告の関連性や詐欺防止などのユースケースをサポートする同じテクノロジーが、望ましくない目的にも使用されるという問題に対処することを意味します。
ウェブ全体の追跡。
[00:18:15.04]
主に、サード パーティの Cookie とフィンガープリンティングなどの秘密の追跡方法について話しています。
[00:18:21.05]
たとえば、ユーザーはブラウザの設定で Cookie ベースのトラッキングを制御できますが、実際にはフィンガープリンティングをオプトアウトすることはできず、多くの場合、フィンガープリンティングが行われていることを知る方法さえありません。
[00:18:31.07]
また、これらのメカニズムはいずれも、デフォルトでは非公開ではありません。
[00:18:36.02]
そのため、責任あるアプローチは、従来の慣行を新しいプライバシー保護ソリューションに置き換えることであると考えています。
[00:18:45.08]
この作業は 3 つのフェーズで考えてください。 まず、Cookie のセキュリティと選択を改善するために、今日すでにできることがいくつかあります。
[00:18:55.01]
その一例が、SameSite Cookie と呼ばれる新しい Cookie ラベル付けポリシーです。これは、デフォルトで Cookie をファースト パーティにすることで、セキュリティを向上させ、秘密の追跡の機会を減らします。
[00:19:08.03]
また、サードパーティの Cookie が安全な接続を介してアクセスされることも保証します。 4 月、Chrome は一時的に SameSite Cookie の変更を書き戻し、安定性を確保し、Web サイトの注意散漫を回避し、COVID-19 危機の際に不可欠なサービスを提供しました。 このロールアウトは最近再開されました。
[00:19:29.07]
2 つ目は、プライバシーに関する新しい Web 標準を開発するためのオープンで共同作業を推進することです。 これはプライバシー サンドボックス イニシアチブです。
[00:19:39.09]
この作業には、新しいテクノロジーの作成と、サイト全体でユーザーを特定することなく主要なユース ケースをサポートすること、および受動的なデータ収集を制限することで秘密の追跡を軽減する取り組みが含まれます。
[00:19:55.00]
そして、これらの新しいプライバシー保護ソリューションが導入され、エコシステムのニーズが満たされた後にのみ、Chrome でのサードパーティ Cookie のサポートを段階的に廃止する予定です。
[00:20:08.06]
したがって、これらは、現在および将来の繁栄するウェブを確保するために、継続して取り組み、改善することが重要であると私たちが考える 3 つの領域です。
[00:20:19.01]
そして、それぞれがなぜそれほど重要なのか、それぞれの中でどのような大きな変化が起こっているのかをよりよく理解していただければ幸いです.
[00:20:26.06]
言うまでもなく、これもあなた次第です。クライアントやパートナーがサイトのパフォーマンス指標を理解して利益を得られるようにするか、チームやクライアントに適切な統計と適切なコンテキストへのアクセスを提供するか、あるいはおそらく新しいプライバシー基準に関する議論に貢献します。
[00:20:47.03]
一緒に、エンド ユーザーとサイト所有者の両方にとって、Web をより安全に、より速く、より快適なものにすることができます。 ありがとう。