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