SEO対策にとってもページ読み込み速度は重要な要素になります。単に画像を圧縮するだけでは十分な施策と言えません。ここではレスポンシブデザインを導入するときに併せて採用したい幾つかの手法を紹介します。

【目次】

  1. HTTPリクエストを最小限に抑える
  2. 読み込み順を変える
  3. HTMLをスリム化する
  4. 外部ファイルを圧縮する
  5. DNSルックアップを減らす
  6. HTMLの構造を簡素化する。
  7. エラーを無くす
  8. おわりに

1.HTTPリクエストを最小限に抑える

応答時間の80％はページ内のすべてのコンポーネントをダウンロードする時間に費やされます。特にHTMLファイル読み込み後の複数の画像の要求・応答に多くの時間を費やされます。

要求する画像の数：ファイル数を減らすだけでも速度アップに繋がります。

複数のファイルを１つにする。

・小さいが多くあるアイコン類の画像を1枚にして、CSSスプライトで表示させる。
アイコンのような極めて小さなファイルの場合、ファイルのダウンロード時間よりもサーバへの要求・応答時間の方が長くなる場合があります。こうした無駄を省くためにパーツを1枚画像に纏めてCSSスプライトという技法で必要なエリアだけを表示させる方法。

[参考]CSSスプライトについてあれこれ。
http://lopan.jp/css-sprites/

・@importを使わない。
1枚のCSSから@importを使って、更に複数のCSSを読み込むのは、その分、読み込み時間が制約されることになります。長くなっても1枚のCSSの方が最終的なレンダリング時間では優位になります。

・CSSやJavascriptのファイル数を減らす。
汎用性と効率性を維持するために、極力ファイル数を減らす努力をしましょう。

・イメージマップを使う。
大きな複数のバナーがある場合、イメージマップを使う事で、ファイル要求数を減らすことができます。細かなナビゲーションには向きませんが、大きめのバナーなどであれば、イメージマップの使用も検討しましょう。

・インライン画像を使う。
HTML5がレンダリング可能なブラウザが主流なら（例えばスマートフォン向けとか）、インライン画像を使うのも良いアイデアです。IE6~8は対応していないので、全てのデバイスというワケには行きませんが@mediaと組み合わせれば効率よくイメージをCSS内に配置可能になります。

data:image/png;base64

インラインで画像をHTMLに埋め込むData URLスキーム
http://www.softel.co.jp/blogs/tech/archives/2117

2.読み込み順を変える

全体の総量やファイル数は一緒でもブラウザの表示を優先させると体感速度が変わります。ユーザ体験を高めるためには読み込み順にも配慮しましょう。

・CSSのを上部に配置。
<head>直下に<link rel=”stylesheet” type=”text/css” href=” “>cssを配置する。

・</body>直前にJavascriptを配置

<script type=’text/javascript’ src=’http://seo-jump.com/wp-content/themes/twentytwelve/js/navigation.js?ver=1.0′></script>
（※正常に機能するか必ず確認しましょう。）

特にモバイルデバイスのように低速な回線が想定される場合、この手法は効果があります。

3.HTMLをスリム化する

・CSSやJavascriptは全て外部ファイル化する。

この手法の最大のメリットはキャッシュの効果を最大化できる事です。再来訪でコンテンツが更新されてもCSSが更新されていないケースでより高速化されます。（更新されていた場合）HTMLの再読込が発生しますが 外部リンクは固定で頻繁に更新されない場合が多くキャッシュが使用され、無駄が省かれます。

4.外部ファイルを圧縮する（minify）。

・余分な改行、空白、タブ、コメント行などを減らすだけでも大きな効果があります。（難読化）
これをしない理由は、「難読化」、人の目では編集不可能な1行の文字列になってしまうことです。メンテナンスがほぼ不可能であるため、オリジナル→圧縮の作業が必要になります。

[圧縮ツール]
http://compressor.ebiene.de

・画像フォーマットを最適化
gif,Jpeg,PNG8,PNG24はそれぞれの特性があり使用する画像によって最適のフォーマットと最適のサイズがあります。画像生成時にサイズを確認しましょう。透過PNGは古いIEで使用できない、gifは透過＋256色である場合Jpegより肥大化する、Jpegの低品質は軽くなる一方で画質が極端に劣化する等、一長一短があります。

5.DNSルックアップを減らす

・複数のドメインを使用しない。

イメージファイルの参照先などが複数のドメインをまたいでいると、ドメインの参照時間が、そのドメイン数分必要になります。特に理由が無いのに複数のドメインに参照先を分割するのは避けましょう。これらには広告のドメインなども含まれるので、その点も確認しましょう。

6.HTMLの構造を簡素化する。

・シンプルなHTML構造にする。

タグの入れ子関係は複雑にする程、ブラウザの解釈に時間が掛かります。意図していないのに複雑になる場合もあります。例えば広告を貼ると広告の内部が複雑化している、ソーシャルマークのボタン内部の構造が複雑、等です。そうした運用環境を想定すると広告回りや外部ファイルの読み込み部分、Ajaxが入るJavascript部分などは、よりシンプルにしたほうが良いでしょう。

7.エラーを無くす

・404 Not Found を無くす。
404 Not Found は大きく表示を遅らせる原因になります。例えばそれが外部ドメインである場合、DNSルックアップ→サーバ通信→待ち時間→Not Found受信と必要以上に多くのリソースを消費します。

・HTML文法エラーを無くす
文法エラーの多くはブラウザが、問題を補完しようとして、より多くのリソースを消費します。問題を引き起こす原因ともなるので修正しましょう。

・Javascriptエラーを無くす。
Javascriptエラーも多くの無駄が発生します。Javascriptの要求→サーバ通信→ファイルダウンロード→スクリプト実行→失敗→エラーと、こちらも必要以上に多くのリソースを消費します。

・favicon.icoを設置する
favicon.icoは常に要求されます。Not Foundが返されることが多いのですが「設定を忘れる」事が多い、存在すら知らなかったという事もあるでしょう。しかし、ブラウザはバックグラウンドでfavicon.icoを要求しています。真っ先にキャッシュさせましょう。

・空のimgタグを使用しない
<img src=””>はブラウザによって異なる挙動をし、想定外の問題を引き起こします。この書き方は「何も無い」とは理解しません。（※各ブラウザによって挙動は異なります。）

終わりに

今回はベーシックなHTML知識があれば可能なものだけを掲載しました。サーバ技術や最新のPolyfill(ブラウザに合わせて常に最適化する)等、まだまだ多くの速度アップテクニックがあります。それはまたの機会に。

【SEO対策の基礎学習　目次】