Chrome DevSummit2021のトップインサイト

Chrome Dev Summitは、Chromeの専門家が、最新の製品とChromeとウェブの将来に対するビジョンについてのハイライトを共有する毎年恒例のイベントです。

この記事には、Chrome DevSummit2021からのトップインサイトが含まれています。

Chromeチームによって発表された最も興味深い変更は次のとおりです。

• User-Agents文字列の情報量を制限する計画。
• LighthouseおよびDevToolsでのユーザーフローの新しいサポートの発表、
• 2つの新しいパフォーマンスメトリクス（Core Web Vitalsの候補）の紹介、および
• 新しいレスポンシブデザイン機能。

サードパーティのCookieの段階的廃止–ユーザーエージェントクライアントのヒント

プライバシーサンドボックスは、プライバシーに重点を置いたWebを作成するためのGoogleの成長する取り組みの重要な要素の1つであり続けています。

ブラウザには、カスタマイズされたエクスペリエンスの提供やユーザーのログイン状態の維持などの有用な目的でサードパーティのCookieを使用しているかどうか、またはサイト間の追跡に使用しているかどうかを判断する方法がありません。

出典：バーブスミス

そのため、Chromeは、サードパーティのCookieを必要とせずに、機能（広告、不正検出、カスタマイズされたコンテンツの配信など）を維持できる専用のAPIを作成することを目指しています。

開発者がAPIを採用する時間を確保した後、ChromeはサードパーティのCookieのサポートを安全に段階的に廃止します。

新しいテクノロジーとその開発段階は、プライバシーサンドボックスタイムラインで確認できます。

今年発売された新しいソリューションの1つは、 User-Agent Client Hints（UA-CH）です。

User-Agent文字列には、ユーザーのデバイスとブラウザーに関する多くの情報が含まれており、ブラウザーのフィンガープリントに使用できます。

Chromeは、User-Agent文字列のデフォルトの情報量を減らし、個々のユーザーを識別しにくくすることで、ブラウザのフィンガープリントと戦うことを目的としています。 文字列の情報には、次のもののみが含まれます。

• ブラウザのブランドとバージョン、
• デスクトップまたはモバイルの場合の情報、および
• それが実行されているプラ​​ットフォーム。

User-Agent文字列は、デフォルトでいくつかの情報を提供します。これは、ほとんどのユースケースをカバーしている可能性がありますが、より詳細な情報は、要求があった場合にのみ簡単な形式で入手できます。

出典： Chromeデベロッパー

2022年4月以降、ChromeはUser-Agent文字列を徐々に減らします。

User-Agent Client Hints APIを使用して、ユーザーに関する追加データを引き続き取得できますが、ユーザーは共有する情報の量を決定できます。

パフォーマンスツールの更新

Chromeは、ウェブのパフォーマンスを測定および分析するためのいくつかのエキサイティングな変更と新機能を発表しました。 含まれるもの：

• PageSpeed InsightsのUIを改善し、
• LighthouseおよびDevToolsでのユーザーフローのサポートの追加、
• 2つの新しい実験的測定基準を紹介します。

PageSpeedInsightsインターフェイスの変更

PageSpeed Insights UIが更新され、より直感的になり、データの表示が改善されました。

新しいインターフェースには、Lighthouseレポートに基づく「ラボデータ」と実際のユーザーエクスペリエンスに基づく「フィールドデータ」の明確な区別が含まれています。

さらに、「拡張ビュー」と呼ばれる新機能により、フィールドデータセクションに機能が追加されます。 これを使用して、CoreWebVitalsの詳細を確認できます。

Googleはまた、OriginSummaryをフィールドデータの下に移動しました。 それをクリックすると、同じオリジンからのすべてのページの集計スコアを確認できます。

フィールドとラボのデータセクションの下に、次のような追加の役立つ情報があります。

• データ収集期間、
• 訪問期間、
• デバイス、
• ネットワーク接続、
• サンプルサイズ、
• Chromeバージョン。

変更は、CoreWebVitalsの評価にも反映されます。 単一の「合格」または「不合格」の単語の代わりに、別のサブセクションで使用できるようになります。

最後に、読み込みページの画像がフィールドセクションから削除されます。 ラボデータセクションに、読み込みシーケンスを表示する画像とサムネイルがあります。

Lighthouseでのユーザーフローのサポート

