前提となる書籍

• JavaScript 第7版

  David Flanagan

  JavaScript 第7版

  JavaScript: The Definitive Guide

  David Flanagan

  上級
  推奨前提

  理由: 言語仕様を深く参照できるようになったら、ブラウザという実行環境の特性を踏まえた最適化へ進む。本書はクリティカルレンダリングパスやメモリ・計測の観点を与え、言語の知識をブラウザ上の体感性能へ結びつける。

  出典

  • Web Vitals - web.dev

• ステップアップJavaScript

  サークルアラウンド株式会社, 佐藤正志, 小笠原寛

  ステップアップJavaScript

  フロントエンド開発の初級から中級へ進むために

  サークルアラウンド株式会社, 佐藤正志, 小笠原寛

  中級
  参考

  理由: JavaScript の挙動を一段深く理解したら、その知識を「速さ」という観点で活かす段階へ進む。Webフロントエンド ハイパフォーマンス チューニングはレンダリング・リソース読み込み・計測の勘所を与え、体感速度を左右する実装判断を可能にする。

  出典

  • Web Vitals - web.dev

• Webを支える技術

  山本陽平

  Webを支える技術

  HTTP、URI、HTML、そしてREST

  山本陽平

  中級
  参考

  理由: Web の基盤技術を理解したら、その理解を速度改善という実利に変える。HTTP のキャッシュやリソース読み込みの仕組みを知っていれば、Webフロントエンド ハイパフォーマンス チューニングが説く最適化の「なぜ効くか」が腑に落ちる。

  出典

  • Web Vitals - web.dev

• Tailwind CSS実践入門

  工藤智祥

  Tailwind CSS実践入門

  工藤智祥

  中級
  参考

  理由: スタイルの設計を整えたら、その CSS や描画がページ速度に与える影響まで視野に入れる。Webフロントエンド ハイパフォーマンス チューニングは未使用 CSS の削減やレイアウト計算のコストといった、見た目と速さの両立に必要な視点を与える。

  出典

  • Web Vitals - web.dev

• Fluent React

  Tejas Kumar

  Fluent React

  Build Fast, Performant, and Intuitive Web Applications

  Tejas Kumar

  上級
  参考

  理由: React の内部動作を理解すると、再レンダリングや差分計算がどこでコストになるかが見える。Webフロントエンド ハイパフォーマンス チューニングはブラウザ全体の計測と最適化を与え、フレームワーク内部の知識を実測ベースの改善へ橋渡しする。

  出典

  • Web Vitals - web.dev