ブラウザでページを表示するには、初めのHTMLファイルの通信が必須です。 追加で通信されるCSSやJavaScript、画像ファイルなどが、通信回数の削減対象になります。通信回数の削減方法は、3種類あります。
- ファイルを1つにまとめる(bundele処理)
- HTMLファイルにインライン化させる
- 画像を遅延読み込みする(Lazy Load)
CSSやJavaScriptのbundele処理とは
CSSやJavaScriptはファイルサイズを減らすため、Minfy圧縮・gzip圧縮を利用します。Minfy圧縮とbundele処理は順番はどちらでも構いませんが、gzip圧縮は最後に処理しましょう。
「shrinker」などのオンラインサービスを使用すると、結合したいファイルをアップロードすると、全て1つのファイルにまとめてくれます。
画像bundele処理とは
画像のbundele処理では、利用する画像をまとめて配置して、スプライト画像からCSSで各画像を抽出して表示させる「CSSスプライト」と呼ばれる手法があります。1枚の画像ファイルのため、初回の通信量は大きくなってしまうことに注意が必要です。
スプライト画像はimg要素と違いalt属性を付与できません。画像単体として検索エンジンに認識されないので、画像検索結果にも反映されません。 そのため、意味を強く持たせたい画像やイラストには、スプライト画像には含めないで、個別にalt属性を付与した方がSEOとして得策です。
CSSスプライトのスプライト画像には、SEO上の重要度の低く、ファイルサイズが大きくならないアイコン画像などが適しています。
PNGやJPEGなどのラスタ形式だけでなく、ベクトル形式のSVG画像も同じくスプライト処理が可能です。
HTMLファイルにインライン化させる
外部ファイルをHTML内部に直接記述して、通信の発生を防ぐインライン化の方法を紹介します。
テキストファイルのインライン化
CSSやJavaScript、テキストファイルであるベクトル形式のSVG形式の画像は、そのままHTMLでインライン記述が可能です。 テキストファイルをHTML内にインライン化することで、外部ファイルを取得する通信をなくせます。
テキストファイルのインライン化のデメリット
テキストファイルのインライン化には、デメリットがあります。
- HTMLファイルサイズの増加に繋がる
- テキストファイルごとにキャッシュできなくなる
- スクリプトファイルが複数ファイルに分散し、管理コストがかかる
複数回読み込まれる可能性がある共通のCSSやJavaScriptはインライン化せずに、ファイルのまま読み込ませる方が適切でしょう。
画像のインライン化
ラスタ形式の画像はテキスト情報ではないので、事前にテキスト化する必要があります。 画像のテキスト化には「Data URI scheme」を利用します。このスキームでは、64種類の英数字・記号で表されるテキストデータに変換=エンコードして記載されます。
画像のインライン化のデメリット
インラインイメージのデメリットを紹介します。
- 元画像ファイルと比較して、インラインイメージはサイズが約30%増加する
- 画像データ単体でキャッシュされない
インラインイメージは、ファイルサイズが小さく、かつ1回しか表示されない画像ファイルに適しています。実際、Googleは、検索結果画面に表示される画像にインラインイメージを利用しています。
通信回数の削減(画像の遅延読み込み・Lazy Load)
画像ファイルのみに適用されますが、ユーザーが目にしない不要な画像をダウンロードさせないために、画像ファイルの遅延読み込み(Lazy Load)を紹介します。
Lazy Loadとは、ユーザーが表示画面をスクロールして、画像が表示領域に入ったときに、初めて画像をダウンロードする仕組みです。 画面外の画像はダウンロード事態が開始されないので、通信量・通信回数の両方の削減に繋がります。
Lazy LoadのGooglebot対応
Lazy Loadのデメリットは、ページをスクロールできないGooglebotでも同様に、画像ファイルが読み込めないことです。 Googlebotに認識されないからといって、検索順位にマイナスの影響はありませんが、画像検索で掲載されなくなります。掲載されるためには対応が必要です。
- noscript要素
- 構造化マークアップ