2009-06-02 105 views
2

一些用戶報告說,我的網站速度太慢 ,我認爲在CSS背景圖像可能是一個可能的 罪魁禍首在css中有許多背景圖像會影響性能嗎?

我有一個使用自定義生成系統 來連接所有的CSS,壓縮他們的網站(YUI壓縮器),使css精靈 自動(smartsprites)和我結束了一個9kb的CSS爲 整個頁面,這包括所有css的背景圖像在最後是d他們 大約60(幾個去同一個精靈不肯定有多少)

我想知道瀏覽器的默認行爲 是根據需要下載圖像(當它們匹配選擇器時) 或將它們全部下載。

現在Firefox中的firebug似乎暗示它們都被下載了。 你會建議我會用什麼技術來避免這個問題,或者是減輕它。

編輯: 我錯誤的螢火蟲,正在下載的圖像屬於lightview 隱藏,但背景圖像匹配的dom。

+0

慢作爲加載緩慢或慢一些普遍的信息? – 2009-06-02 00:33:07

+0

加載速度慢。一旦加載,性能可以確定 – 2009-06-02 00:37:58

+0

是什麼讓你覺得是圖像加載導致網站變慢?是螢火蟲報告爲您的圖像的GET命令的加載時間很長,或者這是一個消除的過程? – 2009-06-02 03:41:50

回答

2

不,實際上最好將它們放入CSS中而不是標記中。

圖像調用不會阻止頁面,並且隨着圖像被加載,它們將在頁面上呈現,因此總體而言,通過CSS加載它們是個不錯的主意。更不用說這個設計也更靈活了。

(不用說,每個那些圖像會佔用帶寬和額外的HTTP請求)

1

默認的瀏覽器行爲是一次下載兩個項目(即2個http請求),如果您認爲有很多圖像爲您的圖像創建子域名,如images.yoursite.com,您將開始看到瀏覽器發出並行請求,你可以看到一些性能的提高

+0

我已經有一個圖像子域。雖然我不使用它來加載此CSS圖像,但「內容」(動態上傳)的圖像。所以我想我會在這個圖像中使用這個子域名沒有任何好處。 – 2009-06-02 00:39:52

0

也許仔細看看你發送的圖像,特別是如果有很多它們被編譯成一個「精靈」圖像。

可能發生的情況是您指向的圖像非常大。當然,它只能加載一次(精靈方法的好處),但如果它有幾百KB,肯定會導致一些性能問題。

1

(側面的話題。沒有真正回答你的問題,但可能是有趣的,甚至相關的。)

我認爲另一個可能的罪魁禍首是,「一些用戶」會一直覺得你的網站「太慢」。 (也許它比Stack Overflow更像是一種精神崩潰,這些用戶認爲是一個快速站點嗎?他們能舉出例子嗎?他們的連接和計算機有多快?他們在哪裏,服務器在哪裏?什麼準確速度慢?註冊過程?高清觀看視頻?滾動窗口?加載Firefox?畢竟,它是人類..無奈嗎?)