ぱすたけ日記

日記っぽいのを書きます。

とりあえずシュッとパフォーマンスチューニングの目星を付ける

この記事ははてなエンジニアアドベントカレンダー2017の14日目*1であり、且つ後輩が徳島旅行に行っているので、日程がスワップされた結果KMC Advent Calendar 2017の14日目の記事でもあります*2

はてなエンジニアアドベントカレンダーの13日目の記事は id:amagitakayosi さんのインターネット溶かすボタンできた - マルシテイアでした。KMCアドベントカレンダーの13日目の記事は id:opesan くんの 聖地巡礼記2017 - おぺの日記でした。

さて、今年2017年は素晴らしい年で、フロントエンドのパフォーマンスチューニングに関する良い書籍が2冊も出ました。

Webフロントエンド ハイパフォーマンス チューニング

Webフロントエンド ハイパフォーマンス チューニング

超速!  Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)

超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)

「目星をつける」のゴール

フロントエンドのパフォーマンスチューニングに関する具体的なテクニックは上記の書籍などに譲るとして、この記事ではそもそもフロントエンドのパフォーマンスチューニングをやる必要があるのか、取り組むとしたら何に手をつけると良さそうなのかということに、ひとまず 大雑把に目星を付ける という話をします。具体的には、ひとまず15分くらい取り組んでみて、以下の点についてざっとチーム内などで共有できることを目指します。

  • フロントエンドのパフォーマンスチューニングが必要かどうかを判断する
  • パフォーマンスチューニングで取り組むと良さそうな箇所を把握する
    • 可能ならばパフォーマンスの問題を起こしている原因の概要も把握する

(Mac上のChrome v63 の Developer Tools を用いた操作や画面の説明を掲載しています。他のOSやブラウザ、Chromeのバージョンの違いに依って異なる場合があります)

フロントエンドのパフォーマンスチューニングが必要かどうか

まず、そもそもボトルネックがフロントエンドの実装、特にJavaScriptの層にあるのかどうか判断することが必要です。例えば、APIサーバーのレスポンスが遅い場合などはそちらを対処すべきですし、レンダリングが遅いのは画像の配信が遅いことに引っ張られている可能性もあります。Devloper ToolのNetworkタブでそれらに関するヒントを得ることができます。

Networkタブを開いた状態であるページをロードしたときの結果の一部を挙げます。

Networkタブの結果の棒グラフは色々な情報がある*3のですが、ここではざっくりと以下の2点を観察することにします。

  • 緑: サーバにリクエストしてから1byte目を受け取るまでの時間
  • 青: そのレスポンスをダウンロードするのにかかった時間

これを念頭に置いて先ほどのグラフを見ると、画面中央の辺りでいくつかの緑のグラフが4000msec〜6000msec分あることが分かります。 緑はサーバからのレスポンスが到達し始めるまでの時間なので、これらのエンドポイントはサーバサイドでAPIレスポンスを生成するまでに問題がありそうなことが分かります。この部分に関してはフロントエンドよりもまずはAPIの設計や実装を見直すと良さそうです。

詳細な時間やAPIのレスポンス内容について知りたい場合、name部分をクリックすることでレスポンスのヘッダーや時間の詳細を見ることが出来ます。

Performanceタブを眺める

Networkタブでウェブアプリケーションの通信に関する部分を観察したので、次に本丸のフロントエンドのパフォーマンスについて観察していきたいと思います。

ChromeのDeveloper ToolにはPerformanceというタブがある*4ので、今回はそれを観察します。Macの場合、Command + Shift + Eでリロード→集計開始をやってくれます。

グラフを眺めて概観をつかむ

先ほどNetworkタブで素振りをしたのと同様に次の2色について着目してひとまず観察することにします。

  • 紫: ブラウザのレンダリングに関する時間
  • 橙: JavaScriptの実行に関する時間

というわけで、あるウェブサイトで集計した例を提示します。

橙もなんとかしたいのですが、今回は特徴的な中央右寄りの紫の部分を今回は観察することにします。紫の部分はレンダリングに関する部分で、要素のwidth/height/left/topなどを取り扱うフェイズです。特にこの紫の部分がボトルネックになっている場合、強制同期レイアウト(Forced Synchronous Layout)*5が発生している可能性が考えられます。

この強制同期レイアウトが頻出してFPSが下がっている場合、次のような橙と紫の関係性のグラフになっていることが多いので、このようなときは注意が必要です。

