スマートフォン向けWebサイトの表示速度 高速化手法

スマートフォンの最適化ポイント

1　ブロックを回避する

　HTMLのパースや画像のダウンロードなど、ブラウザは多くの処理を並列で行いますが、特定の状況においてこういった並列処理を止め、特定処理の待ちに入る場合があります。

　この挙動をブロッキングと言い、特にCPUの貧弱なモバイル端末を相手にする場合はブロッキングを最小に抑えることが重要になります。

　ブロッキングの主要原因となるのがscript要素です。

　JavaScriptにより、document.writeによるDOMツリーの操作、他のscript要素を挿入するなど、さまざまな操作が可能であるため、ブラウザはHTMLのパース時にscript要素にさしかかるとJavaScriptの評価を優先して他の処理を停止します。

　このブロッキングを最小に抑えるため、よく取られる手法としてscript要素をdocument.bodyの最下部</body>の直前に集約します。

　これよりも有効な方法がasync,deferといった非同期属性の利用です。

　Android/iOSにターゲットを絞れば全ブラウザで安定して使えます（iOS 4.3、Android2.2以上での動作を確認しています）。

　script要素にasync,deferといった属性を付加することでブラウザはJavaScriptの処理に差し掛かっても他の処理を止めず、並列性が維持されることでページの読み込み全体が高速化します。

　ただし非同期属性を指定できるscript要素は、document.writeなどのブラウザの処理に影響を及ぼす操作を行わない、などの制約を受けますので、用途に応じて使い分けてください。

defar属性を活用することでiPhoneの通信状況が大幅に向上

2　遅延させる

　優先度の低い処理を後回しにすることで、ネットワークやCPUといった限られた資源を優先順位の高い処理に集中させることができ、高速化に繋がります。

　「TTIにフォーカスする」でも述べたように、大事なのはユーザーが操作するまでの時間をいかに短くするかです。

　「農園ホッコリーナ」の画面で説明すると、ユーザーにとって大事なのは赤で囲んだ部分（農園部分）であり、白で囲んだ部分は体感速度において優先度が赤よりも低くなります。

　iPhone 4のような比較的CPUに余裕のない端末ではHTMLのパースコストも高く、特にネストしたdiv要素があると100ms程度の処理時間を要することもあり、この部分のHTML処理をスキップさせることでTTIを短縮できます。

　HTMLのパース遅延は極端な例ですが、画像の取得遅延は広く使えるテクニックです。

　例えば、画面外に表示される画像などは、src属性に統一されたダミー画像を放り込んでおき、data-srcのような属性に本来の画像パスを書いてJavaScriptで遅延評価することで高速化を図れます。

3　リクエスト数を削る

　iPhone 4のようなモバイル端末ではHTTPのコネクション自体が負荷になります。単純にimg要素を並べると、小さな画像であってもリクエスト数の増加に伴い、遅延を体感できると思います。大体のケースではリクエスト数は多くても20以内、できれば10～14程度まで絞り込みたいところです。

　リクエスト数を削るための方法としてはJavaScript、CSSのような外部ファイルのUnify、CSSスプライトシートなどを用いて画像のリクエスト数を削るといった手段が有効です。

　JavaScriptやCSSの処理効率の観点からも、またスプライトシートであればキャッシュアウト判定の観点からも、適当な粒度でUnifyを行うことは多方面に良い影響を及ぼします。

　スプライトシートに織り込めない小物画像であれば、base64エンコードによりCSSやJavaScriptに埋め込んでしまうのも良いと思います。

その他　演出による体感待ち時間の短縮

　遅延ロードと同様の発想を用いて、ページの表示シーケンスを多段化することでも待ち時間の緩和が可能です。

　例えば戦闘シーンであればすべてのアセットを読み込んで再生を開始するのでなく、背景だけを先行表示させ、敵の登場、味方パーティーの登場と、順次処理を行うことで読み込み時間をそれぞれ分散させることができます。

　実装工数は上がりますが、有効に活用することでアセットのデータ量にとらわれないグラフィカルで高速なアプリケーションが構築できます。

おわりに

　モバイル端末の世界は大変進歩が激しく、それだけに大変手応えある楽しい分野です。

　iOS 4の時代はCanvas処理でフレームレートが稼げず苦労しましたがGPU Accelerationを搭載したiOS 5の登場で一気に状況が改善しました。

　同様に、今はiPhone 5の登場でモバイルブラウザの体感全体が圧倒的に向上し、こういった高性能端末が普及することでフロントエンド周りの性能問題を一気に改善してくれる期待が持てます。

　同時に、iOS 5で向上したCanvas描画性能もコンテンツ側の表現がリッチになりすぐに限界に達したように、デバイス性能の向上は新たな表現を産み、同時に新たな問題も産んでくれるでしょう。

　モバイルコンテンツの最先端を追い求め、この楽しい鬼ごっこを続けながら、また皆様に有益なノウハウや情報をさまざま発信していきたいと思っています。

　これからもDeNAの発信するモバイルコンテンツとその技術にどうぞご期待頂ければ幸いです。