ecサイト|eコマース|パッケージ|アクセス解析|広告効果測定|Webマーケティング構築・開発

株式会社インターオフィス

Webサイトの高速化ルール8　JavaScriptとCSSは外部ファイルに! (Yahoo! developer netoworkより翻訳)

カテゴリー： Webサイト開発日記, アーキテクチャー

ハイパフォーマンスWebサイトフロントエンドのパフォーマンスの重要性から続いています。

Webサイトの高速化ルール8　JavaScriptとCSSは外部ファイルに!

July 3, 2007

------------------------------------------------------------------------------

http://developer.yahoo.net/blog/archives/performance/より翻訳。

Steve Souders は Yahoo!の「Chief Performance Yahoo!」です。

これは彼の「パフォーマンス改善のベストプラクティス」を書いた一連のブログです。

------------------------------------------------------------------------------

Webサイトの高速化のルールには、外部コインポーネントをどう扱うかに関するものもたくさんあります。
しかし、それらを検討する前にもっとベーシックな疑問について考えましょう。JavaScriptとCSSファイルは外部ファイルとして配置すべきなのでしょうか、それともインラインで埋め込んで利用すべきなのでしょうか？

実際、JavaScriptとCSSファイルは、ブラウザにキャッシュされるので外部ファイルにした方が、ページ表示は速くなるのが普通です。HTML中のインラインのJavaScriptとCSSは、HTMLがリクエストされる毎にダウンロードされます。確かにHTTPリクエストの数は減りますが、HTMLのサイズは大きくなります。他方、JavaScriptとCSSを外部ファイルとした場合は、ブラウザキャッシュされていれば、HTTPリクエストの数は減りませんが、HTMLのサイズを大幅に小さくします。

主なファクターは、JavaScriptとCSSのキャッシュがどれくらい有効かということになります。定量化するのが難しいのですが、様々な手法を使用することでこの要素を測定することができます。ユーザの1セッションあたりのページ・ビューと、ページ横断でのスクリプトとスタイルシートの再利用率によっては、外部ファイルがキャッシュ可能であるという点で大きなメリットになります。

ほとんどのwebサイトは測定上、中くらいの位置になります。そのようなサイトのベストな解決はJavaScriptとCSSを外部ファイルとすることです。
ただし、Yahoo!'(http://www.yahoo.com)やMy Yahoo! (http://my.yahoo.com)のトップページのように例外的にインラインで埋め込んだほうが良い場合はあります。セションあたりのページビューが少ないトップページは、インラインで埋め込んだほうが良い場合もあります。

たくさんのページビューの最初となるトップページでは、インラインによってHTTPリクエストの数を減らしながら、外部ファイルによるキャッシュ効果も得るテクニックがあります。/p>

トップページではJavaScriptとCSSをインラインで使用して、ページがロードし終わったら、動的に外部ファイルをロードするのです。そうすれば、次のページではブラウザキャッシュ上の外部ファイルを利用できます。

Steve Souders

---------------------------------------------------------------------
◆◆訳注◆◆

「ページがロードし終わったら、動的に外部ファイルをロードする・・・・・」のサンプルがありました。
しかしどうでしょうか？かえって無駄な気がします。

PLAIN TEXT

CODE: