WebサイトのPerformance Budgetとは
UI開発者 郡司Performance Budgetについて紹介します。まずはじめにBudgetとは日本語で訳すと「予算」という意味です。そして、予算とはある目標値の達成に向けて費やすことのできる最大割り当て量を示すものです。Performance Budgetを要約すると、Webサイトのページ上で使用できるリソースのサイズ、ファイル数、表示時間などを数値で定義することを示します。
本記事を書くにあたって「Performance Budget」と検索しても日本語圏の記事はあまりなく、まだ馴染みのない言葉かと思いました。そこで、今回参考にさせていただいたページも掲載していますのであわせて読んでいただけると理解が深まるかと思います。
何のために作るのか、そして誰が使用するのか
モバイルサイトでは3秒以上表示に時間がかかると53％の人が離脱する調査結果があります。しかし、この速度を構築時、そして運用を開始してからも目指していくためには、画像やサーバー、システムなどの影響により、フロントエンド開発の段階では遅く、難しい速度数値であると言えます。
そこで、Performance Budgetを作成することでプロジェクト開始時からパフォーマンスについての会話の出発点をつくり、情報設計、デザインと同様に早い段階でパフォーマンスについて一緒に考えていくことが可能になります。
例えば、カルーセルをページに掲載することが予算を上回る場合は、それが重要かどうか、サイズを減らす方法があるのか、それを含むためにページの他の部分を削除するべきかを決めるなど、Performance Budgetを早期に設定すると、プロジェクトの後戻りを防ぐことができます。
Performance Budgetは先にも記載したとおりフロントエンドエンジニアが一人で背負うものではありません。プロジェクトメンバー全員が関わるものです。作成した予算を超過したページがある場合は、情報設計を見直したりデザインを練り直す必要があるからです。
どうやって予算を決定し、作成するか
パフォーマンスに絶対的な数値はなく、相対的な数値になります。調査・テストの後、オリジナルの予算を作成していくことになります。
パフォーマンス向上を考える際に以下のWebサイト閲覧者起因の要因などは根気よく調査していく必要があります。
- Webサイト閲覧者が利用しているインターネット回線
- Webサイト閲覧者の端末
よって、以下の項目などを予算として考えていく方法が作りやすいでしょう。
- Webサイトにアップロードする画像の最大サイズ
- 1ページあたりに許可されたHTTPリクエストの総数
- JavaScript、CSS、Webフォントなどのサイズ
- 合計ロード時間
- 外部リソースの数
調査するにあたっては既存のWebサイトのリニューアルの場合、既存のコンテンツから予算を作成することが可能となります。また、20％以上の時間差がある場合、人はより速く、またはより遅く感じるという調査もありますので、既存のWebサイトから20％パフォーマンスを向上するための予算を設定する方法もあります。
もうひとつの方法は競合他社のWebサイトです。お客様への付加価値としてアピールする際には効果が発揮されるでしょう。また、競合他社にも同様の種類のコンテンツがあるはずなので、多くのページを調べる必要が出てきます。
そして、見積もりを超過せず維持していくためには、Webサイトにどのようなコンテンツが含まれ、どのようにページが構成されているかを理解し、コンテンツ、デザインごとに対してPerformance Budgetを設定する必要があります。
これらの計測、監視する方法としては、以前ご紹介した「sitespeed.ioを使用した継続的なパフォーマンス測定」があげられます。
概算にはなりますが、PERFORMANCE BUDGET CALCULATORを使用してモバイルの3G(1.6 Mbps)回線で2秒以内に表示することを目標とした場合のデフォルトの予算は以下になります。
| HTML | CSS | JavaScript | Images | Video | Fonts |
|---|---|---|---|---|---|
| 10KB | 13KB | 66KB | 252KB | 39KB | 20KB |
こちらを元に計測したデータとつき合わせてオリジナルの予算を作成する活用法もあります。
まとめ
Performance Budgetを使用することで、Webサイト上で何をすべきか、または何をすべきではないかを把握するための参考になり、Webサイトの目標を設定して機能やユーザーエクスペリエンスを損なうことなく、パフォーマンスのバランスを保つことができるようになります。
以下は、Performance Budgetを調べるにあたって参考になったページのピックアップになります。（投稿日が新しい順）