[HTML/CSS] Web vitals

13191 ワード

CSS Web vitals html テキストリンク

Web vitals

:品質指標の集積説明を提供する
Chrome UXレポート:実際のChromeユーザー体験に基づいて、Web Vitalごとにサイトのパフォーマンスを迅速に評価

🙄 Core Web Vitals

:重要なユーザー体験要件.すべてのWebエクスペリエンスにおける重要なユーザーエクスペリエンスの共通集合

https://developers-kr.googleblog.com/2020/05/Introducing-Web-Vitals.html
⭐ 体験のロード

ターゲットコンテンツページ(LCP):認識可能な負荷速度を測定する項目.ページのロードタイムライン上のポイント

は、ページの主な内容がロードされている可能性があります.

ページの最初のロードから、ビューポート内の最大画像またはテキストブロックのレンダリング時間を表示します.

優れたユーザー体験を提供するには、サイトの最大コンテンツプールの塗装時間は2.5秒

を超えてはならない.

ページのプライマリ・コンテンツがロードされている可能性がある場合、ページ・ロード・タイムラインにその時点が表示されます. 重要なユーザ中心のメトリック基準

は、検出された負荷速度を測定することができる

LCPの考慮要因タイプ

<img> 要素

<svg> エレメントの内部 <image>

<video> 要素(ポスター画像を使用)

url() 関数によってロードされた背景画像を含む要素(CSSグラデーションとは逆)

テキストノードまたは他の行のテキストブック要素を含むブロックレベル要素
:エレメントを最初から簡単に操作できるように制限する意図がある

2要素のサイズ:通常、ユーザがビューポートで見た寸法要素はビューポートの外に広がり、要素はクリップされ、オーバーフローがある場合、このセクションは要素サイズに含まれません.テキスト要素の場合、CSSによってすべての要素に適用される余白、内側余白、枠線は考慮されません.👉 すべてのテキストノードは、最も近いブロックレベルの親要素にのみ属します.規格面では、各テキストノード生成含まれるブロックに属する要素

⭐ そうごさよう

第1入力遅延(FID):応答を測定するための項目.ユーザーが初めてページと対話しようとしたときの体験を量子化

クリック、タブ、キーなどの単一タスクの入力イベント.

は、負荷応答性を測定するためにユーザ中心の重要なメトリック基準である.

FIDスコアが低いほど良い.初期入力遅延値は、「良好」しきい値の最低要件

を満たすために100ミリ秒である必要があります.

は、通常、ブラウザのメインスレッドがアプリケーションによってロードされた大規模なJavaScriptファイルを解析して実行するため、入力が遅延(入力待ち時間とも呼ばれる)するため、ユーザーに応答できません.

イベント処理は、「遅延」部分

のみを測定する.

イベント処理時間そのもの、またはブラウザでイベントハンドラを実行するUIを更新するのに要する時間は、

を計測しない.
リソースに対するネットワーク要求が完了すると、ダウンロード完了したメインスレッド上で処理されるページ

プライマリ・スレッドは一時的にアクティブです

FIDはFCPとTTI(time-to-interactive)の間のいくつかの内容をレンダリングしたが、安定したインタラクションはできなかった.

次の要素は、メインスレッドのタスクの完了を待つ必要があります.

テキストフィールド、チェックボックス、およびラジオボタン( <input> , <textarea> )

ドロップダウンメニューを選択( <select> )

リンク( <a> )

なぜ

の最初の入力遅延を測定しますか?

の最初の入力遅延は、ユーザのサイト応答能力に対する第一印象であり、サイトの品質と信頼性の向上に重要である

である.

今日Webで見た最大のインタラクティブな問題はページロードです
ポイントは

サイトの初期ユーザインタラクションの改善であり、Web全体のインタラクションの改善に最も影響を及ぼすのは

である.

RAIL

、重点は反応性です

https://web.dev/rail/

FIDは実際のユーザーを必要とし、実験室で

を測定できない.

