More than 3 years have passed since last update.

個人的に参考にしているフロントエンドのパフォーマンスに関するリソースまとめ

Last updated at 2022-03-12Posted at 2022-03-11

概要

フロントエンドのパフォーマンスに関して個人的に参考にさせて頂いているリソースをまとめました。

２冊とも素晴らしい本でした。
なぜフロントエンドのパフォーマンスが重要なのかから始まり、ブラウザの挙動、計測手段、実際のチューニングの方法まで包括的に説明してくださっています。
どちらかの本を読むだけでも、十分なパフォーマンスのチューニングを行えるのではないかと個人的に思いました。

フロントエンドのパフォーマンスのチューニングを行う上でブラウザの挙動を理解するのは非常に重要だと考えています。
下記の記事はモダンなブラウザの挙動を非常にわかり易く説明してくれています。

WebvitalsはGoogleが提唱するWebサイトの品質を図る様な基準です。

Web Vitals は、Web 上での優れたユーザーエクスペリエンスの提供に欠かすことのできない品質シグナルに関する統一的なガイダンスの提供を目的とした、Google によるイニシアチブです。
Google Webvitals

Googleが提唱しているので本家Googleが包括的かつ、詳細までカバーした親切なドキュメントを多数提供してくれています。
下記のリンクから行けば全てのWebvitalsに関しての情報に辿り着けるはずです。

使用しているModule Bundlerに応じて下記の様なBundle Analyzerを使用する事でバンドルサイズを確認する事ができます。

ライブラリ選定の際にバンドルサイズを測るのに使用するのがBundlePhobiaです。

株式会社サイバーエージェントや株式会社リクルートがハッカソン形式でフロントエンドのパフォーマンスチューニングを競う場を提供してくれています。

特に下記の様な解説記事を記載してくださっており、実際に開発している際に盛り込める具体的なテクニック等が詰め込まれており個人的にとても参考になりました。

個人的にフロントのフレームワークでReactを使用する事が多いので諸々溜まっていきました。