フロントエンドのパフォーマンス

この章では、フロントエンドのパフォーマンスの最適化パターンについて見ていきたいと思います。フロントエンドのパフォーマンスで考慮する点は、リソースの読み込み、JavaScriptの最適化、レンダリング、ユーザー体験などがあります。リソースの読み込みでは、必要なときに必要なものだけを配信することで、ページの読み込みスピードを上げることができます。また、JavaScriptの最適化をすることで、ブラウザーへの負荷を抑えて、レンダリングのパフォーマンスを向上させることができます。

フロントエンドのパフォーマンスの観点として、初回のページ読み込みとJavaScriptの実行パフォーマンスが挙げられます。初回のページ読み込みは、上述したリソースの最適化や、minifyによる圧縮、CDNの活用などで対応することができます。JavaScriptの実行パフォーマンスは、JavaScriptファイルの最適化、Code Splittingによる遅延実行などの施策が有効的になります。また、実際の処理時間が変わらなくてもUIの工夫で速く見せることは可能です。そのようなUXの観点でもパフォーマンスの最適化は重要となります。

いずれの施策においても、まずはパフォーマンス指標を理解し、現状把握のための測定をすることが先決です。そして、現状把握ができれば、取るべき施策も分かってきます。

はじめに、パフォーマンス指標の概要を理解し、それからリソースの最適化、JavaScriptファイルの最適化、UX、CDNのパフォーマンスパターンを見ていきたいと思います。