モバイルのWebサイトはできるだけ表示速度を向上させることが重要です。UI/UXも重要ですが、閲覧者にストレスを与えず閲覧させることは離脱を減らすことにもつながります。一般的に行われているテクニックをまとめてみました。gruntを利用すると、色々なツールが簡単に利用できます。
HTTPリクエストを減らす
HTTPリクエストを減らすのに一番手っ取り早いのは、画像の数を減らすことです。
画像の代わりにCSS3を利用する
画像ではなく、CSS3で表現できないか検討すべきです。特にボタンなんかは、CSS3で書けるものが多いです。バックグランドをCSS3で書いて、文字はブラウザフォントで描画します。どうしても画像を使うなら、文字は画像にふくめず、バックグランド画像は9patchで作成します。
CSSスプライトを利用する
小さなアイコンが多い画面は、CSSスプライトで一つの画像にしてください。CSSスプライトを作成するツールは色々ありますが、私はgrunt-spritesmithを使って、画像のまとめ、CSSを出力しています。
インラインイメージを利用する
ページ初期化時に先にロードしておきたい（小さな）画像は、data uriを利用してインラインイメージ（直接CSSファイルにbase64で書く方法）で記述するとHTTPリクエストを減らすことができます。
画像をさらに圧縮する
jpg,pngは比較的サイズが小さいですが、ツールを使ってさらに圧縮します。私は、imageoptimを使っています。
javascript,css,htmlも圧縮する
リリース版では、複数のjavascriptソースファイルを一つまとめて、minifiedします。css,htmlも同様です。webサーバの設定が変更できるなら、通信にzipを利用することもできます。
jQueryを使うなら
jQuery2.0以上を使う
jQuery2.0以上を使いましょう。ie8以下のサポートが終了してるので、サイズが小さいです。たとえば、jquery-1.8.x.min.jsで93kだったものが、jquery-2.1.0-min.jsでは83kになっています。
さらに、jqueryで必要なモジュールだけでカスタムコンパイルすることで、もっとサイズを小さくすることができます。
cdnの利用
cdnを使うと気軽にjavascriptライブラリを試すことができます。開発中は非常にベンリです。また、キャッシュ効果が利用できるので、高速化に役立ちますが、cdnがダウンしているときを考慮すべきです。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/vendor/jquery-2.1.0.min.js"><\/script>')</script>
コーディングの方法
よくCSSセレクタの書き方でパフォーマンスが変化するのでは？という話がありますが、最近のモダンブラウザではほとんど影響ないそうです。
HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック – ZDNet Japan
