🐈

フロントエンドのパフォーマンステストが可能になったk6（v0.44）とWeb Vitalsの解説

2023/05/13に公開

JavaScript

frontend

負荷テスト

tech

概要

k6は、開発者がロードテストを行い、パフォーマンスの問題を
特定できるようにするためのオープンソースの負荷テストツールです。
この度v.044がリリースされ、Web Crypto API のサポートが開始されました。
高負荷状態でのフロントエンドのパフォーマンス計測が可能になりました。

なお前バージョンにあたるv0.43で拡張機能扱いだった
ブラウザサポートがビルドインされているため、より計測しやすくなっています。

サンプルコード

import { chromium } from 'k6/experimental/browser';

export default async function () {
  const browser = chromium.launch({
    headless: false,
    timeout: '60s', // Or whatever time you want to define
  });
  const page = browser.newPage();

  try {
    await page.goto('https://test.k6.io/');
    page.screenshot({ path: 'screenshot.png' });
  } finally {
    page.close();
    browser.close();
  }
}

計測結果サンプル

webvital_cumulative_layout_shift..........: avg=0        min=0        med=0        max=0        p(90)=0        p(95)=0
webvital_cumulative_layout_shift_good.....: 1       0.323332/s
webvital_first_contentful_paint...........: avg=278.86ms min=141.1ms  med=229.39ms max=466.1ms  p(90)=418.76ms p(95)=442.43ms
webvital_first_contentful_paint_good......: 3       0.969995/s
webvital_first_input_delay................: avg=300µs    min=200µs    med=300µs    max=399.99µs p(90)=379.99µs p(95)=389.99µs
webvital_first_input_delay_good...........: 2       0.646663/s
webvital_interaction_to_next_paint........: avg=16ms     min=16ms     med=16ms     max=16ms     p(90)=16ms     p(95)=16ms
webvital_interaction_to_next_paint_good...: 1       0.323332/s
webvital_largest_content_paint............: avg=303.6ms  min=141.1ms  med=303.6ms  max=466.1ms  p(90)=433.6ms  p(95)=449.85ms
webvital_largest_content_paint_good.......: 2       0.646663/s
webvital_time_to_first_byte...............: avg=205.23ms min=104.79ms med=188.39ms max=322.5ms  p(90)=295.67ms p(95)=309.08ms
webvital_time_to_first_byte_good..........: 3       0.969995/s

各計測値の説明

webvital_cumulative_layout_shift（CLS）webvital_cumulative_layout_shift_good

webvital_cumulative_layout_shift（CLS）

指標：カウント数。数値が低いほど、良い結果
概要：ユーザーが、予期しないコンテンツの遷移に遭遇する頻度の数値化に役立つ指標。
CLS が低ければ低いほど、そのページが快適であることが保証されます。
悪い体験については下記詳細にある、レイアウトの不安定さがユーザーにネガティブな影響を及ぼす状況について説明しているスクリーンキャストを見てもらえると、とても分かりやすいです。
詳細：https://web.dev/cls/

webvital_cumulative_layout_shift_good

指標：良い評価を得たカウント数。
概要：k6独自のメトリクス。0.1秒以内の評価を得た回数。

webvital_first_contentful_paint（FCP）webvital_first_contentful_paint_good

altテキスト

webvital_first_contentful_paint（FCP）

指標：描画時間。数値が低いほど、良い結果
概要：ユーザーが、画面上に何らかのコンテンツの表示を確認できるタイミングを計ったもの。早ければ早いほど、ユーザー体験が良い。
詳細：https://web.dev/fcp/

webvital_first_contentful_paint_good

指標：良い評価を得たカウント数。
概要：k6独自のメトリクス。1.8秒以内の評価を得た回数。

webvital_first_input_delay (FID) webvital_first_input_delay_good

altテキスト

webvital_first_input_delay (FID)

指標：初回入力までの遅延時間。数値が低いほど、良い結果
概要：ユーザーが、最初にページを操作したとき (例：リンクをクリック、ボタンをタップなど) から、操作に応じてブラウザーが実際にイベントハンドラーの処理を開始するまでの時間を測定します。
詳細：https://web.dev/fid/

webvital_first_input_delay_good

指標：良い評価を得たカウント数。
概要：k6独自のメトリクス。100msの評価を得た回数。

webvital_interaction_to_next_paint （INP） webvital_interaction_to_next_paint_good

webvital_interaction_to_next_paint （INP）

指標：ページの総合的な応答性を評価する数値。
概要：ユーザーがページで行うすべてのクリック、タップ、などのインタラクションの遅延を観察し、一番長いインタラクションをそのページのINPとして採用する。
詳細：https://web.dev/inp/

webvital_interaction_to_next_paint_good

指標：良い評価を得たカウント数。
概要：k6独自のメトリクス。200ms以下の評価を得た回数。

webvital_largest_content_paint（LCP） webvital_largest_content_paint_good

webvital_largest_content_paint（LCP）

指標：ファーストビューコンテンツのレンダリングに関する数値。
概要：ビューポート内（notページ全体）に表示される、最も大きいコンテンツ（例：画像やテキストブロック）のレンダリング時間を、ページの初期読み込み開始タイミング（TTFB）と比較してレポートします。

webvital_largest_content_paint_good

指標：良い評価を得たカウント数。
概要：k6独自のメトリクス。2.5sec以下の評価を得た回数。