趣味でつくるアバター×アバターマッチングアプリ~Performanceチューニング編~

趣味でつくるアバター×アバターマッチングアプリ ~Performanceチューニング編~ BOXP

自己紹介 • 一箱さん (の体を借りたBOXP) • 某Web企業でソフトウェアエンジニアをしています • 好きなLispはClojureです

製作中のアプリ • VRChat、Virtual Castなどから好みのアバターを自動で探してくれるサービス • IPhone・Android向けWebアプリとしてリリース予定 •
VRじゃなくてごめんなさい • 所謂PWA(Progressive Web Apps)を目指して製作中

なぜWeb？ • 無名のアプリなのでインストールの手間があるとそのまま直帰してしまう… 多くの人に触ってほしい • このスライドも社内勉強会の資料を再編集したもの実験的な技術を試して
業務に活かしたい

とは言えインストールの手間がなくても Webページがもっさりしていると使ってもらえない

もっさりしないために Hito Hubで何をしたか

状況に応じて必要なパフォーマンスを満たす

Webアプリ 4つの側面 (RAILモデル) • Response: ユーザーの入力に対する応答中の状態 • Animation: アニメーション再生中の状態
• Idle: ユーザーの入力を待機している状態 • Load: コンテンツ読み込み中の状態引用元: RAIL モデルでパフォーマンスを計測する https://developers.google.com/web/fundamentals/performance/rail

快適なパフォーマンスの目安 •100ミリ秒以内の応答 •これよりも遅いと操作と反応のズレを感じる Response •10ミリ秒以内に画面をレンダリング •1000ms / 60fps
- ブラウザによるレンダリング時間 (約6ms) =約10ms Animation •アイドル時間を利用したタスク分担 •100ミリ秒以上かかる処理はアイドル時間まで後回し •ユーザー入力へのレスポンスが最優先 Idle •読み込みは1000ミリ秒以内に •1000ミリ秒より長いとユーザーの集中力が切れてしまう Load ※Google調べ

Hito Hubですべて満たすまで最適化してみました

全ての入力に対して 100ms以内に応答する 100ms以内に応答が間に合わない場合は別の応答を返す • Rippleを表示させるなど応答処理と他の処理を同時に実行させない • リソースの取得などは別スレッド
(WebWorkerなど)で行うか後回しにする Response

アニメーションを60fps で動かすアニメーションが必要なカードだけ別レイヤーに • will-change: transform;スタイルによって別レイヤーへ • 重ね合わせによるピクセルの計算をスキッ
プできる透過・座標移動のみでアニメーションを実現させる • transform,opacityスタイルを使う Animation

読み込み時間を 1秒以内に Load JavaScriptファイルは分割して必要な分だけロードさせる • 追加のJavaScriptファイルが必要なときにはじめてロードする他の画面に必要なファイルを prefetchしておく
• WebWorkerを使って画面の処理を邪魔せず先読みしておく

最適化の結果

最適化の甲斐あってなんとかサクサク動くようになった

～Fin～

最後に告知的なもの

7月末までにリリース予定！

Thanks!

趣味でつくるアバター×アバターマッチングアプリ~Performanceチューニング編~

趣味でつくるアバター×アバターマッチングアプリ~Performanceチューニング編~

BOXP

More Decks by BOXP

Other Decks in Technology

Featured

Transcript