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

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

Webサイトの高速化ルール12　スクリプトの重複に気をつける! (Yahoo! developer netoworkより翻訳)

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

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

Webサイトの高速化ルール12　スクリプトの重複に気をつける!

July 23, 2007

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

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

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

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

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

ページ内に同じスクリプトファイルが指定されていれば、当然レスポンスは遅くなります。普通そんな間違いはしないだろうと思うかも知れませんが、U.S.トップ10のサイトを調査してみたら、スクリプトファイルが重複しているサイトが2つありました。

そんなことになってしまう要因としては、開発チームの人数が多過ぎたり、スクリプトの数が非常に多くて間違えやすくなったりすることでしょう。スクリプトの重複は不要なHTTPリクエストを増やし、無駄な実行を引き起こしますによってレスポンスが悪化することになります。

不要なHTTPリクエストはIEでは発生しますが、Firefoxでは発生しません。IEではもし同じ外部スクリプトファイルが含まれて、それがキャッシュされていなければ、ページのロード中にそれをリクエストしてしまいます。もしそのスクリプトがキャッシュ可能でも、ページがリロードされれば、余分なHTTPリクエストが発生します。

無駄なHTTPリクエストに加えて、複数回、スクリプトを評価する時間も無駄です。この無駄なJavaScriptの実行は、スクリプトがキャッシュ可能であるかないかに関わらず、IEでもFirefoxでも発生します。

同じスクリプトが2度含まれてしまうようなことを避けるために、テンプレートシステム中にスクリプトの管理モジュールを実装しましょう。例えば以下のようなスクリプトをインクルードする場合、

PHPで"insertScript"というファンクションを作成します。

<?php insertScript("menu.js") ?>

おなじスクリプトが何回も挿入されてしまうのを避けることに加えて、このファンクションは、スクリプトに関する他の問題（依存性の問題や、Expiresヘッダーでキャッシュ期日を遠い未来に指定するような場合にファイル名にバージョン番号を挿入したりするようなケース）も取り扱えます。

Steve Souders

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

そうですか。「気をつけてね」という感じでしょうか。

ちなみにinsertScriptはこんな感じだそうです。

PLAIN TEXT

CODE:

function insertScript($jsfile) {
if ( alreadyInserted($jsfile) ) { return; }
pushInserted($jsfile);
if ( hasDependencies($jsfile) ) {
$dependencies = getDependencies($jsfile);
for ( $i = 0; $i <count($dependencies); $i++ ) {
insertScript($dependencies[$i]);
}
}
echo '
<script src="http://www.inter-office.co.jp/wp-admin/%5C%27%20.%20%0A%20%20%20%20%20%20%20%20%20getVersion%28%29%20.%20%5C%27" type="text/javascript"></script>
";
}
?>