コードの圧縮や外部ファイル化とページの読み込み速度について

なぜ、ごちゃごちゃしてるのか？ぱっと気づくのがこの2点です。

• 改行やスペースがほとんど使われていない
• CSSやJavascriptが外部化ファイル化されていない

Googleとしてはソースがきれいなことよりも、読み込み速度を速くすることでユーザーのストレスを軽減したり、ファイルサイズ小さくすることでサーバーへの負荷を減らしたりすることの方が重要だと思います。

もちろんアップする前にこのような状態にしているだけで、それまではきれいに書かれているはずですが。

ということで、「コードの軽量化」と「外部ファイル化」の2点について考えてみます。

コードの軽量化について

HTML、CSS、JavaScriptなどのコードは、改行やスペースを使わずサイズを小さくした方が読み込みは速くなります。

これは当然ですね。

コードの見やすさよりも読み込み速度やサーバーの負担軽減を優先するなら、できるだけファイルを軽量化する方がいいといえます。

で、コードの軽量化にはこのサイトをよく使っています。

Compress javascript and css

この手のサイトは他にもありますが、これが一番気に入ってます。HTMLも大丈夫です。

ちなみにいったん軽量化したCSSは、「ProCSSor - Advanced CSS Prettifier」できれいに整形してくれて見やすくなります。

コメントが削除されたり、JavaScriptで動かなくなる場合もあるなど注意点もありますが、コードの軽量化はしておいて損はないです。

ただ、後で編集しなおすときに分かりにくいので、圧縮する前の状態もちゃんと保存しておきましょう。

外部化ファイル化について

CSSやJavaScriptは外部ファイルにした方がいいのか、HTML内に記述した方がいいのか。これは状況によって違ってきます。

HTTPリクエスト数を減らす

Web高速化の基本として、まずHTTPリクエスト数（サーバーから取得するファイル数）を減らすということがあります。

CSSスプライトなんかもHTTPリクエストの数を減らすことを目的としていますね。サイズを小さくするという意味もありますが。

では、なぜHTTPリクエストを減らす必要があるのか。オーバーヘッドというものがあるからです。

例えば20キロバイトのファイルを2つ呼び出す場合と40キロバイトのファイルを1つ呼び出す場合だと、一般的に後者の方が速く表示されることになります。

この考え方でいうとCSSやJavaScriptは外部化せずにHTMLにそのまま記述するのが一番よいということになります。Googleのトップページがまさにそうですね。

しかし、必ずしもこれが正解というわけではありません。ブラウザのキャッシュの存在があるからです。

ブラウザのキャッシュ

ブラウザには1度度読み込んだファイルを保存するキャッシュという機能があります。

a.htmlというページとb.htmlというページがあって、ともに同じCSSを使っているとします。そして、a.htmlを見た後にb.htmlを見るとします。

a.htmlを読み込むスピードは、CSSを外部化せずHTML内に記述したほうが速くなります。

しかし、CSSが外部ファイル化されていると、a.htmlで表示する際に読み込んだCSSファイルがキャッシュされていますので、b.htmlを読み込むスピードはHTML内に記述するより外部ファイル化する方が速く表示されます。

多くのページで同じCSSを使っている場合、HTML内に記述してその都度読み込むより、CSSを外部化させる方がよいといえます。

トップページだけ他のページとまったく違うレイアウトで、そこで使われているCSSが他ではまったく使われていない場合だとHTML内に記述した方がよいといえます。

続いてCSSやJavaScriptを外部化させる際に気をつけたいことを紹介します。

外部ファイルを1つにまとめる

まず、CSSやJavaScriptの外部ファイルが複数ある場合、1つのファイルに統合した方が速くなります。これは先ほどの「HTTPリクエスト数を減らす」で説明しましたね。

共通して使うCSSやJavaScriptは、できればそれぞれ1つのファイルにまとめましょう。

CSSとJavaScriptの読み込み順を適正化する

様々な理由から複数のCSSやJavaScriptを読み込む必要がある場合もあります。すべてのページで読み込むCSSファイルと、一部のページでしか読み込む必要がないCSSファイルがあるときなどです。

そんな場合、読み込む順序に注意する必要があります。

<link rel="stylesheet" type="text/css" href="a.css" />
<script type="text/javascript" src="a.js" />
<script type="text/javascript" src="b.js" />
<link rel="stylesheet" type="text/css" href="b.css" />
<link rel="stylesheet" type="text/css" href="c.css" />

このように記述すると読み込む順番はこのようになります。

もうお気づきかと思いますが、もっと効率のいい並べ方があります。

<link rel="stylesheet" type="text/css" href="a.css" />
<link rel="stylesheet" type="text/css" href="b.css" />
<link rel="stylesheet" type="text/css" href="c.css" />
<script type="text/javascript" src="a.js" />
<script type="text/javascript" src="b.js" />

このようにすればCSSは3つ同時に読み込みます。ちなみにJavaScriptは同時に読み込むことができません。

並べ替えるだけですので、ぜひチェックしてみてください。

できれば外部JavaScriptは後ろに

ちょっとそれますが。

ヘッダーにあるJavaScriptの読み込みに時間がかかってしまい、後にあるHTMLの読み込みが始まらずなかなか表示されないなんてことがあれば、その間にユーザーは離れてしまうかもしれません。

全体を読み終わるまでの時間は同じかもしれませんが、全体の表示にかかわる部分を先に置いて、表示に関係の薄い部分を最後に持ってくるのも有効です。

最後に

ということで、コードの圧縮やCSS、JavaScriptの外部ファイル化とページの読み込み速度について説明してみました。

以前も紹介しましたがこんなこともいわれています。

• Googleによるとページの読み込みが0.5秒遅くなると、検索数が20%減少する
• Amazonによるとページの読み込みが0.1秒遅くなると、売り上げが1%減少する

ちょっとした違いでも影響は大きいようです。簡単にできることも多いのでぜひお試しください。

とはいうものの、どれくらい違いがあるのか？という疑問を持たれた方もいるかと思います。

これについては今度あらためて検証したいと思います。