将图像设为背景会减慢页面的工作速度吗？

Question

我创建了自己的网站，不是很复杂。但当我将背景从简单颜色更改为图像时，网站运行非常缓慢，所有动画等都很慢。

CSS代码如下：

body{    
    color:#eee; 
        background-color: grey;      

}

导致网站变慢的CSS：

body{

    color:#eee;
    background-image:url("images/bodyImage3.jpg");
        background-size: 1400px;

}

- Nick Div

---

所以这张图片只有180Kb？但它导致页面加载缓慢？ - Zach Lysobey

@ZachL 是的，我也不知道为什么，对于我的目标访问者来说，它很容易加载，所以我不担心那些连接速度慢的人。奇怪的是，当我把图片放在页面的一侧，并根据图片的背景色匹配页面的背景色时，它加载得非常顺畅。图片大小仍然相同。 - Nick Div

Answer 1

是的，它会。尝试使用 background-position:fixed，可能有所帮助。

- Index

Answer 2

是的，一个 1400px 的图片会拖慢网站速度。

- bookcasey

---

有没有办法防止这种情况发生。虽然它只有180Kb的大小。 - Nick Div

“only”？听起来有点不必要。 - cimmanon

我认为这并不过分，尤其是对于一个简单页面上的全背景图像。 - Zach Lysobey

我同意@cimmanon的观点。我刚读了这篇文章(http://blog.chriszacharias.com/page-weight-matters)。虽然我有一个不错的网络连接，但是那些网络条件差的用户访问你的网站时需要等待*四分钟*才能下载背景图片(!)。如果你选择使用CSS3渐变或纯色，每个人都会受益。请认真思考超过200k是否值得对用户征税。也许它值得，但请做出明智的决定。 - bookcasey

@bookcasey 是的，但背景图片是我网站整个主题的一部分。我在设计上花了很多心思。我想我得找到一种压缩图片的方法。 - Nick Div

Answer 3

值得一提的是过期头（expires-headers），它可以让客户端浏览器缓存背景图片，这样他们下次访问您的网站时就不必每次都下载了。虽然第一次访问时性能不会改善，但在后续访问中，用户应该会注意到明显的改进。此网站列出了一些可以加速您的网站的改进措施，包括一些关于过期头的信息，这应该可以帮助您入门。

http://developer.yahoo.com/performance/rules.html

- knoight