サイバーエージェントを支える技術者たち

第57回 レスポンス改善に取り組む“特命”チーム

この記事を読むのに必要な時間:およそ 3 分

アプリのレスポンスをどうやって計測するか

スマートフォンでWebアプリやネイティブアプリを利用しているとき,データの読み込みが遅い,あるいは操作に画面描画が追いつかないなど,レスポンスの悪さを感じることは少なくありません。レスポンスの低下はユーザの離脱につながりかねないことを考えると,けっして見逃せる問題ではないでしょう。

ただ,レスポンスは定量的に評価することが難しく,たとえば3G/LTE回線の状況は刻々と変わるため,計測するタイミングによってレスポンスは大きく変化してしまいます。また,ストップウォッチなどを使って手作業で実施した場合,ボタンを押すタイミングなどで誤差が生じるため,信頼できる結果とは言い切れません。

このような課題を解決するべく,サイバーエージェントでは提供しているスマートフォン向けアプリのレスポンスを自動的に計測するための環境を構築しています。また,そこで得られた結果からレスポンスが悪いと判断すれば,その改善に向けた取り組みを積極的に行っているとのこと。今回は,この活動にチームで取り組んでいる,同社の川上琢也氏写真1と平木聡氏写真2)⁠そしてJonathan Waller氏写真3の3名にお話を伺いました。

自動的にレスポンスを計測する「ReSpeedA」を独自に開発

まずスマートフォン向けアプリのレスポンスをチェックするようになった背景を伺ったところ,川上氏は次のように答えてくれました。

写真1 川上琢也氏

写真1 川上琢也氏

「サイバーエージェントでは,2年半ほど前からスマートフォン向けのアプリの開発を進めており,すでに数多くのタイトルをリリースしています。これらのアプリの運用において,従来はユーザを飽きさせないため,あるいは継続的に遊んでもらうための新機能のリリースに注力していて,レスポンスやパフォーマンスといったところにはあまり目が向けられていませんでした。しかし,品質においてレスポンスは重要なポイントだと考え,社長の藤田を中心に全社的にレスポンスを見直そうというメッセージを発信したんです。それを機にスマートフォン向けアプリのレスポンスを計測し始めたというのが,この取り組みを始めたきっかけになります。」⁠川上氏)

ただ,当初は試行錯誤の連続だったと川上氏は話を続けます。

「最初はスマートフォンの実機で実際にアプリを動かしながら,ストップウォッチを使って手動で計測していました。しかし,弊社でリリースしているサービスは年間100タイトルもあり,その中で主力と言えるものだけでも数十タイトルあります。主力タイトルだけでも,iOSとAndroidの4端末注1を使って計測すると1週間に1度計測するのがやっとという状況でした。このようにサンプリング数がそもそも少なく,しかも3G/LTE回線の状況も刻々と変化するうえ,テストを行う人によって計測値に微妙に差が生じるなど精度も高くありません。このような集計結果では,現場を納得させることができなかったわけです。それでレスポンスを自動的に計測するツールを自作しようということになりました。」⁠川上氏)

たしかに,安定していない回線でストップウォッチを使って計測した結果では,現場のエンジニアもなかなか納得できないでしょう。計測する側にとっても煩雑な作業を繰り返す必要があり,大きな負担を強いられることになります。そこで,エンジニアが納得できる方法で自動的にレスポンスを計測できるツールとして「ReSpeedA(レスピーダ)⁠図1が生まれました。

図1 スマートフォン向けアプリのレスポンスを計測する「ReSpeedA」⁠ReSpeedAは,CasperJS/PhantomJSを使って処理を自動化し,実際のレスポンスを計測したうえでグラフとして表示する機能を備える

図1 スマートフォン向けアプリのレスポンスを計測する「ReSpeedA」。ReSpeedAは,CasperJS/PhantomJSを使って処理を自動化し,実際のレスポンスを計測したうえでグラフとして表示する機能を備える

このReSpeedAのしくみを解説してくれたのは,開発を行ったJonathan氏です。

「ReSpeedAは,CasperJSを使って各アプリにアクセスし,それぞれのアプリに合わせて作成したカスタムスクリプトを実行してロード時間を計測,その結果をグラフとして表示するツールです。さらに3G/LTE回線を使っているユーザの環境に合わせるため,帯域幅を絞ってサーバにアクセスするというしくみを備えています。」⁠Jonathan氏)

CasperJSは,コンソールでWebKitブラウザを操作する「PhantomJS」を利用するためのユーティリティです。この2つを組み合わせれば,特定のWebサイトにアクセスしてフォームを入力したり,あるいはリンクをクリックしたりといった操作をコードとして記述して実行できます。ReSpeedAは,このツールを使って各アプリのサーバに接続し,レスポンスタイムを計測するというわけです。さらにHAR(HTTP Archive:Webページにアクセスした際のHTTPリクエストや読み込みにかかった時間などを記録したファイル)を自動的に書き出す機能も用意されています。レスポンスが遅い場合,このHARを参照することで原因を探れます図2)⁠

図2 HARファイルの内容を表示したところ。HARファイルによって,HTTPリクエストの数やそれぞれにおける処理時間などを把握でき,レスポンスの改善に役立つ

図2 HARファイルの内容を表示したところ。HARファイルによって,HTTPリクエストの数やそれぞれにおける処理時間などを把握でき,レスポンスの改善に役立つ

CasperJSを利用すればアプリへのログイン処理などを自動化できますが,そのためにはアプリごとにコードを記述する必要があるほか,アプリ側の処理が変わればCasperJSのコードも書き直さなければなりません。そうした運用面,さらにはレスポンスを計測するタイミング,つまりユーザが操作可能になるポイントを調べるのが大変だとJonathan氏は話します。

「通常のアプリであればDOMContentLoadedのタイミングで計測すればよいのですが,Backbone.jsなどを使ってシングルページで構成されているアプリを同じように計測すると非常に速い結果が出てしまいます。もちろん,DOMContentLoadedのあとにJavaScriptを実行したり画像をロードしたりするため,実際に操作できる状態にはなっていないわけです。そこで,適切なタイミングを探ってCasperJSのコードを調整するといったことが必要になります。こうした作業は苦労している点であり,今後の課題だと認識しています。」⁠Jonathan氏)

注1)
iPhone 4s,iPhone 5,Galaxy S II,Galaxy S IIIの4機種。

著者プロフィール

川添貴生(かわぞえたかお)

株式会社インサイトイメージ代表取締役。企業サイトの構築及び運用支援のほか、エンタープライズ領域を中心に執筆活動を展開している。

メール:mail@insightimage.jp

コメント

コメントの記入