0

読み込みが非常に遅いこの Web ページがあります: https://www.mlh-shop.com/press/233

そのスライダーには 185 個の小さな画像があります。ロードを高速化するために最適化するにはどうすればよいですか?

いくつかの画像だけを読み込んでページを表示し、他の画像をバックグラウンドで読み込むことはできますか?

4

4 に答える 4

3

ドメインごとに許可される同時接続数に関して、ブラウザーには組み込みの制限があります (最近のブラウザーのデフォルトは 8 です)。これを高速化する 1 つの方法は、別のドメインから画像を読み込む CDN (コンテンツ配信ネットワーク) を使用することです。

もう 1 つの問題は、ページをできるだけ速く使用できるようにする方法です。このために、最小数の画像のみがページ HTML で読み込まれ、残りは JavaScript を使用して動的に読み込まれる「遅延読み込み」を使用します。画像のリストを送信し、ページの読み込みが完了してから取得を開始します。

これは読み込み時間を実際に「高速化」するわけではありませんが、バックグラウンドで画像を読み込みながらページをすぐに使用できるようにします。

これら 2 つの手法を組み合わせて、パフォーマンスを向上させることができます。

于 2012-09-17T20:16:22.983 に答える
1

私はあなたのサイトを Google Page Speed Analisys で調べました。

  1. 画像は HTML または CSS でサイズ変更されます。スケーリングされた画像を提供すると、3.4MiB を節約できます (29% 削減)。
  2. 画像を最適化 (ファイル サイズを圧縮) すると、サイズを 2.6MiB (22% 削減) 減らすことができます。
  3. キャッシュ可能なリソースの鮮度の有効期間は短いです。リソースの有効期限を少なくとも 1 週間先に指定してください...

#3 では、.htaccess ルールを使用して、ダウンロードしたアセットの有効期限を設定するだけです。これを行うための単純なガイドは次のとおりです。http://css-tricks.com/snippets/htaccess/set-expires/

乾杯！

于 2012-09-17T20:21:27.977 に答える
0

できることの 1 つは、スライダー内のすべての画像を 1 つの大きな静止画像に前処理することです。

于 2012-09-17T20:13:27.700 に答える
0

遅延読み込みを使用する必要があります。すべての img 要素を PHP で出力するのではなく、後でクライアント側で JavaScript を使用して作成します。ユーザーがJSを無効にしている場合、スライダーはすでにJavaScriptを使用しており、とにかく動作しないため、これはあなたのケースでは実際のユーザビリティのペナルティはありません.

于 2012-09-17T20:14:32.593 に答える