イメージが多すぎます。ウェブサイトの速度が遅くなります

Question

イメージギャラリーを作成しようとしています。スクロールバーが粗くなり、20種類の画像を追加しようとするとスローダウンします。助言がありますか？？

Answer 1

jQueryを使用して画像を遅延読み込みしようとします。ここにプラグインがあります：http://www.appelsiini.net/projects/lazyload

遅延読み込みを使用した例：https://www.lunatickets.co.uk（ページをスクロールして画像を見る）

また、ブラウザの画像のサイズが変更されていないことを確認してください。ウェブ用に最適化されていることを確認してください！

Answer 2

• あなたは幅/高さがあなたのimgタグに属性を追加確認してください - それはそれらをロードするように、他の 賢明なブラウザ/ウェブサイトのレイアウトは、「周りのジャンプ」します。

• 画像を挿入する場合は、画像をロードする前に適切な幅（ ）にサイズ変更してみてください。 が大きい画像を小さく表示するようにサイズ変更していると、ブラウザの動作が遅くなります。

Answer 3

一度にすべての画像を読み込まないようにしてください。

スライドショーはhttp://sandbox.scriptiny.com/slideshow/のように、表示された画像と次の画像の一部だけを読み込みます。 最後に使用したギャラリーに現在の画像と次の10枚の画像がロードされました。私はその名前を覚えていないが、それはそれを行う方法だと思う。

Answer 4

• あなたはwidthとheight属性を追加することを確認してください。私のウェブページに追加したときに何らかの理由でSafariとChromeで少し速く読み込まれましたが、他のブラウザでは違いはありませんでした。

• また、画像lazy loadingを試すこともできます。それは本当に違いを生みます。

• イメージのサイズをウェブページに表示するサイズに変更してください。

Answer 5

S3、Flickr、Picassoで画像を保存してみましたか？彼らのサーバがHTTP要求のヒットを受けさせるようにする

Answer 6

あなたの質問はあいまいです、それは画像やスクロールバーが遅いですか？

イメージの場合：

イメージのサイズをCSSの高さのプロパティで決して変更しないでください。これは画像全体を読み込み、非常に遅くなります。画像をアップロードする前に画像のサイズを変更するか、アップロード時にサムジェネレータでサイズを変更してください。

画像が小さい場合（100ピクセルの高さまたは幅より小さい場合）、サムを生成する際に画像の品質を低下させることができるため、ファイルサイズは小さくなりますが、目立つことはありません。

正しいファイル形式を使用してください。 - アニメーション ためのGIF - ロゴやアイコン のような小さな取るに足らないグラフィックスのためのPNG形式 - JPG画像

のような高品質のグラフィックスのためのサーバー上でそれを送信する前にコンテンツをgzippingていますか？

AWS S3のように画像にCDNを使用します。ただし、画像を表示する前にflick/picassaを使用しないでください。これははるかに遅くなります。 CDN（AWS S3）だけを使用すると、ほとんどのWebホストと比較して待機時間を50〜90％短縮し、クイックルックアップ用に最適化されているため、現在のホスティングより優れています。

ブラウザがキャッシュするドメインのDNSルックアップが行われると、1つのCDNのみを使用します。

サイトがクッキーまたはセッションを使用している場合は、イメージが別のURL（サイトのサブドメインになる可能性があります）に保存されるため、各イメージリクエストでクッキーとセッションデータが送信されません。

グラフィックスが再利用される場合は、ブラウザがそれらをローカルにキャッシュできるように、タイムアウトパラメータを設定します（将来2〜3ヶ月）。

編集：ウェブページのオンデマンド/可視性に画像を読み込むことは非常に良い方法です。スクロールバーの場合

：

カスタムスクロールバーおよびまたはカスタムスクロールイベントを使用していますか？ もしそうなら、あなたは、あなたのサイズ変更イベントが発生する頻度についてのしきい値（私は100msを推奨します）を設定したいかもしれません。または、イメージがロードされたときにシナリオ内にあるかのように、イメージをロードした後に手動でresizeイベントを発生させます。