スマートフォン向けWebサイトの表示速度 高速化手法 （1/2）：CodeZine（情報元のブックマーク数）
スマホ向けサイトの表示速度高速化の話し。トランザクション0.8秒ってのは凄く大変だ・・・
リッチで高機能なWebページなのだけど重い、待たされる、動きがモサっとなる、そんな体感性能に不満を感じたような経験はありませんか。モバイルブラウザの表現力が向上するにつれ、同時に高度化、複雑化するWebページをいかに待ち時間なくユーザに提供するか、フロントエンドの最適化が必要となるケースが増えてきています。今回は私たちが手がけているスマートフォン向けソーシャルゲームの世界で培ったノウハウの一部から、スマートフォン向けWebページの最適化手法をいくつかご紹介したいと思います。
スマートフォン向けWebサイトの表示速度 高速化手法 (1/2)：CodeZine（コードジン）
TTI（Time to Interact）とは、ページの読み込み開始から主要なコンテンツが表示され、ユーザーが操作できると感じるまでの「ユーザにとっての待ち時間」です。
スマートフォン向けWebサイトの表示速度 高速化手法 (1/2)：CodeZine（コードジン）
例えば下記のゲームの場合、赤枠で囲んだ部分、動物が並んで動き始めた瞬間にユーザにとっての「待ち」が終わります。それ以外の部分、お知らせ画面や訪問履歴などは未表示であっても感覚的に待ちには含まれません。従って戦略としては、必要な部分の高速化に重点を置き、他の部分の描画やダウンロードはむしろ後回しにして速度を稼ぐといった内容になります。
このTTI、最初の待ち時間が0.8秒を超えるとユーザに待たされる感覚が生まれることが多いようです。
TTIを構成するプロセスを考え、そのプロセスが例えば0.8秒以内に完結する、といった目標を定めて最適化に着手します。
このブロッキングを最小に抑えるため、よく取られる手法としてscript要素をdocument.bodyの最下部
