ページの読み込み速度を向上させるための画像の読み込み時のベストプラクティス
ページの読み込み速度の最適化に取り組んでいます。以下にいくつかの分析を示します。
画像は、合計サイズ（1.1MB）の65％しか占めていませんが、最も遅い読み込みアセットである時間の96％であることに注意してください。
画像を考慮して、読み込み速度を最適化するための推奨プラクティスであるを知りたいです。
私たちがすでに適用しているテクニックのいくつか：
- 画像圧縮
- cookieのないドメインとCDNでホストされている画像
- spritingできるすべてsprited
- httpヘッダー：
keep aliveおよびExpiresから1年。
免責事項： throughtheavailabledocumentation 、私は作成していない画像の読み込みの最適化に焦点を当てることにより、重複した質問または主観的な質問。
スケーリングされた画像のみを提供します。サーバー側で画像を複数のサイズに縮小し、必要に応じて拡大した画像を提供できます。 WordPressは、このタイプの画像処理のよく知られた例です。
Pingdom.comのツールはある程度正確なデータを提供しますが、最終的にはエンドユーザーのブラウザーに集約されるため、pingdomが実行するテストでは正確なデータが提供されないことを覚えておく必要があります。ブラウザはこのようなことを別の方法で処理します。
質問に直接対処するには画像の保存場所と方法に関する詳細は省略します。画像をCDNに保存すると、テスト結果が劇的に向上することを経験しました。本当に本当に好きです。
私はあなたの画像が全部で1MBである理由を理解できないことを認めなければなりません、これはどのような非常識なウェブサイトですか？適切に最適化および圧縮された平均20kbのpngファイルでは、ロードする必要のあるイメージのたわごと（私のフランス語をご容赦ください）が必要です。
ウェブサイト上の画像に関して、非常によくある間違いは、デザイナーが画像を最小限の圧縮で絶対に保存する必要があるという信念を持っていることです（音楽のFLACを考えてください）。画像で説明しましょう。
この画像 は、サイズが171KBの「100％品質」で保存されます。 この画像 は、サイズが42KBの「60％」品質で保存された最適化バージョンです。
個人的には、違いはわかりませんが、最適化された圧縮バージョンを使用することで帯域幅を75％節約できます。これらの画像はjpgですが、すべての形式でほぼ同じです。
5分以内に、この問題がある少なくとも10のWebサイトを見つけることができます。デンマークの新聞BT.dkは、画像を最適化することで読み込み時間を50％改善したと言われています（そして、それらにはloooooadsがあります）
このトピックにさらに興味がある場合は、ここに それに関するすばらしい記事 があります。
1番目：画像を最適化する：サイズを小さくする、結合する、または可能であれば削除する
2番目：CDNからのサーバーイメージ
3番目：Cookieを避けるために、サイトのサブドメインではなく、複数のドメインからのサーバーイメージ
4番目：「lazy loader」を使用して、スクロールで画像をロードする