スマートフォンサイトを驚くほど速くする!高速化9つのポイント

    
2013/06/25
    

smafo-01 回線が細くCPUも弱いスマートフォンは、リッチなWebサイト表示が苦手です。しかし、地道な対策で表示速度が驚くほど変化するのも事実。
今回はスマホのWebサイト表示の高速化手法をまとめました。もちろんPC向けにも効果バツグンのTips集です。

Webサイトを劇的に高速化する9つのポイント

1.画像を圧縮する
2.画像はサイズを指定して使う
3.画像は適切なサイズで使う
4.CSS/JavaScriptを圧縮する
5.CSSスプライトを使う
6.不要なCSS/JavaScriptを読み込まない
7.CSS/JavaScriptをまとめる
8.CSSセレクターを最適化する
9.mod_deflateでgzip圧縮する


1.画像を圧縮する

画像を最適化することは、フロントエンドの高速化に絶大な効果を発揮します。Photoshopを使って圧縮しても良いのですが、もっと手軽に圧縮できるWebサービスをご紹介します。こちらは無料で使える、透過PNGにも対応した圧縮サイト、TinyPNGです。

PNG圧縮サイト

TinyPNG

このサービスを使って圧縮したところ、次のような結果となりました。
Fruits 圧縮前と圧縮後、見た目には全く違いが分かりませんが、なんと87%もの圧縮に成功しています。恐れ入りました。たかだか219KBの圧縮ですが、回線が細いスマホでは大きな効果をもたらします。

ポイント

  • TinyPNGを使えば透過PNGでも圧縮可能

2.画像はサイズを指定して使う

画像のwidth、heightは必ず指定しましょう。
<img src="../image/img.png" width="100" height="100" alt="画像" />
このように、imgタグにwidth、heightプロパティを指定すると、9〜12%も早く描画されるという検証結果もあります。

ポイント

  • 画像のwidth、heightを指定する

3.画像は適切なサイズで使う

画像はあらかじめ適切なサイズにリサイズしたものを使いましょう。特別な事情がなければ実寸で使えるのが最良です。画像を拡大・縮小させる目的でwidth、heightプロパティを使うと、ブラウザに負担をかけてしまいます。

ポイント

  • 画像は実寸サイズにリサイズしたものを使う


4.CSS/JavaScriptを圧縮する

CSS/JavaScriptのコメントや改行、余分なスペースは取ってしまいましょう。こちらも簡単に使えるWebサービスをいくつか紹介します。

CSSの圧縮に使えるツール


JavaScriptの圧縮に使えるツール


これらのツールを使うと、
/* 背景画像 */