from https://developers.google.com/web/tools/chrome-devtools/rendering-tools/forced-synchronous-layouts

箇所を特定する

では、前述のグラフから怪しそうな紫色が大半を占める部分を拡大して見てみることで何が原因になっているか探ってみます。

(文字が隠れていて見えませんが)Recalculated StyleとLayoutに時間がかかっていることが分かります。紫のバーの右上に赤い三角があるのは強制同期レイアウトが起きている印なので、これによってScriptの実行がブロックされていることが分かります。さらにそれらの出来事は whenXS という名前の関数内で発生していることが分かります。

この強制同期レイアウトの原因を取り除く*6と次のような状態になって、ここから先はXHRのReadyStateChangeのあとに起きていることなどをつぶさに観察してJSのロジックなどを改善していけば良さそうという方針が立てられそうです。

Performanceタブではその他にもJSのヒープやCPUの使用量についても観察できるので適宜参考にすると良さそうです。またレンダリングやアニメーションについて深く追いたい場合はDeveloper ToolのMoreToolからLayersタブを開いたりすると良い情報が得られるかもしれませんし、JavaScriptの実行について詳しく追いたい場合は同じ場所から開くことが出来るJavaScript Profilerなどを使うと良いでしょう。

最後に

フロントエンドのパフォーマンスチューニングに問題がありそうな時に、ひとまずシュッとウェブサイトの状態を観察してボトルネックらしき箇所を特定するときに僕が取り組んでいるアプローチについて紹介しました。

また、フロントエンドのパフォーマンスチューニングに関する代表的なテクニックや基本的な向き合い方などは過去の発表資料で紹介しているので、良ければそちらも御覧ください。

参考

*1:9月末からはてなでマンガビューワーのフロントエンドをやるアルバイトをしています

*2:本当は別々の記事を書こうと思っていたのですが、許してください

*3:https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#timing-explanation

*4:詳細は https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/

*5:https://developers.google.com/web/tools/chrome-devtools/rendering-tools/forced-synchronous-layouts

*6:詳細は省きますが、強制同期レイアウトを呼び起こす関数の利用をとにかく回避する

12/01 SMTP++ #03 出演しました

12月になりましたね。12月は可能な限り毎日ブログ更新するか(いわゆる1人アドベントカレンダーやるか)と思っていたけど、いきなり失敗したので、記憶を呼び出しつつやっていきます。

SMTP++#03

【ここにDJ中の写真を貼りたいのでお持ちの方はお知らせください】

今年の春に誘ってもらって初DJしてから早半年、ついにSMTP++は3度目の開催、個人的には4度目のDJということでやっていきました。

今回はこれまででDJ面白くなってきたので、キラキラ光る板を卒業して、DDJ-RBを買って挑みました。

Pioneer DDJ-RB

Pioneer DDJ-RB

  • メディア: エレクトロニクス

SMTP++は開催するたびに周囲の人々がDJを始めたり始めようとしたりするので良い会という感じがする。

今回の選曲、BPM160と100を行き来するという感じで、遊びに来てくれた後輩が最前列でめちゃくちゃ煽ってきたので盛り上がりがあって良かった。次回は後輩に煽られないような感じにしていきたい。

セットリスト

(最初にAnthem of NAGOYAを1分ほど流した。名古屋J1昇格おめでとうございます)

今日の1冊

(今年は毎月のマンガをしなかったので、毎日1冊ずつ振り返りを軽くしようという試み)

しがない高校生の妖平はある日、学校の屋上で地縛霊の輪子さんと出会う。死んでからずっと一人ぼっちの輪子さんは「友達作り」を手伝ってほしいと言い出して…?ポンコツヒロイン界に新風を巻き起こす、コミュ症の幽霊JKラブコメディ!!

帯コメが『からかい上手の高木さん』の山本崇一朗先生だったので買ってみたやつ。山本先生が帯コメしているだけあって女の子の可愛さバッチリのラブコメだった。 ポンコツヒロイン系のラブコメが好きな人は読むと良さそう。テンポも上手で幽霊(学校の怪談)の使い方も上手でコメディ部分も面白かった。

ビール、マンガ、ビール、映画、ビール

土曜日はビール、マンガだった。日曜日はビール、映画、ビールだった。

BEER FLATというイベントが家の近くでやっていたので見に行ってた。

土曜日は昼過ぎに起き、夕方くらいにBEERFLATへ。その後は帰宅してマンガを読んでいた。

KAMIKATZ ペールエール

