こんにちは。LAPRAS株式会社 CTOの @rocky です。

2024年12月2日に【mizchiさんによる 「LAPRAS 公開パフォーマンスチューニング 」調査編】というイベントの開催を予定しているのですが、この時間をより良いものとするため、フロントエンドパフォーマンス改善に関する前提知識をインプットする勉強会を社内で行いました。

入門的な内容であり、社内勉強会の雰囲気そのままではあるものの、イベントに参加される方にとってお役に立てることもあるかもしれないと思い、勉強会の内容を動画/資料/メモという形で共有します。

勉強会のゴールと形式

学習の取っ掛かりを得ることをゴールとして、Webフロントエンドのパフォーマンス指標、ブウラザによるレンダリングの流れ、その他頻出ワードについて、先人による解説記事を参照しながら @KawamataRyo さんに概要を解説して頂きました。

動画

資料

勉強会資料(FigJam)

メモ(解説記事一覧)

勉強会中に参照した解説記事の一覧を共有します。

• フロントエンドのパフォーマンス指標
  • Core Web Vitals
    • LCP
      • https://web.dev/articles/lcp?hl=ja
    • CLS
      • https://web.dev/articles/cls?hl=ja
    • INP
      • https://web.dev/articles/inp?hl=ja
  • Lighthouseスコア
    • LCP
      • https://web.dev/articles/lcp?hl=ja
    • CLS
      • https://web.dev/articles/cls?hl=ja
    • FCP
      • https://web.dev/articles/fcp?hl=ja
    • TBT
      • https://web.dev/articles/tbt?hl=ja
  • Speed Index
    • 速度インデックス | Lighthouse | Chrome for Developers

    • Speed Indexとは何か?| PerfData

      Render StartとDocument Completeだけでは、実際のUX(顧客体験)を定量的に計測するのが難しいです。そこで考え出されたのが、Speed Indexです。

      perfdata.jp

      

    • Speed index (スピードインデックス) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

      スピードインデックス (SI) は、ページのコンテンツがどれだけ早く目に見える形で表示されているかを示すページ読み込み性能の指標です。これは、ページの可視部分が表示されるまでの平均時間です。ミリ秒単位で表示され、ビューポートのサイズに依存し、スコアが小さいほど良いことを表します。

      developer.mozilla.org

      

  • ブウラザがページをレンダリングするまで

    • Browser

      2024年度リクルート エンジニアコース新人研修の講義資料です

      speakerdeck.com

      

    • https://web.dev/articles/howbrowserswork?hl=ja

    • ページの生成: ブラウザーの動作の仕組み - ウェブパフォーマンス | MDN

      ユーザーは、読み込みが速く、スムーズに操作できるコンテンツを、ウェブで体験することを求めています。したがって、開発者はこれらふたつの目標を達成するために努力しなければいけません。

      developer.mozilla.org

      

• その他頻出(かも)ワード
  • メインスレッド

    • Main thread (メインスレッド) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

      メインスレッドは、ブラウザーがユーザーのイベントや描画を処理するところです。既定では、ブラウザーは単一のスレッドを使用してページ内のすべての JavaScript を、レイアウト、再フロー、ガベージコレクションなどと同様に実行します。つまり、実行に時間がかかる JavaScript 関数がスレッドをブロックし、ページが反応しなくなり、使い勝手が悪くなります。

      developer.mozilla.org

      

  • Service Worker

    • サービスワーカー API - Web API | MDN

      サービスワーカーは、基本的にウェブアプリケーション、ブラウザー、そして（もし繋がっていれば）ネットワークの間に介在するプロキシサーバーのように振る舞います。これは、よりよいオフラインの操作性を可能にするように意図されており、ネットワークのリクエストに介在してネットワークの使用可否の状況に基づいて適切な対応を取ったり、サーバー上にある資産を更新したりします。また、プッシュ通知やバックグラウンド同期の API 群へのアクセスもできるようになります。

      developer.mozilla.org

      

  • Web Worker

    • ウェブワーカーの使用 - Web API | MDN

      ウェブワーカーは、ウェブコンテンツがスクリプトをバックグラウンドのスレッドで実行するためのシンプルな手段です。ワーカースレッドは、ユーザーインターフェイスを妨げることなくタスクを実行できます。さらに、fetch() や XMLHttpRequest など API を用いて、ネットワークリクエストを行うことができます。ワーカーが生成されると、それを作成した JavaScript コードが指定するイベントハンドラーにメッセージを投稿することで、そのコードにメッセージを送ることができます（逆も同様）。

      developer.mozilla.org

      

    • GitHub - QwikDev/partytown: Relocate resource intensive third-party scripts off of the main thread and into a web worker. 🎉

      Relocate resource intensive third-party scripts off of the main thread and into a web worker. 🎉 - QwikDev/partytown

      github.com

      

  • クリティカルレンダリングパス

    • クリティカル パスの把握  |  web.dev

      クリティカル レンダリング パスはウェブ パフォーマンスのコンセプトで、ページの初期レンダリングがブラウザに表示されるまでの時間を表します。このモジュールでは、クリティカル レンダリング パスの背後にある理論を紹介し、レンダリング ブロック リソースやパーサー ブロック リソースなどの概念と、それらがブラウザでのページの表示速度に重要な役割を果たす仕組みについて説明します。

      web.dev

      

  • Server Timing

    • Server-Timing ヘッダの情報をフロントエンド解析に使う

      undefined

      zenn.dev

      

    • Server-Timing - HTTP | MDN

      Server-Timing ヘッダーは、指定されたリクエスト－レスポンスのサイクルについての 1 つ以上のメトリックと説明を通信します。ユーザーのブラウザーの開発ツール内や、 PerformanceServerTiming インターフェイス内で、任意のバックエンドサーバーのタイミングメトリック (データベースの読み書き、 CPU 時間、ファイルシステムアクセス、など) を表面化させるために使用します。

      developer.mozilla.org

      

  • Scriptのdeferとasync
    • スクリプト要素 - HTML: ハイパーテキストマークアップ言語 | MDN
    • javascript - Script Tag - async & defer - Stack Overflow
  • preload属性
    • 投機的読み込み - ウェブパフォーマンス | MDN

終わりに

勉強会を通じて、パフォーマンスチューニングに関する学習をチームで進める足がかりを得られたと感じています。
イベントにてエアプ勢にならないようもう一度インプットしておくことはもちろん、これをきっかけに体験向上に取り組み、パフォーマンス周りでもユーザさんに胸を張れるよう、改善を進めていく所存です。
ご期待ください!!!