tech

フロントエンドエンジニアから見た『ハイパフォーマンス ブラウザネットワーキング』

header_image

オライリーさんから発売される「ハイパフォーマンス ブラウザネットワーキング」を頂きました。ありがとうございます。

Ilya Grigorik　著、和田 祐一郎／株式会社プログラミングシステム社　訳
現代のアプリケーションエンジニアは、UIやデータ処理、開発言語、プラットフォームの仕様や癖だけでなく、サーバやネットワークについても、上から下まで、表から裏まで広く知ることを求められます。本書は「ブラウザ」に関連し、インターネットで使用されるさまざまなネットワーク技術をまとめたものです。HTTP/2.0やWebRTCなどの最新技術、WebSocketやXMLHttpRequestなどのブラウザAPI、そしてそれらの土台となるTCPやUDPやトランスポート層についてまでを幅広くカバーします。本書はカバーする技術範囲の広さを「パフォーマンス」という軸に沿って説明します。また改善前後の性能・速さを可能な限り具体化し、それぞれの場面においてのパフォーマンス改善幅を示します。ネットワークのデータリンク層からアプリケーション層、そして過去から近い将来までをまとめた本書は、インターネットにかかわるすべてのエンジニア必携の一冊です。
本書のTwitterハッシュタグは #HPBNjです。

概要に書かれている通り、広範囲のネットワークに関してのナレッジがこの本ではまとめられています。本書の目次を見て、フロントエンドに一番関係していそうだと思った「Webパフォーマンス入門」の章を最初に読んだので、その内容を紹介したいと思います。

Webパフォーマンスの計測

まず「計測できる項目は改善できる項目である」と前置きした上で、計測の必要性と昨今のWebアプリケーションにおいてのパフォーマンス計測の難しさについて書かれていました。

計測の必要性についてはGoogle、Microsoft、Amazonの調査結果からWebパフォーマンス(スピード)がそのまま貨幣価値に直接換算できると触れています。

より速いサイトはより多くのページビューを生み出し、より高いエンゲージメントと高いコンバージョンレートにつながります。

しかし、このWebパフォーマンス(スピード)はベンチマークのスコアだけを鵜呑みにするのではなく、そのWebサイトやWebアプリケーションにとって重要な指標、評価基準を定める必要性があると解説しています。

この計測の指標ですが、複雑化してるWebアプリケーションに対して正しい指標を定めるのは難しいことだと思います。本書ではこの指標を定めるための手助けになる情報が多く書かれています。

フロントエンドの最適化手法の例

本章ではwww.yahoo.comのサイトを例に、ウォーターフォールチャートを分析する方法が解説されています。Yahoo!が最適化に関してどういった方法をとっているか、Yahoo!にとって重要なコンテンツがどれで重要でないコンテンツがどれか、といったことをウォーターフォールチャートから導き出しています。

またフロントエンドの最適化について、以下のように触れています。

先ほどのウォーターフォールチャート分析と最適化プロセスはフロントエンドパフォーマンスの分析・最適化と呼ばれています。しかし、この名称は多くの人がパフォーマンスのボトルネックがクライアント側にあると思わせてしまう、不幸な命名です。

昨今のWebアプリケーションではSPA(Single Page Application)のような、JavaScriptによるアプリケーションの構築が盛んです。最適化としてminifyやconcat、CSSスプライトなどなど、フロントエンドでのチューニングに注目されがちです。

そもそもコンテンツがネットワークでブロックされていると、構文解析や実行は行えません。

本書ではバックエンドの最適化についての重要性に触れるとともに、フロントエンドエンジニアが理解しておくべきネットワークの知識を幅広く提供してくれているように思います。

ブラウザが行なってくれている最適化

Chromeのページ先読み機能が有名だと思いますが、ブラウザ自身が高速化のために最適化などを行なっています。
その方法はブラウザの実装によりますが、この”ブラウザによる最適化”をフロントエンドの実装で手助けできるかもしれないとして

  • 重要なリソースをドキュメント上で早く発見できるように
  • レンダリングとJSの実行をブロックしないように
  • DNSのプリフェッチ
  • リソースの優先プリフェッチ
  • ページのプリレンダリング

などなど「ブラウザの最適化を補助するためにブラウザにヒントを与えてあげることができる」と紹介しています。

紹介されている手法の中にはブラウザの実装に依るものもあり「必ずしも最適化の役に立つとは言えないがヒントを書いても無視されるだけで害はない」と解説しています。
今後ブラウザによる最適化の実装が進めばこれらの手法が当たり前になるかもしれませんので、覚えておくに越したことはないと思います。

他にも

  • Navigation Timing APIを利用したユーザが実際に動かしている環境でのパフォーマンス計測
  • User Timing API と Resouce Timing API
  • 帯域幅とレイテンシの高低差がページロードに与える影響の違い

などが10章では解説されています。この章自体は20Pと多くありませんが、内容の濃さはすごいです。

おわりに

10章だけを読んだだけの段階でも、得られた知見はかなり多いです。フロントエンドに関わる内容はこの章以外にも多くあります。というか全て無関係な内容ではありません。
この章を読んだら他の章の内容にもきっと興味が湧いてくると思います。モバイル環境でのパフォーマンスについても多く触れられています。

ネットワークという、フロントエンドとはちょっとレイヤー違うんじゃないの？と感じられる内容がパッと見では多いですが、フロントエンドエンジニアとしての専門性を高めたいと思っている人には間違いなくオススメの本です。

書評リンク

他の方がまとめられた書評も購入の参考にしてみてください。

他の方も書かれていますが、読書会をやるのに適してそうな本だなと思います。フロントエンド・バックエンドといった役割を越えて共有できる内容が多いです。