急激なサービス成長を支えるパフォーマンスチューニング
――サービスが急成長するなかで、苦労された点などがあれば教えてください。
佐藤：速度の面で言うと「FRESH!」の場合、URLを入力したりリンクをクリックしてから動画が再生され始めるまでの時間を縮めるのが課題でした。動画に関しては、ストリーミングのチューニングといった対策も行っていますが、それ以前のウェブページ自体の表示速度の改善が一番わかりやすい効果が出たように思いますね。
世間的に、ウェブのパフォーマンスって言うと、だいたいページロードのことを指すと思うんですけれども、うちでもそこはやはり基本で。例えば、コメントをツイッターと連携させるといったソーシャルでの拡散を重要視しているのですが、そういうときに画面が出てくるのが遅いと、みんなすぐに戻るボタンを押しちゃうんですよね。なので、ページロードは重要です。
もう一つ挙げると、ちょうど泉水がブログの記事『AbemaTVのランタイムパフォーマンスのAudit』で改善していたところ。コメント欄が出るときの動きの滑らかさだとか、ブラウザの負荷が高まることで肝心の動画がコマ落ちしてしまうとか、というケースです。
佐藤 歩（さとう あゆむ）：株式会社サイバーエージェント メディア統括本部 Webエンジニア／株式会社AbemaTVに出向中。生放送プラットフォームの「FRESH!」のフロントエンド開発を担当。AbemaTVには、リリース直前ごろからオブザーバーとして関与。サイバーエージェントでは、Web Initiative Centerを立ち上げた。
――具体的にどのようにパフォーマンスを改善しているんでしょうか？
泉水：初期ロードの早さに関しては、定常的に計測しながら改善することを目標にしていて、今は「SpeedCurve」というツールを使って、1日3回の計測をグラフ化したものが表示されるようにしています。
佐藤：FRESH!だと、他の動画系サービスも似たような方法で同時に計測を行い、比較してどうかというところも見ています。フィルムストリップ（ページを開いてから実際に画面が表示されるまでの連続したキャプチャ）を見てユーザー体験を推測するだとか、ネットワークで転送されるファイルのトータルサイズや数であったりだとか。
――特に苦労された点は？
泉水：私がブログに書いたような内容は、開発上、初めて実践することでした。さっきも言ったように、コーポレートサイトといった静的なサイトだと、複雑なJavaScriptが組まれていることって少ないと思うんですけども、「AbemaTV」のようにやっていることが複雑なウェブのアプリケーションだと、JavaScriptがパフォーマンスを左右してきます。例えば、コメントを開くときの作りが悪いとユーザー体験に影響が出るような重さも生んでしまうので。その辺の使い心地の改善みたいなのは、苦労というか初の体験ではありました。
佐藤：UIが速い遅いに関して言うと、サーバというより完全にクライアントサイドの問題なんです。「AbemaTV」や「FRESH!」は、Reactなどのさまざまなライブラリを採用していますし、シングルページアプリケーションなどでクライアントサイドの仕事が多くなればなるほど、パフォーマンスが低下してしまうので。
アプリケーションが複雑になるほど、クライアントサイドの調査、チューニングは継続的に行っていく必要があります。作っている自分たちは満足しているんだけども、実は知らないところで、ユーザーにとって遅く使いにくくなっていたということもありえるので。
泉水：我々が開発に使っているのはスペックがよいパソコンばかりなので、普通にユーザーが使うようなスペックでも、ちゃんとパフォーマンスが出て、スムーズにUIが動くように作るよう、心がけています。
泉水 翔吾（せんすい しょうご）：株式会社サイバーエージェント Webエンジニア／Web Initiative Centerの専任フロントエンドエンジニアとして、AbemaTVを始めとするウェブサービスの品質改善に従事。
――同じような課題に直面されている方も多そうですね。情報交換の工夫などはあるのでしょうか。
佐藤：社内的にはチームの独立性が高いので、それぞれがナレッジを溜めるのと、横のつながりで情報交換をする、といった形ですね。
泉水：後は各自のアウトプットですね。
佐藤：うちの場合だとGitHub Enterpriseを導入しているのですが、例えば、最初にReactをプロダクションに入れたのが「FRESH!」だとして、他の追従するサービスがうちもReactを使おうってなると、質問に来るとか、GitHubのリポジトリを見に行くとか、そういうのは自然とありますね。Qiita:Teamのように目に見える形で堆積しているというものではないんですけれども、その組織に所属している各メンバー間のナレッジとしては、ちゃんと共有されて、経験値としては溜まってきているかなっていう。
――パフォーマンスは、セキュリティとかと一緒で後回しにされがちな印象があるのですが、そのあたりはいかがでしょうか。
泉水：まず、パフォーマンスについてエンジニアの目線が向いてないことが一番こういう状況を生んでいる部分かなと思います。自分の場合は、パフォーマンスが好きで以前から興味をもって調べていた分野だったので、こうやってスポットでチームにジョインして、改善ができた部分もあるのかな、と。パフォーマンスの重要性を現場に説くというか、共有しつつ、みんなの目線を上げてくことが第一なのかなと思います。
佐藤：僕たちはもともと自主的にウェブのクライアントサイドのパフォーマンスをテーマに話したりアウトプットしたりしていたので、社内ではパフォーマンスに比較的関心が高い方なんですよね。
一方で、いざ現場のチームになると、みんなパフォーマンスは別に嫌いでも関心がないわけでもないと思うんですけど、具体的にどうしたらいいんだろうとか、そもそも単純に余裕がないとか。ベストプラクティスという形で言うんであれば、やっぱり開発チームも、コアなところはちゃんと計測して作っていくべきだし。
例えば、「FRESH!」では、最初はサーバサイドレンダリングをいろいろチャレンジしたんですけども、そのあたり仕組みがひと通りでき上がったときに、パフォーマンス面においては問題ないのか、と。パフォーマンス面の性能試験はやっぱり手元で改善するようにしましたね。サービスの立ち上げ時にパフォーマンス面においても問題ないのか、という点を踏まえて開発できていると、運用時にはかなり楽になるなと思っています。
でも、とにかくパフォーマンスって1回上げたところで、日々変わっていくものだし、運用する中で機能改善などが行われると、パフォーマンスの上下が激しいんですね。特にページロードに関して言うと。
なので、まず必要なのは、計測してちゃんと可視化すること。可視化していないと誰も見ていないことになっちゃうので。そのへんがWeb Initiative Centerで「AbemaTV」に限らずやっているところです。
泉水：今はビジネスサイドの人間も、開発サイドの人間も、まだまだパフォーマンスへの意識が足りないかなというのが個人的な印象です。どうしても日々の機能改善が優先的になってしまうので仕方がない部分もあるんですけども、パフォーマンスの劣化がビジネス的な数字に影響してくるよってことを、みんなで理解して取り組んでいくことを推進するのがWeb Initiative Centerの役割ですね。
