サイト監査のパフォーマンス指標を収集する前に、簡単な修正と重点的な領域を特定するために実行できるチェックがいくつかあります。
妥当性チェック: アーキテクチャとコード
パフォーマンスを測定する前に可能な限り、簡単なバグを修正し、不要なアセットとコードを削除し、不要なアセットとコードを削除します。ただし、問題と修正の前後の記録を必ず残しておいてください。これらの改善は引き続き監査作業の一部となります。
サイトのアーキテクチャとアセット
コード リポジトリやサイトから簡単に削除できない以前のページ、コンテンツ、その他のアセットなどはありますか？孤立したページ、冗長なテンプレート、未使用のイメージ、未使用のコードとライブラリがないか確認します。
ランタイム エラー
ブラウザのコンソールで報告されたエラーを確認します。「:)」は使用しないでください。
lint チェック
HTML、CSS、または JavaScript のコードにエラーはありませんか？ワークフローに lint チェックを組み込むと、コードの品質を維持し、回帰を回避できます。HTMLHint、StyleLint、ESLint をおすすめします。これらは、コードエディタ プラグインとして使用することも、ワークフロー プロセスや Travis などの継続的インテグレーション ツール内でコマンドラインから実行することもできます。
無効なリンクと画像
Chrome 拡張機能（こちらがおすすめ）や Broken Link Checker などのノードツールなど、ビルド時および実行時に無効なリンクをテストするツールが数多くあります。
プラグイン
Flash や Silverlight などのプラグインはセキュリティ上のリスクとなる可能性があります。これらのプラグインのサポートは終了しており、モバイルでは動作しません。Lighthouse を使用してプラグインを確認します。
さまざまなデバイスとコンテキストでテストする
実際のデバイス、複数のブラウザ、さまざまな接続コンテキストで実際のユーザーにサイトをテストしてもらうのに勝るものはありません。
これらのチェックの一部は比較的主観的ですが、認識されるパフォーマンスに影響する問題を特定できます。たとえば、無効なリンクは時間を浪費し、「応答がない」と感じます。判読できないテキストは 読み取りに時間がかかります
クロスデバイス テスト
ビューポートとウィンドウ サイズを変えてみます。モバイル デバイスとデスクトップ デバイスをそれぞれ 1 台以上使用します。可能であれば、小さな画面の低スペックのモバイル デバイスでサイトを試してください。テキストは読み取れますか？破損した画像はありますか？ズームはできる？タップ ターゲットは十分な大きさですか？動作が遅いですか？
反応しない機能はありますか？結果のスクリーンショットまたは動画を撮影します。
クロス プラットフォーム テスト
どのプラットフォームをターゲットにしていますか？ユーザーが現在と今後使用するブラウザとオペレーティング システムでテストする必要があります。
接続
複数のターゲット ネットワーク タイプ（接続済み、Wi-Fi、モバイル）でテストできます。ブラウザツールを使用して、さまざまなネットワーク状態をエミュレートできます。
デバイス
ユーザーと同じデバイスでサイトをテストします。次の写真は、2 台の異なるスマートフォンで同じページを表示したものです。
大画面では、テキストは小さくても読みやすい。小さい画面では、ブラウザはレイアウトを正しくレンダリングしますが、拡大してもテキストは判読できません。ディスプレイがぼやけていて、「色かぶり」がある（白が白に見えない）ため、コンテンツが読みにくくなっています。
このような単純な調査結果の方が、不明瞭なパフォーマンス データよりもはるかに重要な場合があります。
UI と UX を試す
アクセシビリティ、ユーザビリティ、読みやすさ
サイトのコンテンツや機能に誰でもアクセスできるようにするには、ユーザーの多様性を理解する必要があります。Lighthouse などのツールは、特定のユーザー補助機能をテストしますが、実際のテストに勝るものはありません。屋外の日光や電車の中など、さまざまなシナリオでデータの読み取り、操作、入力を試します。さまざまな友人、家族、同僚にサイトを試してもらいます。Mac の VoiceOver、Windows の NVDA などのスクリーン リーダーでコンテンツを利用してみる。
ユーザー補助の実装とレビューについて詳しくは、ユーザー補助に関する Udacity コースと、Web Fundamentals の記事ユーザー補助のレビューを行う方法をご覧ください。
ユーザー補助の監査の記録を保存します。シンプルな改善を行うことで、すべてのユーザーに役立つ可能性があります。
UI と UX に関する基本的な問題
想定どおりに動作しない操作、小さなウィンドウやビューポートで要素がオーバーフローする、タップ ターゲットが小さすぎる、コンテンツを読み取れない、スクロールが粗くなる、サイト上の複数のページを開き、ナビゲーションとすべてのコア機能を試します。記録を残します。
画像、音声、動画
コンテンツのオーバーフロー、アスペクト比の誤り、切り抜きの失敗、品質の問題をテストします。
主観的な UI テスト
すべて該当するとは限りませんが、簡単な変更でリファクタリングが容易になります。
- サイトを開くと、「何ができる？」とすぐにわかりますか？
- コンテンツを利用したり、リンクをたどったりしたくありませんか？
- 視覚的な階層や経路はありますか？それとも、すべてに同じ視覚的な重みがあるのでしょうか？
- レイアウトが雑然としていませんか？
- フォントの数が多すぎますか？
- 削除できる画像やその他のコンテンツはありますか？
- コンテンツの設計はインターフェースの設計と同じくらい重要です。サイトのテキストや画像のコンテンツは モバイルや PC に適したものか？排除できるものはありますか？ モバイル向けに記述する。