ページの読み込み速度に関する専門家のアドバイス

Question

私のCSSとJSリソースはすべて、私の CSSとjavascriptファイルを含む1つのベースファイルにロードされています。現在、この単一のベースファイルはすべてのWebページに含まれています。

また、ウェブサイトには、これらのリソースを使用している他の多くのPHPページが含まれています。 これは、私がPHPページにアクセスするたびに、すべてのリソースが何度も何度も読み込まれることを意味します。 ...だから、すべての4つのファイルがそのページのロードされます...私はPage1.phpを訪問すると言うことができます

をfile1.cssである、FILE2：

ここで、この図を見てください。 .css、file3.js、file4.js ....

ここで私はPage2.phpにアクセスしたとしましょう。同じことが再び起こります。その4つのファイルすべてがそのページのために読み込まれます。 .. file1.css、file2.css、file3.js、file4.js ....

Page1.phpの読み込み時間を計算すると、結合された読み込み時間と同じになります以下のすべての物事のE：

1） - file2.css
4のためのロード時間 - file1.css
3）のためのロード時間 - Page1.php
2）に書かれたHTMLとPHPのためのロード時間） - file3.js
5）のためのロード時間 -

file4.jsのためのロード時間だからここに私の質問は次のとおりです。

1） - どのように私は、ページのロード時間を改善することができますか？

（私は、コードをきれいにするために、すべてのスタイルとjavascriptを1つのファイルに含めることをお勧めします....しかし、ベースファイルには存在しないjavascriptやcssファイル他のページで使われています... Page3.phpにfile2.cssとfile4.js ....が必要ないと言うと、私のリソースを無駄にして、file2.cssとfile4をロードしようとしているページの読み込み時間を増やすだけです。 jsを読み込みます）。

2） - ここでは、奇妙なJavascriptファイルが100万レコードを処理し、「Page1.php」の結果を表示する別のシナリオがあるとします。今、この処理とロードには明らかに時間がかかります。

（今5秒間ページを訪問するたびに待っている想像... ができますあなたがPage2.phpを訪問し、何のために5秒間すべてを待たなければならないと言う.... 、あなたがミスを犯したからといってあなたのベースファイルにその奇妙なjavascriptファイルを含める...そしてベースファイルは他のすべてのページにリンクしているので、ページを訪れるたびに5秒間待たなければなりません）。

他のページとは何の関係もないので、その奇妙なjavascriptファイルはPage1.phpだけをロードし、他のページはロードしませんか？ここにベストプラクティスは何ですか....

Answer 1

GulpまたはGruntのように、1つのファイルにすべてのcssまたはjsを縮小、醜く圧縮、連結することができるタスクランナーがたくさんあります。

また、クライアントに適切に設定されたキャッシュの有効期限をサーバーに設定しておくと、既にファイルがあることがわかり、再度ダウンロードする必要はありません。

多くのWebフレームワークとライブラリ（jQuery、Bootstrap、Angularなど）は、CDNを使用しています。だから、あなたのクライアントが既にダウンロードしているとしましょう、別のサイトからjquery、それはあなたのサイトにダウンロードしようとしません。