制作したWebサイト、Webアプリケーションのパフォーマンスを測定する

転職活動をはじめるにあたって、Webアプリケーションのポートフォリオを作成しております。
コア機能を実装した段階でパフォーマンスは本当に大丈夫か？時になったので、LightHouseを利用しました。
レポート内容の項目の理解ができていなかったため、まとめました。
レポートを読み取ることだけが目的となっておりますので、結果に対する改善策は割愛しておりますので、ご了承ください。
また過不足などあるかと思いますので、その際にはご教授いただけると幸いです。

LightHouseとは

Googleが提供しているWebサイトのパフォーマンス測定ツールの一つです。

こちらは無料で利用でき、指定したWebサイト、Webアプリケーションのパフォーマンス、アクセシビリティ、ベストプラクティス、SEOの４項目で評価を出力してくれます。Lighthouseは仮想環境でWEBページの表示をシミュレートして評価を行うため、実際にユーザーが利用した時と異なる結果となることもあるようです。

利用手順

LightHouseは、ブラウザとCLIで利用することができます。

今回は初学者でも取り入れやすかったブラウザで利用する方法です。

1. Googleウエブストアで”Lighthouse”と検索して、”chromeに追加”をします。
2. パフォーマンス計測したいWEBページをchromeのシークレットモードで開きます。
3. 検証ツールの”Lighthosue”タブをクリックして、”Analyze page load”をクリックする
4. 結果が出力されるまで待ちます。

出力結果について

• Performance

  First Contentful Paint (FCP)

  FCPは、ユーザーが最初にDOM（Document Object Model）要素を視認できるまでの時間を測定します。ここでのDOM要素は、テキスト、画像、SVG、Canvasなどが含まれます。
  ページが白い画面から最初のコンテンツを表示する瞬間がFCPに相当します。

  Total Blocking Time (TBT)

  TBTは、First Contentful Paint（FCP）からTime to Interactive（TTI）までの間に、メインスレッドが長時間ブロックされていた合計時間を測定します。長時間ブロックされるイベントとは、50ミリ秒以上かかるタスクを指します。

  Speed Index

  Speed Indexは、ページのビューポート（画面に表示される部分）がどれだけ速く完全にレンダリングされるかを示します。ページがロードされている間に視覚的な進捗を測定し、視覚的に完了するまでの時間を算出します。スコアが低いほど、コンテンツの表示が速いことを意味します。

  Largest Contentful Paint (LCP)

  LCPは、ユーザーがページをロードしたときに、視覚的に最も大きなコンテンツ（例えば、画像、ビデオ、ブロックレベルのテキスト要素など）が完全にレンダリングされるまでの時間を測定します。

  Cumulative Layout Shift (CLS)

  CLSは、ユーザーがページを読み込んでいる間に発生するすべてのレイアウトシフトの合計スコアを示します。レイアウトシフトとは、ページが読み込まれている間に、要素がその位置を変えることを指します。スコアはシフトのインパクトと頻度に基づいて計算されます.

  ---

• Accessibility

  アクセシビリティ（Accessibility）は、ウェブコンテンツやアプリケーションが障害を持つユーザーを含むすべてのユーザーにとって利用可能であることを意味します。Lighthouseのアクセシビリティ項目は、ウェブページがどの程度アクセシビリティのベストプラクティスに従っているかを評価します。具体的な評価ポイントは以下の通りです。

  アクセシビリティの評価項目

  1. 代替テキスト:

     すべての画像や非テキストコンテンツに適切な代替テキストが提供されているかを確認します。これにより、視覚障害のあるユーザーがスクリーンリーダーを使用してコンテンツを理解することができます。

  2. コントラスト比:

     テキストと背景のコントラスト比が適切かを評価します。視覚障害や色覚異常のあるユーザーがコンテンツを読みやすくするために必要です。

  3. ラベルとフォーム要素:

     入力フィールドやボタンなどのフォーム要素に適切なラベルが付いているかを確認します。これにより、スクリーンリーダーを使用するユーザーがフォームを正確に操作できます。

  4. ナビゲーションの容易さ:

     ページ内のリンクやナビゲーションメニューが論理的かつ予測可能な順序で配置されているかを評価します。キーボード操作やスクリーンリーダーを使用するユーザーにとって重要です。

  5. ARIA（Accessible Rich Internet Applications）属性の使用:

     ARIA属性が適切に使用されているかを確認します。ARIA属性は、特に動的なコンテンツのアクセシビリティを向上させるために使用されます。

  6. ヘッディング構造:

     ページのヘッディング構造が論理的で適切かを評価します。これにより、スクリーンリーダーを使用するユーザーがページの構造を理解しやすくなります。

