MD-Blog_Web Creative

スマートフォン向けWebサイト制作につきまとう問題といえば、軽量化。
現在は、高スペック端末が世の中を席巻しているとはいえ、個人的に最近絶不調のAndroid2.3を使っているということもあり、軽量化は永遠の課題といえます。

ということで、フロントサイドで実施できる、基本的な軽量化テクニックをまとめてみました。

セレクタを見直す

よく聞くのは「セレクタは右から左へ読まれる」ということ。
ということは、あまりに深い構造のセレクタを使用するのは良くない。
わかってはいたのですが、最近Sassを導入し始め、ネスト機能が楽しすぎてこんなカオスなコーディングをしていたことがありました。

Sass

#main {
    .contents {
        div {
            #hoge {
                .hogehoge {
                    color: #000;
                }
            }
        }
    }
}

CSS（コンパイル後）

#main .contents div #hoge .hogehoge {
    color: #000;
}

...はい、ほぼ不要。
1ページ 1idですから、これで済むはずです。

#hoge .hogehoge {
    color: #F00;
}

idがいちばん早く呼び出せるセレクタだと言えますが、ページ内すべてのコンテンツにユニークなidを振ることはさすがに大変で非効率なので、id、class等を絡めて、どう指定したら効率的に呼び出せるか考える必要がありますね。

参考：
- Writing efficient CSS selectors - CSS Wizardry

画像をなるべく使わない

画像を使うということは、その画像自体の容量はもちろん、表示する際に画像ごとにHTTPリクエストが発生するので、遅延の原因になります。
スマートフォンサイトでは、CSS等での表現テクニックを使って、画像なしでもデザイン面で遜色ないサイトが実現可能です。
また、画像書き出しの手間が省けるのも嬉しいところです。

CSSで実装する

以下は、CSSだけで実装できる代表的な装飾たちです。

• 背景のグラデーション
• ボックスシャドウ
• テキストシャドウ
• 角丸
• 矢印
• 吹き出し

この辺のテクニックについては、弊社スズキリュウスケが小ネタ集をご紹介しておりますので、ご参考にどうぞ！

余談：最近はまったこと

何百件単位のリストをページ分割せずに徐々に1ページ内に表示するという案件を担当した際、手持ちのAndroid2.3端末だと、ある程度の件数を読み込むとブラウザが落ちるという現象が発生していました。
モロモロ検証を行ってみたところ、以下の指定が問題でした。

<section class="aaa">
    <div class="bbb">
    .
    .
    .
    </div>
</section>

.aaa {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #CCC), color-stop(0.00, #FFF));
    .
    .
    .   
}
.bbb {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #000), color-stop(0.00, #333));
    .
    .
    .
}

そう。重ねたコンテンツそれぞれの背景にグラデーションを指定していたのです。
いくら画像をリクエストしてないといっても、リストのような繰り返しされるコンテンツに指定した場合、その分だけグラデーションを描画しているわけですから、重くなるのも当然。
描画処理に耐え切れなくなったんだか、面倒くさくなったんだか、端末にずいぶんと無理をさせていたようです。

アイコンフォントを使う

いままで画像で用意していたアイコンを、フォントとして表示するテクニック。
svgファイルなので、拡大してもきれいなまま、大きさも自由に指定できるので便利です。
配布されているものを使ったり、自作することも可能です。

• Font Awesome

また、アイコンだけでなく文字のほうでもWebフォントを使えば、画像なしでデバイスフォントの味気なさから脱することが可能です。
見出し等の重要なポイントで使うのが効果的ですね。
欧文が主流ですが、和文も有料であれば結構あるようです。

• Google Font
• Font Squirrel

CSSスプライトを使う

極力画像を使わない方法を模索しても、デザイン上まったく使わないということはなかなか難しいです。
CSSスプライトを使って、画像はまるっとまとめて呼び出してしまいましょう。
主にアイコンや、PCサイトでもボタン画像によく使われるテクニックですね。

• アイコン画像などをCSSスプライトにまとめる方法

画像をいくつかまとめてスプライト画像として書き出した場合、その画像の容量がひとつひとうの合計より大きい場合があり、これって意味あるのだろうか？などと疑問に思ったりもしましたが、要はHTTPリクエストを減らすということ。
前述の通り、小さな画像でもひとつひとついちいち呼び出しているとページ表示遅延の原因になります。

もろもろミニマイズ

納品時には、画像の最適化はもちろん、CSSやJSも必要に応じてミニマイズ化したほうが良い場合もあります。

• JPEGmini
• ImageAlpha

まとめ

当たり前のことですが、最初にイメージを持ってから取りかからないと、後から破綻すること必至。

「Don't think, feeeeeeeeeel!」

とトラックスーツのあの人は言っていましたが、やはりコーディングに関しては、

「Think!」

ということで、どうぞよろしくお願いします。