私は現在、PHP + MySQL と jQuery を使用して Web サイトを開発しています。これまでのところ、私はローカルマシンでそれを行ってきました。ページを表示すると、画像の読み込みに時間がかかることに気付きました (少し時間がかかりますが、表示されます)。すべての画像は小さいです (PNG は 3 KB 未満)。ここで、ページをロードすると、表示するデータを取得するためにいくつかのデータベース接続が発生します。
この読み込み時間の問題が画像の量に関係しているのか、それとも PHP スクリプト + DB 接続の実行にかかる時間に関係しているのかはわかりません。(私のデータベースにはほとんどデータがないので、このケースは想定しません。)
私の質問は次のとおりです。各ページの最初にすべての画像をプリロードするのは良い方法ですか? jQueryで試してみましたが、うまくいきました。私はそれでどのような欠点が得られるかわかりません。たとえば、そのためには、ページの先頭に jQuery ライブラリを含める必要がありますか? 悪い習慣だと思いました。
これらのPNGがBLOBとしてデータベースに保存されている場合-質問からは明らかではありません-そうしないでください。PHP を介して DB から画像を提供することは、Web サーバーがファイルシステムから直接画像を提供するほど効率的ではありません。画像が特定のレコードに関連付けられている場合は、行 ID に基づいて PNG に名前を付けるだけで、それらの画像を格納する専用のディレクトリで見つけることができます。PHP コードは、ディスク上の PNG ファイルを指す URL を生成するだけなので、Web サーバーはそれらを静的に送信できます。
同じページ内に画像をプリロードしても、何も得られないと思います。どちらかといえば、ブラウザーが同時に取得できるリソースの数は固定数 (通常は 2 ～ 4) に限られるため、全体的なページの読み込み時間が明らかに遅くなる可能性があります。ページの上部に画像をロードする<body>ということは、「スクロールせずに見える範囲」のページの上部に、いくつかの HTTP 接続スロットが解放されるのを待たなければならない他のものがあることを意味します。画像が自然な順序で読み込まれるようにすることをお勧めします。
プリロードは、次の 2 つの状況で意味があります。
画像はデフォルトでは表示されませんが、ユーザーがページを操作するときに必要になると予想されます。この良い例は、ロールオーバーのホバーおよびクリック状態の画像です。
画像はこのページでは使用しませんが、次のページで必要になります。これの良い例は、ショッピング カートのように、あるページから次のページへの明確な進行があるサイトです。
いずれにせよ、 の一番下でプリロードを行うと、<body>他のすべてが最初にロードされます。
これら 2 つの問題に対処したら、サイトでYSlowを実行します。Firebugのプラグインとして始まり、Firefox のプラグインになりましたが、IE を除くすべての主要なブラウザーに移植されました。
YSlow の優れた点は、拡張機能がアクティブなときにページを読み込むだけで、一般的なスローダウンを自動的に検出することです。その後、ページの明確な評価が得られるため、最適化が「完了」したかどうかを判断できます。Aを下回っている場合は、まだ完了していません。:) Web サーバーの既定の構成は、問題の発生を避けるために保守的なため、サイトの評価がDまたはそれ以下であることは珍しくありません。YSlow の警告を修正するのは一般的に非常に簡単ですが、キャッシングやその他の問題を作成しないように注意する必要があります。これが、デフォルトのサーバー構成がこれらのことを行わない理由です。
別の回答では、Google PageSpeedを推奨していました。Chrome と Firefox のプラグイン、サーバー側の Apache モジュール、Google がホストするサービスとして利用できます。YSlowとの比較はわかりませんが、面白そうです。
また、ブラウザーのデバッガーを使用して、リソースの読み込み時間のウォーターフォール グラフを取得することも検討してください。
Firebug では、Net タブでこれを取得します。
Safari では、通常は [設定] で無効になっている [開発] メニューからアクセスできます。必要に応じてオンにしてから、Develop > Start Timeline Recording と言います。これにより、Network Requests インストゥルメントが表示されます。また、[開発] > [Web インスペクターを表示] からアクセスすることもできます。
Chrome で、[View] > [Developer] > [Developer Tools] と言って、[Network] タブに移動します。
IE では、[ツール] > [開発者ツール] > [プロファイラー] を使用して、これの非常に弱い形式を使用できます。ウォーターフォール グラフではなく数値の表を提供するだけなので、情報はそこにありますが、長いバーを視覚的にスキャンして最も遅いリソースを見つけることはできません。
Google のページ スピード プラグインを使用して、読み込みに最も時間がかかるデータを確認する必要があります。画像の個別の読み込み時間も表示されます。
たくさんの小さな png を使用している場合は、それらを 1 つの画像に結合し、css background プロパティを介して表示を操作することをお勧めします。それらはスタイリングの一部であり、情報ではないためです。その場合、いくつかの画像ではなく、1 つだけがロードされ、すべての要素で再利用されます。この場合、1 つのイメージのプリロードも非常に簡単です。
CSS スプライトを使用して、すべての画像を 1 つのダウンロードに結合することを検討したことはありますか? これを行うのに役立つオンライン ツールが多数あり、ページで必要な HTTP 要求の数を大幅に減らすことができます。
画像をキャッシュできるように、画像に正しい Expires ヘッダーを設定していることを確認してください。
最後に、さらなる最適化のヒントを提供できるYSlowをご覧ください。