KOJIKA17

Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法

Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。

Googleでは、0.5秒遅くなると、検索数が20%減少する
amazonでは、0.1秒遅くなると、売り上げが1%減少する

という報告もあるようです。 Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。
今回はWebサイトのパフォーマンスを上げる方法を取り上げます。

パフォーマンスアップの前に

応答時間の限界

  1. 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。
  2. 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。
  3. 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレスを感じ始める。
  4. 10秒以上遅くなると、サイトからの離脱率が高くなる。

Jacob Nielsen博士

数秒の遅延が続けば、ユーザーエクスペリエンスを損なう要因となります。

HTML

head要素のCSS、JavaScriptの並びだけでも、パフォーマンスは変わります。

良いCSS,JavaScriptの配置例です。

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

この場合の読み込み
CSSが全て読み込まれて、JavaScriptが順番に読み込まれます。

悪いCSS,JavaScriptの配置例です。

<head>
<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" />
</head>

この場合の読み込み

上記のように、CSS、JS、CSSの順にすると、JS以下のCSSの読み込みが遅れてしまいます。
JSに遭遇した場合は、並列ダウンロードがブロッキングされ、後続の要素が読み込まれなくなります。

ブラウザの性能が向上してきているので、JSの並列ダウンロードができるようになっていますが、後続の要素をブロッキングする問題が解決されていないIE8などのブラウザがあるため、要素の配置は気をつける必要があります。

画像の種類

画像はサイトのパフォーマンスに関わる大きな部分です。
サイトのパフォーマンスを上げるのであれば、以下のような画像選定基準が良いかもしれません。

  • アニメーションが必要な画像は、GIF
  • 写真やグランジのテクスチャのような色数が多い画像は、JPEG
  • アルファチャンネルを必要とする画像は、PNG-32bit
  • それ以外は、インデックスカラーPNG

画像の特性については以下の記事にまとめています。
その画像形式でいいですか?

CSSスプライト

ページ内で使用する画像を1つにまとめ、CSSのBackgroudで表示させるテクニック。
img要素のHTTPリクエストを軽減させ、サイトのパフォーマンスを向上させることができます。
W3CやYahoo!, Googleでも使用されている方法です。

主にアイコンなどに使用されるケースが多いですが、角丸画像にも応用が利きます。
以下は1枚の画像のみで、制作しています。

CSSスプライト角丸 demo

極端な例ですが、画像をすべてCSSスプライトにした場合、 サイトのパフォーマンスは、確実に落ちます。
CSSスプライトというテクニックは、HTTPリクエストを減らすテクニックであり、ページのレンダリング速度は低下します。サイトのレンダリングを向上させるのあれば、img要素にwidth, heightを指定した方が、ページのレンダリング速度は向上します。
ただし素晴らしいテクニックあることに変わりはありませんので、CSSスプライトを検討するのもありだと思います。

CSSの記述

#wrapper #header #navigation li {
  color:#f00;
}

どこにでもあるようなCSSの記述に見えますが、パフォーマンス的にはよくありません。上記の記述はCSSのセレクタの非効率な書き方です。

SafariとWebkitの設計者であるDavid Hyattは以下の情報を明らかにしています。

How the Style System Matches Rules

The style system matches rules by starting with the key selector, then moving to the left (looking for any ancestors in the rule's selector). As long as the selector's subtree continues to check out, the style system continues moving to the left until it either matches the rule, or abandons because of a mismatch.

Writing Efficient CSS for use in the Mozilla UI - MDN Docs

Googleさんで日本語訳すると

スタイルシステムはルールを照合する方法

スタイルシステムは、(ルールのセレクタ内の任意の祖先を探して)左に移動し、キーセレクタで起動することによって、ルールにマッチ。限り、セレクタのサブツリーをチェックアウトし続けている、スタイルシステムは、それがどちらのため不一致のルールに一致した、または放棄するまで左に移動し続けます。

スタイルシステムがルールを照合する場合、右から左にセレクタを読み始め、調べたツリー構造が一致している限り、スタイルシステムが不一致と認識するか、放棄するまで左に読み続けます。

#wrapper #header #navigation li {
  color:#f00;
}

最初に提示したCSSで説明すると、もしHTMLの中に100個のli要素があった場合、全てのli要素を照合します。
次にツリー構造を辿り、.navigationを照合。
さらに#header、#wrapperの順に照合し、レンダリングされます。

これらから、上記のCSSが非効率であることが分かると思います。
CSSのパフォーマンスを上げるのであれば、該当するli要素に.navigation-listというクラスをつけ、

.navigation-list {
  color:#f00;
}

とした方が、レンダリング速度は上がります。
しかし制作上、非効率で実務的ではありません。
先ほどのCSSを改善するのあれば、場合にもよりますが以下のように不要なセレクタを省くべきです。
特にIDセレクタに関して、ページに1つしか存在しないので、余計な条件は省くべきです。

#navigation li {
  color:#f00;
}

また照合に時間がかかるCSSの書き方は以下のような例が考えられます。

  • * {...}
  • * html .ie6huck {...}
  • div#contents div.breadcrumb a {...}
  • .botton-area input[button] {...}
  • div:nth-child(2n+1) {...}

ブラウザの性能も上がっており、非効率なCSSを書いたからといって、JavaScriptほど明らかにパフォーマンスが落ちているのが分かるわけではありません。
しかし実際はミリ秒単位でパフォーマンスが落ちています。ECサイトなどのCSSの量が多いサイトになると、このパフォーマンスの低下がサイトに大きく影響してくるでしょう。

また以下の例は、CSSのパフォーマンスの観点で見ると、最悪です。
間違っても、このようなコーディングは行わないで下さい。
idとclassを使わないで、HTML5とCSS3でコーディングしてみた。

polyfillを行うことについて

Polyfillとは

最新のブラウザの機能を基準にし、古いブラウザを最新のブラウザに近づけて機能の格差をなくす手段

具体的には、IE6で角丸CSSが使えるようにしたり、IE8以下の環境でもHTML5のheader要素、section要素を使用できるようにすることです。
polyfillは以下のようなライブラリがあります。

これらを使用すると、IE6のブラウザも最新ブラウザ並の機能を有することができるでしょう。
しかしJavaScriptを使用しているため、これらを多用するとWebサイトのパフォーマンスを著しく落とす場合があります。
さらにIE6が入っているPCと、IE9が入っているPCを比較した場合、IE6の入ったPCのスペックがよくない場合が多いのは明らかです。 低スペックのPCで無理やりCSS3の表現などを行えば表示速度が遅くなり、ユーザーに対し、ストレスを与えかねません。

通常のコーポレートサイトを構築する場合などは、polyfillは限定的な使用、または最終手段として活用すべきです。

取り上げたサイトのパフォーマンスを上げる方法のごく一部です。
他にもJavaScriptの非同期、gzipの利用、Data URIなどたくさんあります。
目的に応じて、サイトのパフォーマンスを上げてみてはいかがでしょうか。