Webサイトのパフォーマンスを改善する3つのテクニック ｜ SiTest (サイテスト) ブログ

あなたは自分の、または自社のWebサイトの表示が遅く感じたことはありませんか？
サイトの表示が3秒を超えると40％のユーザーが離脱すると言われており、優れたUXを実現するためには1秒以内に収めなければならないと言われております。
またYahoo!のDEVELOPER NETWORKによるとユーザーのWebサイトの表示の待ち時間の80％は外部ファイルの読み込みに掛かっているそうです。
そこでサイトの速度改善のため主にHTTPリクエストの回数を減らす方法を考えていきたいと思います。

Webサイトのリクエストで特に多いのが画像ファイルではないでしょうか？
画像ファイルのリクエストを減らす手法として有名なのがCSSスプライトです。
CSSスプライトとは複数の画像を一つにまとめCSSで背景として表示し背景位置を指定することで出したい画像を出し分けていきます。
概要だけですとかなり複雑に聞こえますし、実際画像の加工から背景の座標の指定と結構面倒くさいです。
しかしCSSスプライトを生成してくれるWebサービスも多数あり、それらを利用すればかなり使い勝手はいいです。

では画像をdata:image/でbase64でインラインで記述するのはどうでしょう？
この場合通信は一切発生しませんが、base64によるインライン記述の欠点として通常の画像ファイルよりファイルサイズが大きくなってしまう点とブラウザキャッシュが効かない点が挙げられます。
画像サイズが大きくなればなるほどこの欠点も大きくなってきますのでやはりアイコンなどの小さなファイルに使うくらいにとどめておくのいいでしょう。
また後程触れますがブラウザキャッシュを効かせるならCSSに書いてしまうことも考えられます。

jsファイル cssファイルは保守性から複数のファイルに分けてそれぞれ読み込むことが多いと思いますが、これらは一つにまとめて通信の回数を減らすのが良いとされています。

ただし共通化したファイルと個別ファイルを一緒にしてしまうとブラウザキャッシュが効かず2ページ目以降の閲覧速度が落ちてしまいます。
同じ記述のファイルはなるべくキャッシュさせておき個別ファイルをまとめる程度にとどめておきたいです。

またCSSを一つにまとめる方法として@importを使う手段もあります。
しかし複数ファイルを一つのファイルにまとめられるので非常に便利ですが、@importもHTTPリクエストが発生しており通信の回数を減らすという目的にはマッチしません。
しかも@importはレスポンスを受け取ってから次の@importを実行するので複数linkタグを記述するより読み込みに時間が掛かってしまいます。

ですのでできれば@importは使わず使うならCSSプリプロセッサの@importを使用するのが良いでしょう。

ファーストビューにくるコンテンツをとにかく素早く処理することでユーザーのストレスを軽減できます。
ファーストビュー部分のCSSはインラインでheadに読ませてしまい、外部ファイルの読み込みは非同期で行なう。

またCSSは解析の過程でセレクタの右から要素を探していきます。
例えば

section p.main span.sub

のようなコードがあったとして最初にspan.subの要素をすべて探します。その後親要素に遡ってp.mainがあればさらに遡ってsectionがあれば晴れてスタイルが適用されます。
つまりCSSの解析を素早く行なうにはシンプルなセレクタ構造にするべきなのですが、最初に書いたとおりユーザーの待ち時間の80%はファイルの読み込み時間であり最近のブラウザの性能ですとCSSの解析に掛かる時間はあまり重要視されていません。

上記の他にファイルサイズを小さくする小ネタとしてhtmlのタグのうち閉じタグを省略できるタグがあったり、画像ファイルをロスレス圧縮することでサイズを小さくすることができます。

しかし本記事で触れてきたようにファイルサイズを減らすことよりもリクエスト回数を減らす方が効果は高いと思います。
まずはリクエストの回数を減らし読み込み時間2秒を目指してみてはどうでしょう？