Webサイトのエクスペリエンスは組織の風土で決まる – パフォーマンス向上のためのデザイン設計
発売されて半年少々ほど経つ書籍なのですが、年末年始に読む本をまとめ買いした際の一冊、パフォーマンス向上のためのデザイン設計 が結構良い内容だったので感想をまとめておこうと思います。
自分の場合はどちらかと言えばサーバサイドのエンジニア寄りなのですが、Webディレクターを肩書にしてるので「サーバサイドしか分かりません……」と言うわけにもいかず、定期的にデザインに関する書籍は読むようにしています。
普段から情報収集は欠かさないようにしてるつもりですが、デザイン回りの情報ばかりをがっつりと……、というわけではないので、テーマで体系的に情報を得るのに書籍は便利なのですよね。体系があるので文脈を汲み取りやすい、という利点もあります。
大まかな要約
- パフォーマンスとは分野にまたがって多数のスタッフが協同で取り組むことが可能な任務であり、また協同で取り組むべきもの
- デザイナーは、ページ読み込み時間の改善にかかわる唯一の存在であり、それゆえ、上位に位置するユーザエクスペリエンス全体にもかかわる
- Webサイトがよりリッチコンテンツ化し、以前のベストプラクティスを実践するだけでは本当のパフォーマンスサイトを実現することが難しくなってきている
といった点を主題として、第1章では「サイトパフォーマンスはユーザエクスペリエンス」と題して、サイト上のエクスペリエンスとしてのパフォーマンスがユーザのサイトへの
- 信頼度
- 再訪問率
- 他のユーザへの紹介数
を決定づける重要な要素である旨が様々な会社による調査結果を基にして、ブランドに与える影響、昨今アクセス比率が続伸しているモバイルユーザへの影響などが語られています。
第2章では「表示速度の基礎」と題して、バックエンドで行える改善作業も少なくないが、エンドユーザの応答時間の80～90%がフロントエンドで費やされている点を挙げ、(特にデザイナーとして)最適化を目指すべきは
- ページに読み込まれるリソース数
- 画像
- フォント
- HTML
- CSS
- 各リソースのファイルサイズ
- ユーザによるサイトの体感速度
としています。そこを最初に踏まえて、ブラウザがコンテンツを表示するまでの流れを説明しています。その流れの中でユーザの体感速度にかかわる注意すべき点として
- クリティカルレンダリングパス
- ユーザが最初にページを読み込んで実際に表示されるまでの空白(期間)
- ジャンク
- ブラウザが毎秒60フレーム未満の遅さでレンダリングすると発生する現象で、描写中の内容をブラウザがページの変更を塗り替えようとすることが原因で発生するガタツキや描写の途切れなど
- 地理的要因や(ユーザの)ネットワーク環境
- ホストしてるサーバがユーザにとって物理的に遠ければ、それだけ反応速度に影響するのと、物理的な距離以前にネットワーク環境の良し悪しも大きく影響する
- ブラウザ
- ページの表示の仕方の仔細や扱える技術の違いなどが起因してブラウザがユーザの体感速度に影響を及ぼすケースもある
があり、後者2つの外的要因は制作者が制御できる問題ではないものの、最適化に慎重に取り組み、且つ定期的にテストを実施することでユーザエクスペリエンスを作り出す施策として貢献できると伝えてくれます。
第3章からは最適化を目指すべき、
画像
・(Web)フォント
・HTML
・CSS
の最適化方法- レスポンシブWebデザインでうっかりしやすい課題(対象とする画面領域では不要なはずの大きすぎる画像 / CSS / JavaScript など不要なコンテンツ配信)と対処法
- パフォーマンスモニタリングの継続的な実施とその具体例
などの技術的な話が続き、その上で
一方で、サイトの高速化を進めていくには時間と労力がかかります。ユーザエクスペリエンスの高速化以外の領域を改善するために費やしてきた開発時間を失うことになります。
という現実に対してバランスを見つけ出す判断材料と、パフォーマンスを(Webサイト制作の)ワークフローの一部への組込み方が語られています。
本書の要は第8章「組織の風土を変えていく」
パフォーマンス向上のためのデザイン設計 で特筆されるべきは第8章の「組織の風土を変えていく」で、パフォーマンス向上のための技術論に留まらず、
パフォーマンスとは分野にまたがって多数のスタッフが協同で取り組むことが可能な任務であり、また協同で取り組むべきもの
と冒頭で語られる通り、パフォーマンスが生み出すユーザエクスペリエンスを長期的に維持するため、どう組織の風土を変えていくか?に言及されている点でしょう。
この章の冒頭から、サイトの優れたパフォーマンスを作り出し、維持するための最大の障害となるのは、組織(Web制作会社やクライアント企業)の風土
と言い切っています。その風土を作るために、
サイト制作にかかわるすべてのスタッフがパフォーマンスの重要性を認識して、改善のために何ができるか?を知っておくべき
であり、上層部(もしくはクライアント)に対しては、パフォーマンスがビジネスの成果指標に与える影響を調査会社の調査結果で示しつつ、自社サイトの速度を体感してもらうところから始める点、コストや費用対効果についての議論になりやすいのでパフォーマンス向上の重要性だけでは片手落ちで、実施コストの試算資料など説得すべき対象のエンゲージメント指標と業務上の各要素との関連性の理解をつなげてもらうことの重要性が説かれています。
まとめ
パフォーマンス向上のためのデザイン設計 の発売直後にこの書籍について触れられた
によると原著が出版されたのは2014年12月だそうで、そういう点では最新とはいえない情報とは言えるでしょう。前の @t32k さんの記事にも書かれている通り、AMP については言及がありませんが、付録として HTTP/2 に触れられている点は、原著に影響の出ない範囲で最新の情報を提供しようという配慮を感じ取れます(もしかして原著にもある?ｗ)。
主な想定読者層はWebデザイナーに置かれていますが、Webサイトのパフォーマンスという確固たる軸をテーマとして満遍なく触れられているので、Web制作に関わるあらゆる職種の方が「ここは自身が押さえておかないといけない領域」あるいは「この部分については概念として知って置いた方が良いだろう領域」と、それぞれがこの一冊を通して触れられ、且つ書籍としての体系によって、Web制作に関わる異なる職種がパフォーマンスを核とした役割の相関を知る材料として、Web制作に携わる会社に一冊あって良い書籍だと思います。