JavaScript・CSSファイルのダウンロードを最適化する方法を教えてください。(PHP)

Question

PHPを使っているのですが、JavaScript・CSSファイルのダウンロードを最適化する方法を教えてください。

私が運営しているウェブサイトのページはjQueryとJSONを使っていて、ほぼ全てのページが同じCSSファイルを使っています。

最初のページはユーザーのログインページです。ユーザーがユーザー名とパスワードを入力するのには時間が掛かってしまいます。なのでユーザーセッション全体のためのJavaScript・CSSファイルのダウンロードをログイン中に済ませてしまいたいと思っています。

すべてのページでヘッダーを同じにしていますが、どうしたら最適化できますか。

Answer 1

対応方法としては、document.load後にjs/cssファイルを動的に読み込むのがいいと思います。

ログインページの読み込みが遅くなることはないし、ユーザーがログインしたときにはjs/cssファイルはユーザー側にキャッシュされるのでお勧めです。

また、読み込みを早くしたいのであれば、document.readyに変えてみてください。

以下のコードを使ってみたらどうでしょうか？
`
$(document).load(function() {
function preloadFile(filename, filetype){

//JavaScriptファイルの読み込み
if (filetype == "js"){
var fileRef = document.createElement('script');
fileRef.setAttribute("type","text/javascript");
fileRef.setAttribute("src", filename);

//CSSファイルの読み込み
}else if (filetype == "css"){
var fileRef = document.createElement("link");
fileRef.setAttribute("rel", "stylesheet");
fileRef.setAttribute("type", "text/css");
fileRef.setAttribute("href", filename);
}

document.getElementsByTagName("head")[0].appendChild(fileRef);
}

//実際の使用例は以下の通りです。
preloadFile("hoge_script.js", "js");
preloadFile("hoge_huga_js.php", "js");
preloadFile("huga_style.css", "css");
});
`