---

• Best Practices

  Lighthouseの「Best Practices」項目は、ウェブサイトのセキュリティ、パフォーマンス、そして開発者が推奨する手法に従っているかどうかを評価します。これには、ユーザー体験を向上させ、セキュリティリスクを軽減し、ウェブサイトのメンテナンス性を高めるためのベストプラクティスが含まれます。

  Best Practicesの具体的な評価項目

  1. HTTPSの利用:

  ウェブサイトがHTTPSを使用しているかどうかを確認します。HTTPSは、データを暗号化し、ユーザーのプライバシーを保護します 。

  1. JavaScriptのエラーハンドリング:

     JavaScriptのエラーハンドリングが適切に行われているかをチェックします。未処理のエラーがあると、ユーザー体験に悪影響を与える可能性があります 。

  2. セキュリティヘッダーの実装:

     Content Security Policy（CSP）、X-Content-Type-Options、X-Frame-Optionsなどのセキュリティヘッダーが適切に設定されているかを評価します 。

  3. 廃止予定のAPIの使用回避:

     廃止予定のAPIや推奨されないAPIの使用を避けているかを確認します。これにより、将来のブラウザ更新による予期しない問題を防ぎます 。

  4. オープンリダイレクトの防止:

     リダイレクト先のURLが安全で、信頼できるものであるかをチェックします。オープンリダイレクトはフィッシング攻撃に悪用される可能性があります 。

  5. 入力検証:

     ユーザーからの入力が適切に検証されているかを確認します。これにより、XSS（クロスサイトスクリプティング）やSQLインジェクションなどの攻撃を防止します 。

  6. 画像の最適化:

     画像が適切なフォーマットで提供されているか、サイズが最適化されているかをチェックします。これにより、ページの読み込み速度が向上します 。

---

• SEO

  ウェブページの検索エンジン最適化（SEO）に関する評価を行います。これにより、検索エンジンでのランク向上とユーザー発見のしやすさを支援します。具体的には、以下のような評価項目があります。

  SEOの具体的な評価項目

  1. ページタイトル:

     各ページに一意でわかりやすいタイトルが設定されているかを確認します。タイトルは検索結果で表示されるため、クリック率（CTR）に影響を与えます。

  2. メタデスクリプション:

     ページごとに適切なメタデスクリプションが設定されているかを評価します。メタデスクリプションは検索結果のスニペットとして表示され、クリック率に影響します。

  3. HTTPステータスコード:

     正しいHTTPステータスコードが返されているかを確認します。例えば、404エラーや500エラーはユーザー体験とSEOに悪影響を与えます。

  4. モバイルフレンドリー:

     ページがモバイルデバイスで適切に表示されるかをチェックします。モバイルフレンドリーなデザインはGoogleのランキング要因です。

  5. インデックス可能なコンテンツ:

     重要なコンテンツが検索エンジンによってインデックス可能であるかを確認します。例えば、JavaScriptで動的に生成されたコンテンツが正しくインデックスされるようにします。

  6. 画像のalt属性:

     すべての画像に適切なalt属性が設定されているかを評価します。alt属性は、視覚障害者向けのスクリーンリーダーにも利用され、画像検索のSEOにも寄与します。

  7. リンクの評価:

     ページ内のリンクが壊れていないか、適切に機能しているかを確認します。壊れたリンクはユーザー体験とSEOに悪影響を与えます。

  8. テキストのアクセシビリティ:

     ページ内のテキストが読みやすく、適切なフォントサイズとコントラストで表示されているかを評価します。