MARCAのアンバーエール久しぶりに会えた!!わいわい!!! #beerflat

MARCA メイプルアンドラズベリー

あと、写真ないけど、じぷしーはうすのキーマカレー食べたり、ZIGZAGのポーターも飲んだりしてた。RISE AND WINのビール、多分初めて飲んだけどペールエール個人的に結構好きな味だったので、今後見かけたら積極的に飲んでいきたい。

その後帰宅してマンガを読んだ。

恋は光。最終巻めっちゃ尊くて良いエンドだった。今年のベストにしても良いくらい良い巻だった。オススメです。

日曜日は正午くらいに起きて、昼過ぎにBEER FLATへ。

MARCAのセゾンで開始しました #beerflat

夢バクのカレー久しぶりに拝めて大喜び

西陣麦酒計画の柚子IPA #beerflat

あと2杯くらい飲んだ気がする。友人の知り合いのイラストレーターの方が似顔絵で出店されていたので、書いていただいた。

その後サークルの友人と『劇場版 はいからさんが通る 前編』を観た。

テンポも良く観てて楽しい良い作品だった。後編も楽しみ。

映画を観た後、スプリングバレーブルワリー京都でビールを飲んで帰ってこれを書いています。

今週も頑張りましょう。

週末日記: 日本酒祭り、ザ・サークル、特別版Free!

先週は3連休なのに破滅してたのでその反省を活かした(はず)。

土曜日

伏見の清酒まつりin大手筋商店街2017に行った。去年も行ったやつ。

http://www.kyoto-sake.com/event/2433

やっていくぞ

その前に駅の前にある大中ラーメンに行った。意外と有名なところということが後々発覚した。京都のラーメンという感じでトッピングも色々あって良かった。

日本酒祭りは14時くらいに始まったのだけど、その前のラーメンで満腹になっていたので、ノーつまみで飲み続けていたので、15時くらいには券も使い切っていた。たまたま目の前に日本酒の利き酒などが出来る施設があったので、そこで5種+おつまみで500円のセットを2つ頼んでやっていっていた。

http://fushimi-univ.jp/%E3%83%95%E3%82%B7%E3%83%9F%E5%A4%A7%E5%AD%A6%E5%AD%A6%E5%9C%92%E7%A5%AD2017/

その後解散して、家に夕飯がないということが発覚したので麦潤へ。京都腸詰のソーセージを使ったホットドッグを食べられてハッピー。最近麦潤行く度に途中から徐々に人が増えて座席をテーブルに変えてもらうことが多かったので、久保田さんに「今日はもう増えへんの」って聞かれてウッってなった。

来週は麦潤も出店するらしいBeerFlatが四条大宮でありますね。やっていきましょう。

日曜日

今年の序盤はよく映画を観ていたが、最近全く映画を観れてないのでリハビリということでハシゴした。

1つ目は土曜日公開の「ザ・サークル」。

TVCMしか観てなかったので、コンテキスト知らなかったけど、なんかSNSを題材にした最近のインスタバエ的な話かなと思って観に行った。

蓋を開けるとSNSの大企業が人々のプライバシーを犯していく日々への示唆という感じだった。

一番良かったシーンはエマ・ワトソンの採用面接のシーンで 「"jif" or "gif"?」と聞かれて保留するシーン。採用面接の質問のシーンは他にもマリオかソニックとかあって面白かった。

2本目は『特別版 Free!-Take Your Marks-』。

Free!最近は観れていなかったけど、Doの河浪さんが劇場版前作から監督ということと山田さんが演出している話があるということを先日の京アニイベントで仰っていたので観に行った。

1〜3話はFree!の日常回という感じで緩かったし、コンテもシンプルな感じだったけど、4話目は河浪さんが絵コンテ・演出で来年の新シリーズへの気合いを感じられる良い仕上がりだった。オススメです。

夜はテレビでシンゴジラを観ました。

近況

日記をどうやって書いていたか忘れてしまった。

  • マリオオデッセイでクッパを倒しました。
  • DJコントローラーを新調したので明日届きます。
  • TypeScript書いてます。
  • ビールも飲んでいます。
  • 京アニのイベントに行きました。
  • 銀杏BOYZの武道館ライブは最高だった。ボロフェスタの大森靖子も尊かった。
  • 雨続きなので憂鬱です
  • 夕方くらいの眠気がスゴい
  • すき焼き美味しかった
  • マンガあまり読めてないです。映画も観れてない。時間が欲しい。