スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

Googleのソースを見てみると、何かごちゃごちゃしていています。

web-speed.png

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

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

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

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

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

コードの軽量化について

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

これは当然ですね。

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

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

Compress javascript and css

conmpressor.png

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

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

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

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

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

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

HTTPリクエスト数を減らす

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

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

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

オーバーヘッド : ある目的で処理を実行する際に,目的とは直接関係ない処理。通信プロトコルの場合,データを送受信することが本来の目的だが,アドレス処理や転送処理のためにヘッダーが必要。これがオーバーヘッドである。[出典:ITpro]

例えば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内に記述するより外部ファイル化する方が速く表示されます。

cache1.png

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

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

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

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

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

cssa+cssb.png

共通して使う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" />

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

css-js.png

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

<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は同時に読み込むことができません。

css-js2.png

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

できれば外部JavaScriptは後ろに

ちょっとそれますが。

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

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

最後に

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

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

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

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

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

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

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。