概要
パフォーマンスとは、Webアプリケーションが限られたシステムリソースで、効率よく機能しているかを示すものです。Webアプリケーションのパフォーマンスは、ユーザーの操作に対する応答速度で測られます。パフォーマンスが良ければページの表示やボタンの反応に時間がかからず、優れたユーザ体験を提供することが可能です。
パフォーマンス低下の原因は、処理するデータ量の増加やそれに伴う空きメモリの不足、効率の悪い計算処理などさまざまです。これらを解決するには、まずは現状を 正しく知るための計測が必要です。計測方法には、開発者ツールのネットワーク監視やその他診断ツールを使う方法、プログラムに計測用コードを埋め込む方法などがあります。
特定のページや機能の応答時間が遅かった場合、プログラムのどこかに主な原因が存在していると考えられます。この様なパフォーマンス低下に関わる箇所や原因をボトルネックといいます。パフォーマンスを改善するには、このボトルネックを突き止めて、適切に解決する必要があります。
学ぶ目的
Webアプリケーションのパフォーマンスを正しく把握して、必要に応じて改善していくことは、ユーザーに快適な環境を提供するために必要なことです。
Webアプリケーションを公開した直後はパフォーマンスに問題が無かったとしても、ユーザー数の増加や機能追加などにより徐々にパフォーマンスは低下するものです。問題をいち早く見つけるには、パフォーマンスの目標値を定めて常に計測しておくことが必要です。
また、見つかった問題の難易度が高く、すぐには改善できない場合もあります。しかし、問題が積み重なると、ボトルネックの特定が難しくなるので、改善しないまでも調査については随時行うことが望まれます。
まずは、パフォーマンスの計測方法と主な改善の方法を学びましょう。
ここから学ぼう
ここでは、Webページのパフォーマンス改善について学んでいきます。まずは、パフォーマンスの計測やチューニングを体験してイメージを掴みましょう。計測方法は、Chromeの開発者ツールを使うのがオススメです。記事やブログで使い方について調べてみましょう。
Webページのパフォーマンスを改善しよう
開発者ツールでWebページのパフォーマンスを計測しよう
リソースを事前読み込みしておこう
CSSスプライトを使用してみよう
HTML/CSS/JavaScript/画像のファイルサイズを最小化してみよう
Gzip圧縮、ブラウザキャッシュを活用にしてみよう
画面レイアウトの変更頻度と再描画に掛かる時間の関係を理解しよう
おすすめ教材
ウェブパフォーマンス - ウェブ開発を学ぶ | MDN
クライアントサイドを中心としたパフォーマンスについて説明されています。日本語に翻訳されている情報は少ないので、英語のページをブラウザの翻訳機能を使って調べてみるといいでしょう。
![ウェブパフォーマンス - ウェブ開発を学ぶ | MDN]()
ウェブパフォーマンス - ウェブ開発を学ぶ | MDN
ウェブサイトを構築するには、HTML、CSS、JavaScript が必要です。人々が使いたいと思うウェブサイトやアプリケーションを構築し、ユーザーを惹きつけ、維持するためには、優れた使い勝手を実現する必要があります。優れた使い勝 手の一部は、コンテンツの読み込みが速く、ユーザーの操作に反応することです。これはウェブパフォーマンスと呼ばれています。このモジュールでは、パフォーマンスの高いウェブサイトを作成するための基礎知識を学びます。
developer.mozilla.org
