エンジニアのみなさま、日々の学習本当にお疲れ様です！
また本記事まで足を運んでいただき本当に感謝です。
約2分程度で読めるので最後まで読んでもらえると幸いです。
タイトルに対する結論
Chrome DevToolsの項目にある 「Lighthouse」 を活用しましょう。
Lighthouseとは
ウェブページの品質向上に役立つよう開発されたオープンソースの自動化ツールです。任意のウェブページ、公開ページ、認証要求ページに対して実行できます。パフォーマンス、ユーザー補助、プログレッシブ ウェブアプリ、SEO などの監査を実施しています。
デジタル庁のサイトを使って確認してみる
テキストだとイメージしづらいため、早速サイトを見ながら確認してみましょう。
確認手順
1. 対象サイトを開いた状態で「Chrome DevTools」を開く
command + option + I
Ctrl + Shift + I
画面上に「Chrome DevTools」が表示されます
2. 「Lighthouse」をクリックする
画面上部にタブがあります。「>>」をクリックすると表示されます。
3. [ページ読み込みを分析] をクリックする
デフォルトでは「モバイル」が選択されている状態ですが、今回は「デスクトップ」を選択してみましょう。
そうすると対象サイトのパフォーマンスが数値化されます。簡単！
以下の5つの指標からパフォーマンスの数値結果を算出しているみたいです。
指標① ： First Contentful Paint（FCP）
重量：10%
First Contentful Paint（FCP）は、ユーザーが最初にページ移動してから、ページのコンテンツの一部が画面に表示されるまでの時間を測定します。この指標の「コンテンツ」とは、テキスト、画像（背景画像を含む）、svg要素、白以外の canvas要素のことです。
指標② ： Largest Contentful Paint（LCP）
重量：25%
LCP はビューポート内の最大のコンテンツ要素が画面にレンダリングされるタイミングを測定します。これは、ページのメインコンテンツがユーザーに表示されるおおよそのタイミングです。
指標③ ： Total Blocking Time
重量：30%
TBT は、ページがユーザー入力（マウスクリック、画面のタップ、キーボードの押下など）に応答できない状態の合計時間を測定します。合計は、First Contentful Paint と操作可能になるまでの時間の間のすべての長いタスクのブロック部分を加算して計算されます。実行時間が50ミリ秒を超えるタスクは長時間のタスクです。50ミリ秒後の時間がブロッキング部分です。たとえば、Lighthouseで70ミリ秒のタスクが検出された場合、ブロッキング部分は20ミリ秒になります。
指標④ ： Cumulative Layout Shift（CLS）
重量：25%
CLSは、ページのライフサイクル全体を通じて発生する予期しないレイアウトシフトごとに、レイアウトシフトスコアのバーストの最大値を測定します。
指標⑤ ： Speed Index
重量：10%
Speed Index は、ページの読み込み中にコンテンツが視覚的に表示される速度を測定します。Lighthouse では、まずブラウザでページが読み込まれている動画をキャプチャし、フレーム間の視覚的な進行状況を計算します。
さいごに
フロントのパフォーマンスに関連する内容は、以下サイトに詳細が記載されています。
mdn web docsは神サイト！
おまけ
また1つ勉強させていただきました。ありがとうございました。
そして唐突ですが弊社のご紹介もさせてください。
▼ コーポレートサイト
▼ Wantedly求人
弊社メンバーは学習した内容を日々Qiitaの記事にアウトプットしております。
弊社にご興味のある方、まずは求人を見てみてください！
ご応募お待ちしておりますー！