CSSの持つ非常に多くの背景画像は、パフォーマンスに影響を与えますか？

Question

一部のユーザーは、自分のサイトが遅すぎることを報告しています そして、私はCSSの背景画像は可能かもしれないと思います 犯人

私は、カスタムビルドシステムを使用してサイトを持っています すべてのCSSを連結するために、CSSスプライトを作成し、それら（YUIコンプレッサー）を圧縮 自動的に（smartsprites）と私はのための9キロバイトのCSSで終わります ページ全体では、これが最後では背景画像のためのすべてのCSSをd含み、それら 約60（同じスプライトに行かないことを確認どのように多くのいくつかの）だった。

私は思っていた場合、ブラウザのデフォルトの動作 （彼らはセレクタに一致する場合）、必要に応じて画像をダウンロードすることです またはそれらすべてをダウンロードしてください。

今のところFirefoxで放火犯は、彼らがすべてダウンロードされていることを示唆しているようです。 どのような技術あなたは私が問題を回避するために使用したいことをお勧めし、または それを緩和ます。

編集： 私は放火犯を読み違え、ダウンロードされている画像はlightviewに属し それが隠されているが、背景画像がDOMに一致している。

Answer 1

いいえ、実際には、マークアップよりもCSSでそれらを置く方が良いでしょう。

画像の呼び出しは、ページをブロックしませんし、イメージがロードされているとして、彼らはCSSを経由してそれらをロードするのは良いアイデアですので、全体的なページにレンダリングされます。この設計は、より柔軟であることは言うまでもありません。

（それは、これらの画像のそれぞれは、帯域幅と、余分なHTTPリクエストを取り上げることは言うまでもない）

Answer 2

デフォルトのブラウザの動作は、時間（すなわち2のhttpリクエスト）の2つのアイテムをダウンロードすることで、あなたが画像をたくさん持っていると思われる場合images.yoursite.comのようにあなたのイメージのためのサブドメインを作成し、並列要求を行うブラウザを見て開始します、あなたはパフォーマンスのいくつかの改善を見ることができます。

Answer 3

（サイドトピック。本当にあなたの質問に答える。しかし、興味深い、あるいは関連するかもしれない。）

私は別の可能な犯人は「一部のユーザーが」常にあなたのサイトには「遅すぎる」と感じるだろうということだと思います。どのようなまさにが遅いのですか？サインアッププロセス？HDでビデオを見て？スクロールウィンドウ？Firefoxのロード？結局のところ、それは人間.. n'est PASのだ？）

Answer 4

たぶん、あなたは、単一の「スプライト」イメージにコンパイルされているそれらの多くがある場合は特に、送信している画像（複数可）を詳しく見てみます。

何が起こっすることができますすることが指しているイメージが非常に大きいということです。確かに、それだけで（スプライト方法の利点）一度にロードする必要がありますが、それは数百KBだ場合、それは確かにいくつかのパフォーマンス上の問題を引き起こす可能性があります。

Answer 5

あなたのパフォーマンスの最適化に関するいくつかの有用な情報を提供しますYSlowのと呼ばれる素敵なFirefoxのプラグインがあります。それはあなたにそれが検出されたパフォーマンスの問題を示しており、あなたの改善を示唆して記事へのリンクを提供します。 http://developer.yahoo.com/yslow/する

ベストプラクティスに関するいくつかの情報 http://developer.yahoo.com/performance/rules.htmlする