「マニアック」といってもいいくらい細かい
――『Webサイトパフォーマンス実践入門 高速なWebページを作りたいあなたに』は『Web Performance in Action』（Jeremy Wagner、Manning Publications、2017年）の翻訳で、手がけられたお一人が武舎さんです。今回は本書のポイントや読みどころについてうかがいます。最初に、本書の概要を教えてください。
武舎：本書はWebページの表示速度を早くする（最適化する）ためにフロントエンド側でできることを、さまざまな角度から追求している本です。HTML、CSS、JavaScriptのファイルの書き方や、画像の形式等を工夫して、できるだけページを速く表示できるようにします。大きな特徴は、GitHubに公開されているコードをローカル環境で動かして、実際に手を動かして試しながら学べるところです。
――読んでみていかがでしたか？
武舎：そもそもフロントエンドの最適化について知ったのは約10年前に『ハイパフォーマンスWebサイト』（スティーブ・サウダーズ著、オライリー・ジャパン、2008年）という本を訳したときです。
同書では約10個の比較的単純なルールで解説されていたのですが、例えばJavaScriptのファイルの読み込みを指定する<script>タグの位置を変えるだけで、携帯用ページの表示にかかる時間が半分以下になったのにはビックリしました。
スマートフォンが登場する前のことですから、Webの世界では「大昔」のことですね。その後、サイトのモバイル対応など最低限の知識は身につけてきたのですが、そろそろ最新の情報をしっかり学び直したいと思っていたところに今回の翻訳のお話をいただいたので、とてもよいタイミングでした。
読んでみて、「CHAPTER 1 Webパフォーマンス概説」と「CHAPTER 2 パフォーマンス評価ツールの利用」だけでも訳す価値がありそうだと感じて、「面白そうですから、翻訳させてください」とお返事しました。CHAPTER 1と2にはすぐにできそうな最適化の手法や改善点の見つけ方などがコンパクトにまとまっています。
CHAPTER 3以降の内容にはかなり細かい情報が詰まっています。CSS、画像、フォント、JavaScriptなどの最適化（どうすれば高速にページを表示できるようになるか）について、「マニアック」といってもいいくらい細かいところまで検討されています。本書は著者・ワグナーさんの初めての本だそうですが、訳しながら試してみると、実に丁寧に時間をかけて書いたことが伝わってくる内容でした。
表示の速さはサイトの成否を分ける大きな要因
――本書が日本語で発売となるところどんな意義を感じていらっしゃいますか？
武舎：英語力がある人でも、英語の本を読んで母国語で書かれたのと同じだけの情報を得るには、何倍もの時間がかかります。翻訳者が検証しながら解釈し、日本語で表現された内容を読むほうがはるかに理解が早いでしょう。
また、この本は日本語で書かれた類書に比べて、カバーする範囲がかなり広いと思います。パフォーマンスに関する全体像と詳細を、デザイナーなども含め多くのWeb関係者に理解していただけるのではないかと思います。
こうした本が必要な背景には、著者が「CHAPTER 1 Webパフォーマンス概説」でも書いているように、Webページの表示に時間がかかってしまえばほかのサイトに行ってしまうユーザーが増えてしまうという現実があります。例えば、ページの表示に3秒以上かかると、40パーセントのユーザーはほかのサイトに移動してしまうとのことです。
そのため表示が速ければ、サイトのコンテンツのより多くの部分をより多くのユーザーが目にすることになり、商品の購入や広告のクリックなどサイトオーナーが望む行動をユーザーに取ってもらえる可能性が高くなります。表示が速いか遅いかは、サイトの成否を分ける大きな要因です。
――では、本書のポイントはどこにあるのでしょうか。
武舎：本書ではWebのパフォーマンスに関係する概念をきちんと説明してくれています。どのような要素がパフォーマンスに関連するのか、それをどう計測すればよいのか、そしてどうすれば改善できるのか。自分のサイトを高速にするテクニックはもちろんですが、その背景にある考え方も学ぶことができるのがポイントです。
具体的にどうしたらよいのかよく分からない人に最適
――本書はどういう課題を抱えている人が読むといいのでしょうか。
武舎：「Webサイトは高速に表示されるほうがよい」というのは承知しているけれど、具体的にどうしたらよいのかよく分からない人に最適の本でしょう。JavaScriptの細かい事柄について書かれた2つの章はプログラミングの知識がないときちんと理解するのは難しいでしょうが、その他の章はHTMLとCSSの知識がある方なら十分に読みこなせると思います。
――それぞれの章でどんなことが解説されているのか、簡単に紹介していただけますか？
武舎：そうですね、まずは「CHAPTER 1 Webパフォーマンス概説」と「CHAPTER 2 パフォーマンス評価ツールの利用」で概要を理解していただいてから、具体的な課題があるようでしたら、その課題に直接関連する章を読まれるとよいでしょう。
皆さんに読んでいただきたいのは、画像に関する「CHAPTER 5 画像のレスポンシブ対応」と「CHAPTER 6 さまざまな画像最適化手法」です。画像はデータ量が大きいので、データ転送量の削減効果も大ですから、押さえておいて損はありません。
CSSについては「CHAPTER 3 CSSの最適化」と「CHAPTER 4 クリティカルCSS」で論じていますし、フォントについても「CHAPTER 7 フォントの最適化」で詳しく解説してくれています。
「CHAPTER 8 JavaScriptの最適化」と「CHAPTER 9 サービスワーカーによるパフォーマンス向上」、それに「APPENDIX B よく使われるjQueryの機能と同等のJavaScriptネイティブの機能」はJavaScriptに関する内容です。特にCHAPTER 8ではJavaScriptをjQueryなどのライブラリを用いずに素のままで利用する方法が検討されています。また、APPENDIX BではjQueryの主な関数に対応する機能を素のJavaScriptでどのように代替できるか具体的な方法を紹介してくれています。
「CHAPTER 10 アセット配信のチューニング」ではサーバ側の圧縮やCDNの利用など、「CHAPTER 11 HTTP/2の利用」ではHTTP/2への対応について解説されています。
「CHAPTER 12 gulpを使った自動化」は最適化処理を自動で行うことのできる「タスクランナー」に関する章です。この内容を理解すると日々の作業がかなり楽になると思いますので、この章も必読でしょう。
自分でいろいろと試してみる姿勢を身につける
――では最後に、本書で学ぶ際、また実践する際のアドバイスをいただけますか？
武舎：Web関連の技術はどんどん変化するので、本書に書かれた具体的な技術だけを身につけても、何年か経つと使えなくなってしまうものも多いでしょう。しかし本書で紹介されている「姿勢」ですね、いろいろなケースを考えて、いろいろなツールを駆使して計測し、自分でいろいろと試してみる姿勢を身につければ、具体的なテクニックは変わっても、自分で方法を見つけ出していけるようになると思います。
著者の最適化に対する態度や姿勢を参考に、自分が何をどこまで、どうやるかを判断して、必要な最適化処理を行のがいいですね。
また、後半の内容はかなり濃いので、手を動かしながらじっくりと取り組んでいただけたらと思います。「これでもか、これでもか」と畳みかけるようにいろいろな知識を披露してくれていますので、それを味わってみてください。そうすると、「ここまでやるのか、スゴイ」と感じていただけるのではないかと思います。