body {
  background-image: url("../images/inu01.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right bottom
}

このCSSが以下のように変わります(コメントや改行、余分なスペースが消えていることに注目してください)。
body{background-image:url("../images/inu01.jpg");background-repeat:no-repeat;background-attachment:fixed;background-position:right bottom}

これだけでなんと24%ものダイエットに成功しています。簡単なのに効果絶大です。

中には「難読化」のオプションを設けているサービスもありますが、難読化するとまれにバグが出る場合もありますのでオススメできません。
たとえばpackerであれば、「Base62 encode(英数字のみのエンコード)」と「Shrink variables(変数名の圧縮)」両方のオプションにチェックを入れればかなりの圧縮、難読化が可能ですが、自信のある方のみ使うと良いでしょう。

ちなみに、圧縮してしまったファイルは、Online JavaScript beautifierというツールを使えば読みやすく整形することもできます。ご安心を。

ポイント

5.CSSスプライトを使う

CSSスプライトとはページ内で扱う画像を1枚のファイルに収め、一度にまとめて読み込むことでHTTPリクエストの回数を減らす手法のことです。たとえばFacebookでは、以下のような画像を使っています。各種アイコンが一つのファイルに固められているのが分かると思います。
Facebook
読み込まれた画像はCSSのbackground-positionで切り出されて表示される、という仕組みです。

本来はPhotoshopでアイコンを並べて作るところですが、これもカンタンに作れるWebサービスがありますので、利用しない手はありません。

CSSスプライト作成ツール

CSS Sprite Generator


CSSスプライトさせたい画像をzipファイルにまとめてアップロードすると、CSSスプライト画像とCSSを出力してくれます。お試しあれ。

ポイント


6.不要なCSS/JavaScriptを読み込まない

初歩的なことですが、不要なCSS/JavaScriptを読み込ませないようにしましょう。
ヘッダをコピペして、不要なファイルを読み込ませてしまっているページ、ありませんか?回線が細いスマホでは1つのファイルでも致命的です。

ポイント

  • 必要最低限のCSS/JavaScriptだけを読み込む

7.CSS・JSをまとめる

headタグ内では、CSSは上、JavaScriptは下にまとめて記述しましょう。
これは、一般的なブラウザでは、同時にダウンロードできるコンポーネントは2つまでという制約があるためです。(追記:2013.6.26 10:30)JavaScriptファイル読み込み/実行により残りのネットワークリソースのダウンロードが停止してしまい、ページ読み込み時間が遅くなるのを防ぐためです。(追記ここまで)
Googleが推薦している書き方でもあります。

悪い例を見てみましょう。
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
CSS・JavaScriptの順番がこのようにバラバラだと、以下のように読み込みにロスが発生してしまいます。

Waterfall1

次は良い例です。

<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />

このようにCSSは上、JavaScriptは下にまとめて書けば、読み込みが最適化されるわけです。

Waterfall2

ポイント

  • CSSは上、JavaScriptは下にまとめて記述する

8.CSSセレクターを最適化する

こちらは大規模なCSSを作る際や、フルスクラッチでCSSを書く場合などに有効なテクニックです。セレクターを最適化することで高速化に寄与することが検証されていますが、しかしその分、学習コストはかなり高いです。
(筆者は一度挫折し、「後で読む」フォルダに入れました……)

以下のWebサイトを参考に、短くシンプルに書くための方法を学ぶと良いでしょう。

CSSセレクター学習のおともに

意外と知らない!?CSSセレクタ20個のおさらい

ポイント

  • CSSセレクターを最適化する


9.mod_deflateでgzip圧縮する

余裕があるならば低レイヤも高速化しましょう。ここではApacheのモジュールであるmod_deflateをご紹介します。mod_deflateを使うと、gzip圧縮転送が可能になります。以下のサイトを参考に、導入してみると良いでしょう。

mod_deflate学習のおともに

mod_deflate – Apache HTTP サーバ

ただしgzip圧縮転送は帯域負荷を下げるかわりにCPUリソースも使ってしまうため、トレードオフの関係です。見極めが大事でしょう。
また、Apache2.2系ではmod_deflateではなくmod_filterが推奨されています。ご自身の環境に合わせて選択してください。

ポイント

  • mod_deflateでgzip圧縮する

まとめ

今回はスマホWebサイトに注目して高速化手法をカンタンにまとめてみました。
改善前と改善後で、どのような違いがあったのか、以下のようなサイトで調べてみても良いでしょう。

スタートアップにとって高速化は至上命題。自分たちのWebサービスを知ってもらうために、日夜直帰率と闘っていることと思います。今回のエントリがみなさまの高速化の手助けになりましたら幸いです。

※ 「7.CSS・JSをまとめる」の項、記事内容に誤りがありました。@nakajmgさん、@hail2u_さんに誤りご指摘頂き、追記・修正いたしました。失礼いたしました。

Find Job! Startupを購読する

職種から求人情報を探す
Webエンジニア・Webプログラマ |  Webデザイナー・HTMLコーダー |  グラフィックザイナー・クリエイター |  Webディレクター・Webプロデューサー |  スマートフォンエンジニア |  ネットワークエンジニア・サーバーエンジニア |  フロントエンドエンジニア
スキルから求人情報を探す
PHP |  Perl |  Ruby |  Python |  Java |  JavaScript |  C言語 |  C++ |  MySQL |  PostgreSQL |  iPhoneアプリ |  Androidアプリ
企業名から求人情報を探す
 |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |  A |  B |  C |  D |  E |  F |  G |  H |  I |  J |  K |  L |  M |  N |  O |  P |  Q |  R |  S |  T |  U |  V |  W |  X |  Y |  Z
Copyright (C) 2015 mixi recruitment, Inc. all rights reserved.