新しいLighthouseAPIを使用すると、各ページのパフォーマンスを個別に分析する代わりに、リンクのクリック、スクロール、追加ページの読み込みをシミュレートすることで、ユーザーフローを分析できます。

Lighthouseは、ページナビゲーション、特定の期間中に発生したユーザーインタラクション、およびページのキャプチャされた状態を表すスナップショットを区別して提供できるようになります。

出典： Houssein Djirdeh

新機能を使用すると、ユーザーエクスペリエンスをよりよく理解し、Webサイトでのユーザーの移動中のパフォーマンスの問題を見つけることができます。

DevToolsの新しいレコードパネル

ユーザーフローの分析のサポートも、DevToolsに直接追加されました。

DevToolsで新しく起動されたレコードパネルを使用すると、Webサイトでのユーザージャーニー全体を分析、記録、およびエクスポートできるようになります。

新しいツールを使用すると、キーの押下やリンクのクリックなど、ユーザーがWebサイトで実行するすべてのアクションをパフォーマンスパネルで直接表示できます。 この機能は、複雑な相互作用を簡単に理解してデバッグできるようにすることを目的としています。

2つの新しいパフォーマンスメトリック

Chromeは、CoreWebVitalsの潜在的な候補として2つの新しいパフォーマンス指標を発表しました。

応答性

応答性は、ページの全体的な応答性をキャプチャすることを意味します。

現在、First Input Delayを使用して、読み込み中のページの応答性を測定しています。 ブラウザが多くのリソースをロードする必要があり、メインスレッドの時間が非常に要求される場合、応答性は特に不安定であるため、FIDは有用なメトリックです。

ただし、すべてのFID指標は、ブラウザーがユーザー要求を処理する準備ができるまでの時間です。 特定のページのライフサイクル全体で入力遅延を測定することはできません。

Chromeチームは、まだ新しい応答性指標を概念化しています。 ページのライフサイクル全体で入力レイテンシを測定する際の課題について詳しくは、こちらをご覧ください。

滑らかさ

滑らかさは、アニメーションまたはスクロール中の「スタッター」または「フリーズ」の測定に対処することを目的としています。 この新しいメトリックは、アニメーションフレームがドロップされる頻度と、それがユーザーに与える影響をよりよく理解することを目的としています。

提案されたパーセントドロップフレームメトリックは、ドロップフレームの数を計算し、ユーザーの観点からアニメーションがどれほどスムーズであるかを反映することになっている平均スコアを提示します。

重要なのは、重要な更新を待つ時間の割合です。 これは、ユーザーが実際にWebコンテンツの滑らかさを体験する自然な方法と一致すると思います。 これまで、メトリックの初期セットとして以下を使用してきました。

• ドロップされた平均パーセント：タイムライン全体のすべての非アイドルアニメーションフレーム
• パーセントドロップフレームの最悪のケース：1秒のスライドウィンドウで測定。
• ドロップされたフレームのパーセントの95パーセンタイル：1秒間のスライディングウィンドウで測定。

ソース： web.dev

新しいレスポンシブ

レスポンシブデザインは、もはや携帯電話やデスクトップでうまく機能するようにWebサイトを調整することだけではありません。 それだけではありません。開発者は、すべての人にカスタマイズされたエクスペリエンスを提供し、ダークモードや折りたたみ式デバイスなどのユーザー設定を含める必要があります。

レスポンシブデザインへの変更は、CSS機能に関係しています。 一部の新機能には、新しいコンテナクエリの仕様、スクロールタイムライン、アクセントカラーのプロパティが含まれます。

タイポグラフィのサイズ調整プロパティ

特にエキサイティングな機能の1つは、タイポグラフィのサイズ調整プロパティです。 サイズ調整を使用して、ロードしようとしているWebフォントに一致するようにデフォルトのフォントを調整できます。

Webフォントの読み込みによって生じるシフトを減らすことで、累積レイアウトシフトを防ぐのに役立つため、特に重要です。

ダークモード

さらに、 Chromeは機械学習支援のオートダークアルゴリズム機能に取り組んでいます。 これは、ブラウザがダークテーマを自動的に生成し、この機能をオプトアウトできることを意味します。

Chromeデベロッパーページにアクセスして、 Chromeの新しいオートダーク機能の詳細を確認し、デバイスでテストしてください。