# Testing And Monitoring
[元の記事](https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/#testing-and-monitoring)

## 71 Have you optimized your auditing workflow?
監査のワークフローを最適化しましたか？

手元に計測環境を用意しておくと、パフォーマンスの検証時間を短縮できるかもしれません。
WebPageTestのサーバにパフォーマンスの計測結果を反映させる前に、[Alfred Workflow for WebPageTest](https://github.com/tkadlec/webpagetest-alfred-workflow)を使用すると手軽に計測することが可能。

### [Webpagetest とは](https://www.webpagetest.org/)
そのとおりウェブサイトのパフォーマンスを計測できるツールです。 Google を中心にオープンソースで開発されているもので、下記の機能を持っています。（[アカマイのブログ](https://blogs.akamai.com/jp/2016/11/webpagetest.html)が詳しく書かれてました）

- 測定対象の Web サイトの URL を指定して測定できる。
- 各ファイルのダウンロード時間、JS の実行時間を計測できる
- ブラウザの表示状態のスクリーンキャプチャを撮ってくれる
- Lighthouse も組み込まれている
- Chrome devtoolsよりもネットワークやCPUのスロットリングが実際の挙動に近い
- webpagetest.orgでは選択されたデバイスを実際に利用してリモートデバッグしているので、より実態に則した計測結果が得られる

Webpagetest はすぐ使えるように無料のパブリックサーバが提供されていますが、プライベートサーバを立てることも可能です。

[試しにSUUMOを計測してみた](https://www.webpagetest.org/result/210219_DiXQ_f67dda6058dd4731d1dd78fd9167f00b/)

### Alfred Workflow for WebPageTest
Alfredからパフォーマンスの計測ができるやつっぽい

[GoogleスプレッドシートからWebPageTestを起動し、アクセシビリティ、パフォーマンス、SEOスコアを計測](https://github.com/uknmr/gas-webpagetest)したり、Lighthouse CIでチェックすることが可能。

AutoWebPerfは、複複数のソースからパフォーマンスのデータを自動的に収集できるツール
- Chrome UXレポート
- PageSpeed Insights
- WebPageTest
スプレッドシートに書き込んだり、[DataStudio で可視化したりを自動化できる](https://docs.google.com/spreadsheets/d/1c3k9eEVg12Atoa72tglVVBg--o0CEMkOF3JCaLlxzeo/edit#gid=0)

フィールドデータやラボデータが自動で収集して一覧できるの良さそう....

## 73 Have you tested the performance of your 404 pages?
404ページのパフォーマンスをテストしましたか？

404ページのキャッシング戦略を検討し、最適化するようにしてください。
（404エラーはパフォーマンスを低下させるだけでなく、トラフィックのコストにもなるため）

404レスポンスで重要なのは、実際にブラウザに送信されているレスポンスのボディサイズ。
ブラウザが HTML レスポンスを期待しているときだけ HTML を提供し、それ以外のレスポンスに対しては小さなエラーペイロードを返すこと。

オリジンの前にCDNを配置すると、404ページのレスポンスをCDN上でキャッシュ可能です。しかし、オリジンサーバがすべての404リクエストに応答するようになっていると、DoS攻撃に使われる恐れがある。

404ページを定期的に計測して、時間の経過とともにスコアの劣化をモニタリングすることが勧められていました

## 74 Have you tested the performance of your GDPR consent prompts?
GDPRの同意プロンプトのパフォーマンスをテストしましたか？

EU一般データ保護規則（GDPR）や カリフォルニア州 消費者プライバシー法（CCPA）の条件下では、EUの顧客がトラッキングをオプトインまたはオプトアウトするためのオプションを提供するための、サードパーティライブラリを使用することが一般的になってきました。
他のサードパーティ製スクリプトと同様に、そのパフォーマンスは、パフォーマンスの取り組み全体にかなり壊滅的な影響を与える可能性があります。

クッキーの同意のプロンプトは CLS に影響を時々影響を与えることがあるので、 Osano や [cookie-consent-box](https://github.com/adriandmitroca/cookie-consent-box) の使用を検討してください。

## 75 Do you keep a performance diagnostics CSS?
パフォーマンス診断のCSSを保持していますか？

パフォーマンスの悪いコードがデプロイされないようにするためにあらゆる種類のチェックを含めることができますが、中でも、[Performance Diagnostics CSS](https://gist.github.com/tkadlec/683b26344cde774170b94c0fcf0088b4)を使うと、遅延ロードされた画像、サイズの合わない画像、レガシーフォーマットの画像、および同期スクリプトをハイライト可能

/* Performance Diagnostics CSS */
/* via Harry Roberts. https://twitter.com/csswizardry/status/1346477682544951296 */
img[loading=lazy] {
  outline: 10px solid red;
}


## 76 Have you tested the impact on accessibility?
アクセシビリティへの影響を検証しましたか？

ブラウザがページの読み込みを開始すると、DOM が構築され、スクリーン・リーダーのような支援技術が実行されている場合は、アクセシビリティ・ツリーも作成されます。スクリーン・リーダーはその後、アクセシビリティ・ツリーを照会して情報を取得し、ユーザーが利用できるようにしなければなりません。そして、それには時間がかかることもあります。

Time to Interactive (対話までの時間) は、通常、ユーザーがリンクやボタンをクリックしたりタップしたりしてページと対話できるようになるまでの時間を示す指標を意味します。しかし、スクリーンリーダーの場合は「インタラクティブまでの時間が速い」とは、「スクリーンリーダーが指定されたページのナビゲーションをアナウンスし、スクリーンリーダーのユーザーが実際にキーボードを叩いて対話できるようになるまで」の時間の経過を意味しています。

大きなページや JavaScript での DOM 操作は、スクリーンリーダーのアナウンスの遅延を引き起こします。

## 77 Is continuous monitoring set up?
計測的な監視が設定されていますか？

WebPagetest のプライベートインスタンスを持つことは、回数制限なく素早く計測可能なので便利です。
Sitespeed、Calibre、SpeedCurve のようなアラート機能を備えた継続的なモニタリングツールを使用すると、パフォーマンスのより詳細な画像を把握できるようになります(詳細な画像ってどういうこと？)。ビジネスに特化したメトリクスの測定と監視を行いましょう。また、経年変化を監視するために、劣化した際にはアラートを追加することも検討してください。

パフォーマンスの経時変化を監視するために、リアルユーザーモニタリングの使用を検討してください。
負荷テストツールには、 [k6](https://github.com/loadimpact/k6#readme) を使用することができます。
また、[SpeedTracker](https://speedtracker.org/)、[Lighthouse](https://github.com/GoogleChrome/lighthouse)、[Calibre](https://calibreapp.com/)も検討してください。