総ブロック時間(Total Blocking Time,TBT)メトリックは

を測定することができる.

実験室ではTBTを最適化し,ユーザのFIDを改善し,

⭐ ページコンテンツの視覚的安定性

Cumulative Layout Shift(CLS):視覚安定性を測定する項目.

ページのコンテンツの予期せぬレイアウトの変化を量子化

ライフサイクル全体のすべての予期せぬレイアウト移動に対する最大レイアウト移動スコア

を分割する.

CLSは低く、優れたユーザー体験を確保します.良いCLS点数は0.1以下であるべきで、

レンダリングフレームから次のフレームにビジュアル要素を移動するたびに、

レイアウトが移動します.

ブルーバーの単一レイアウト移動でのスコアは

https://web.dev/cls/#layout-shift-scoreです.

優れたユーザー体験を提供するには、サイトCLSスコアが0.1

未満である必要があります.

レイアウトの移動

ビューポート内のビジュアル要素が2つのフレーム間で開始位置を変更するたびに、layout-shiftがレポートされます.

既存の要素が開始位置を変更した場合にのみ発生します.

/*해당 움직임에 대한 impact fraction(영향분율)과 distacne fraction(거리분율)이라는 두 가지 측정값을 사용해 계산*/
layout shift score = impact fraction * distance fraction

インフルエンスパーセント(Influence Percent):2つのフレーム間ビューポート領域に対する不安定な要因の影響を測定します.

距離パーセントきょりパーセント:不安定な要素のビューポートに対する移動距離を測定します

프레임에서 *불안정 요소*가 수평 또는 수직으로 이동한 최대 거리를 뷰포트의 가장 큰 치수

https://web.dev/cls/#layout-shift-score

上記の例では、最大のビューポートサイズは高さで、不安定な要素はビューポート高さの25%に移動します. 距離パーセント=0.25
したがって、本例では、影響率: 0.75 距離分率 0.25. レイアウト移動スコア = 0.75 * 0.25 = 0.1875

CLS測定方法

実験室または現場で測定可能

手動環境でページをロードするため、ページロード中のレイアウト移動のみを測定できます.

は、実際のユーザ体験

よりも小さい場合がある.
👉 これらすべてには、ユーザー中心の結果の位置決め、現場測定可能、実験室診断測定などの重要な基準とツールがあります.

🙄 CoreベースのWeb Vitalsメトリックとしきい値

https://web.dev/defining-core-web-vitals-thresholds/
👉 上記の基準を満たす最適なしきい値を選択します.これは、完全なしきい値がないことを意味し、複数の合理的なしきい値で選択する必要がある場合があります.

🙄 メートル法

:正確、定量的測定対象と性能指標で測定する
Web Vitalsを測定するには、次の手順に従います.

ラボ:ツールを使用して、一貫性と制御された環境でのページロードをシミュレートします.

新機能は、製品のリリース前に実際のユーザーの性能特性を測定できないため、性能回帰を避けるために、出荷前に実験室でテストすることが望ましい.

現場(実際のユーザー監視):実際のユーザーが実際にページをロードし、ページと対話する

サイトのパフォーマンスは、ユーザーのデバイスとネットワークの状態、およびユーザーがページと対話しているかどうかによって異なる場合があります.

サイトがユーザーのロードとインタラクティブサイトで実際にサイトの性能を測定してこそ、ユーザーのために正しく動作することができます.

👉 通常、より良いパフォーマンスを得るためには、この2つの方法を同時に使用することが望ましい.

🙄 Web Vitals javascript library

// Example of using web-vitals to measure & report CLS, FID, and LCP.
import {getCLS, getFID, getLCP} from 'web-vitals';
function reportToAnalytics(data) {
  const body = JSON.stringify(data);
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}

getCLS((metric) => reportToAnalytics({cls: metric.value}));
getFID((metric) => reportToAnalytics({fid: metric.value}));
getLCP((metric) => reportToAnalytics({lcp: metric.value}));