読了: 約 4 分

こんにちわ。少しずつ夏の足音を感じる今日この頃皆さんはいかがお過ごしでしょうか。
絶賛スマホのウェブアプリを開発中の私ですが、開発・運用している中で学んだ事があったので、メモしておきます。

はじめに

皆さんはどのようなスマートフォンサイト、スマホのウェブアプリを作成しているでしょうか。
スマートフォンサイトといえば、あの忌まわしきIEから解放され、CSS3で角丸やbox-shadowなどを使ってデザインされている事だと思います。
なるべく画像を使わないように、写真とピクトグラム、CSSでグラデーション。というようなサイトをよく見かけます。

ウェブアプリといっても様々な形がありますが、今回は今私が開発しているアプリを作成している中で得たノウハウ?を
メモしておきます。

CSSスプライトという神話

PCでの制作の時から画像はHTTPRequest数を減らすために極力まとめて、CSSスプライトをしなさいと一般的には言われていました。
※ただし、画像が大きい際には取り扱いに注意が必要みたいな注意書き込みで。

恥ずかしながらスマホサイトで使うアイコンなどはひとまとめにする流れで、
大きめの画像をスプライトに入れてしまっていました。

そうするとその画像がボトルネックとなって次に読み込まれる画像が遅くなります。

Google developer toolsのNetworkから何がボトルネックになっているか調査します。

今回僕たちのプロジェクトではドメインを3つ用意して、1ドメイン辺り6つのリクエストをさばけるようにしているので、
スプライトはせずに細かく分けて並列で処理するようにして速度改善
しました。

amazonだったり他の画像を多用するサービスもURLを見るとドメインが異なっています。
これは上記の方法と同じやり方なので、やる場合はフロントだけでなくサーバーサイドの人と話合いましょう。

1. スプライトする画像+CSSの設計

background-posiitoinで規則性を持たせて、compassを使ってスプライトを創ったときに
効率的に配置し、無駄なコードを生み出さないようにする必要があります。

2. 画像が縦横どちらか3000pxを越える場合

開発中のアプリでやって気付いたのですが、mobile safariには限界があるようで、
safariのdeveloperサイトに詳細が記載されています。

Creating Compatible Web Content

Mobile Safariで扱うことができる画像のサイズの上限

更新生のある画像の場合、一枚の画像のサイズが増えていって上限に達してしまうような事があると思います。
なので、上記の記事を参考に注意してみてください。

3. 単体で管理した方がよい画像

例えば600*600みたいな画像をアイコンが並んでいるスプライト画像の一部に入れるケース。
retinaに対応するためなので、結局は300*300になるのですが、何かのアクションやユーザーへのインセンティブの注意喚起などで
ポップアップを出す時に使用する画像です。
他にも色々な使用シチュエーションがあると思いますが。
このような画像はスプライトではなく、単体で用意した方が良いという事がわかりました。

4. 画質を最適化する

結局画質とスピードはトレードオフです。
優先度をつけて、クオリティを取るのか速度による初期ユーザーのストレス軽減⇒ 新規流入・アクションをとるのか
プロジェクトの方向性にもよります。

ソーシャルゲームでもよく画像を見てみるとサイドがじゃぎっていたり、
結構画質を調整しているケースが見られます。
画質を落とさないようにすると、初期loadに異常に時間をとってしまいます。
よくネイティブのアプリ等でありますが、正直UX的に良くないですね。
サービス運営の数字からいうとそのハードルを抜けてきた新規ユーザーの方が継続率が高かったりするのかもしれないので、
そこはわざとそうしているのかもしれませんが。

pngの最適化については以前書いた記事をご参照ください

5. 画像の遅延ロード

backbone.jsを使ってシングルページで開発しているので、そのテンプレートの下に
画像の遅延処理を入れています。
この画面のloadが終了した時に読み込まれるので、すぐにページ遷移した際には
遷移したページで画像が読み込まれるのでがさつく可能性があるという問題もありますが、
この形にしています。
初期ユーザーにはチュートリアルを表示するのでその間に読み込みが完了するという形です。

$(window).load(function () {
	var img = new Image();
	img.src = "<%= image_path('a.png')%>";
	img.src = "<%= image_path('b.png')%>";
	img.src = "<%= image_path('c.png')%>";
});

時と場合に応じて色々な方法があるかと思いますが、
今回はこのように速度改善しました。

他にも何か見つけたら随時更新していきます。