0

プロバイダーのさまざまな製品を紹介するサイトがあります。プロバイダーは、CDNからの画像を提供してくれます。問題は、元の画像サイズよりも小さい画像フレームがあることです（画像サイズもプロバイダーによって異なります）。そのため、HTMLで画像サイズを次のように設定します（すべての画像は200px x 200pxです）。

<img src="image1_Provider1.jpg" width="200" height="200" />
<img src="image2_Provider1.jpg" width="200" height="200" />
...
<img src="image37_Provider8.jpg" width="200" height="200" />

8つのプロバイダーから約300の製品があります。つまり、サイトの読み込みが遅い主な理由は、サイトに300の画像があることを意味します（モバイルでの読み込みが遅いことは言うまでもありません）。今、私はSteve Souders（高性能Webサイトとさらに高速なWebサイト）の両方の本を読み、ページ速度を上げると彼が言うルールを実装しました（実際、最初のページの読み込み速度を上げることができました。画像をキャッシュするため、リロードは非常に高速に行われます）が、それでも主な問題は残ります-画像による初期読み込み速度です。

それで、ついに要点に到達します。私は、すべての画像をサーバーにプルして、次のように操作する（そうする権限があります）という考えを持っています。

  • 画像フレームに完全に収まるように画像のサイズを変更します。したがって、HTMLタグを配置する必要はwidthありません。heightimg
  • jpegtranで画像を最適化する
  • 各プロバイダーイメージを次のように独自のサブドメインに配置します：provider1.oursite.com、、provider2.oursite.comなど...-これらのサブドメインは実際にはラックスペースCDNのエイリアスになります。したがって、ホスト名が異なるため、Chromeで6つの並列ダウンロードが行われます。

これらすべてを考慮すると、画像のサイズは明らかに小さくなります。したがって、私の結論は、サイトの最初の読み込みが速くなり、YSlowやGooglePageInsightsなどのツールでより良い結果が得られるはずです。私が見ている可能性のある欠点は、RackspaceでCDNを使用しているため、帯域幅の増加にお金を払わなければならないことですが、それは管理者にとって問題ではないことがわかりました。

私の質問は、上記が意味をなすかどうかです。私の「とても賢い」可能な解決策の明らかな落とし穴を見落としていたのでしょうか。だから私はこれにかなりの時間を費やさず、最終的に私が間違っていたことを理解するので、同じような状況にあった誰かが彼の考えを投稿できますか？

4

1 に答える 1

2

画像のサイズを希望のサイズに変更するのは素晴らしいことです。先に進み、レンダリングに役立つHTMLディメンションを残します。オーバーシャ​​ーディングには注意してください。2〜4つのドメイン間でのみシャーディングする必要があります。ほとんどの調査では、2が最適であることが示されています。しかし、おそらく実行できる一番の修正は、折り目の上の画像のみを読み込み、ユーザーがスクロールしたときに他の画像を遅延読み込み（JavaScriptを使用）することです。（Y

于 2013-02-11T19:47:20.077 に答える