読了してから少し経つのだけど、数日間の通勤時間で一気に読んでしまうほどの面白かった（良書）ので紹介。
内容的にはWebサイトのパフォーマンス向上のためのデザイン設計だけでなく、その測定方法や現存するサイトの改善手法なども載っている。実際の現場では、いちから作ることばかりでないからより現実に沿っているな、と。
公式サイトはこちら。
目次
1章 サイトパフォーマンスはユーザエクスペリエンス
そもそも本書で取り上げるサイトパフォーマンスとはどういうもので、それがどういった影響を及ぼすのか。
ブランド（サイトそのもののことでもある）に与える影響として、パフォーマンスの悪いサイトにユーザが再訪問するのか？そもそも検索エンジンの掲載順位はどうなってしまうのか？という直接的な部分。
そして、昨今の主流デバイスであるモバイルへの影響。ネットワークの帯域であったり、モバイルゆえの利用形態について、さらに、デザイナーが生み出すグラフィカルなリッチコンテンツによる影響も。
2章 表示速度の基礎
なんとなくは理解していてもこれについてまとめられている本はあまり見たことがなかったです。
ユーザがブラウザからリクエストを飛ばして、コネクションを張ってサーバが応答、といったコンテンツが表示されるまでの流れを解説したうえで、レスポンスとしてのページ容量とユーザの体感速度にも言及。
3章 画像の最適化
パフォーマンス改善のメソッド中で、最も手を付けやすく、かつ最も効果の出やすい「画像の最適化」について一章割いています。
まずは画像形式とそれぞれの圧縮についての説明。
- JPEG
- GIF
- PNG
そして、画像をいかに使わずに（減らして）サイトを構築するか。
- スプライト（Sprite）
- CSS3
- データURIとBase64エンコード
- SVG
4章 マークアップ言語とスタイルの最適化
画像以外にもHTMLやCSSにも改善の余地はある、ということで、まずHTMLのクリーンアップ方法について解説。例えば、不要なdivタグの排除や、セマンティックな構成を心がける、といったところ。
CSSについては、未使用のスタイルの削除に始まり、重複スタイルを結合したり、縮小したり、また、そこから呼ばれる画像のクリーンアップなどなど。他にもWebフォント最適化やgzip、ファイルキャッシュについても言及しています。
5章 レスポンシブWebデザイン
この章では近年流行しているレスポンシブWebデザインにおけるパフォーマンス向上について触れています。
特にPCとSP（モバイル）とでリソースを計画的に読み込むにはどうすればいいのか。そして、それを実現するためのアプローチとして、プロジェクト仕様書の策定やモバイル・ファーストについても取り上げています。
6章 パフォーマンスモニタリングの継続的な実施
5章の最後に「すべてを測定する」という見出しがありますが、6章ではそれの具体的な方法（ツール）を紹介しています。
- YSlow
- Chrome DevTools
これらは既に知っている方も多いだろう、というくらいの有名なツールだけど、本書で特に多く出てくるのはWebPageTestというツールです。僕は知らなかったですが、これは便利です。
7章 外観とパフォーマンスの両面を考慮するには
そろそろまとめの章、といった具合です。
これまで紹介してきた概要や手法、ツールを使った改善をするにあたり、表示速度というパフォーマンスだけでなく、外観の良さというパフォーマンスを保ちながら表示速度を改善するにはどうすればいいのか。理想的すぎるかな、とも思える反面、至極納得できます。
8章 組織の風土を変えていく
前章を踏まえて、また、これまでの説明を実行するにあたり、組織の風土が邪魔をするようなら、といったちょっとおもしろい章です。
見出しとしては以下のような感じ。
- 8.1 「パフォーマンス警察」と「パフォーマンス管理人」
- 8.2 上層部を説得する方法
- 8.2.1 ビジネスの成果指標に与えるインパクト
- 8.2.2 サイトの速度を体感してもらう
- 8.3 デザイナーや開発者との連携
- 8.3.1 スタッフの教育
- 8.3.2 意思決定力を育成する
付録
本書の最後には付録として二つのコンテンツがあります。
- HTTP/2の概要とWebパフォーマンスデザインの最適化
- 外部タグとサイトパフォーマンス 〜3rd Party Tagとの付き合い方〜
いずれも昨今のWebサイトには欠かせないお話です。特にHTTP2についてはこれまでGood Methodとされてきたパフォーマンス改善の手法が通じなかったり、など、目からウロコな内容と感じました。
計測タグにまつわるパフォーマンスは開発者は悩みがち（タグばかり増える！）ですが、これをどのようにマネジメントし、導入していくか。なかなか興味深いコンテンツです。
感想
実践するにはハードルの高い部分もあるにはあるけど、知識として知っておくに越したことはない内容ばかりでした。画像の最適化はモバイル・ファーストが主流となる時代では必須だし、そもそも継続して測定していくことも。
いずれにしても、「パフォーマンス警察」「パフォーマンス管理人」にだけ、パフォーマンス向上のための施策を委ねるのではなく、サイトに関わる人々すべてで取り組む必要のある課題であることは明白です。
[amazonjs asin="4873117550" locale="JP" title="パフォーマンス向上のためのデザイン設計"]
