我们刚刚完成了这个网页http://marinosactiongrill.com/，你可以看到它的巨大并且它有很多图形（将近 7M），这使得它在第一次下载时非常慢（大约 20 到 40 秒）
您能帮我提供一些技巧以加快显示速度吗？
我知道使用 sprite 会更好......但我找不到一种方法来使用 sprite 制作响应式按钮和动画，并且在 IE 和其他浏览器之间也兼容
问候...
【问题讨论】：
slider01.jpg。 186KB。对于图像的尺寸来说，这太过分了。如果所有图像都遵循此模式，您可以将图像大小至少除以 10。
标签： html optimization download performance
首先，您可能要考虑使用Google Page Speed plugin - 它可以帮助您分析性能瓶颈。
1) 通过缩放和优化图像，您最多可以节省大约 500kb 的初始加载。您还应该考虑使用 jpg 压缩图像而不是 png 格式。 jpg 是一种有损格式，但与 png-s 相比可以节省一些带宽。
2) 设置正确的服务器端缓存也可以创造奇迹 - 您可以在第一次请求后缓存它，而不是在每个请求上加载静态内容。
3) 您的服务器端设置似乎也有问题 - 在某些情况下，加载相对较小的静态 css 和 javascript 文件最多需要 2 秒。您的服务器负载过重吗？
4) 在现代浏览器中，您的页面不必仅使用图像来构建。而不是为每个按钮制作两组图像，您可以使用自定义字体+一些新的花哨的 css 来实现鼠标悬停的“发光”效果。这是一个快速演示 - http://jsfiddle.net/nc6v4/，它仅使用 css 完成，没有图像。
some-selector {
font-family: /*Name for custom font loaded for example via google api*/
box-shadow: /*Use for blurry outlines, glowing effect etc*/
background: /*You can use for example gradients instead of using images*/
}
5) 不要在您自己的服务器中托管 jquery - 使用某种 CDN - jquery 提供它自己的 CDN，如果您对它不满意，请使用 google 或 microsoft 提供的 CDN。
6) 服务器端压缩可以节省大量带宽 - 在您的情况下约为 500kb 的数据。不要将您的 html、java-script 和 css 作为纯文本传递，而是“gzip”它，使用正确的 HTTP 标头，浏览器会自动解压缩它。
7) 最后一项但相当重要的技术 - 将您的 javascript 文件合并到一个大的缩小的 javascript 文件中。问题是，当同时向服务器发出大量请求时，这些请求将开始相互阻塞。加载 1 个大小为 20kb 的文件比加载 20 个大小为 1kb 的文件要快得多。对 css 使用相同的技术。
总结一下 - 没有什么神奇的技术可以通过几行代码让这个网站快速运行。当您设置服务器端缓存并组合 +minify 您的 java-script 和 css 文件时，您应该没问题。如果需要额外的性能，请考虑使用现代 css + html 技术，而不是占用大量带宽的图像。
另外，作为一个简短的附注，您的页面不必在所有浏览器中看起来都 100% 相同。现代浏览器执行无缝自动更新，跟上新标准，旧版本的 Internet Explorer 正在以相当令人满意的速度失去其市场份额。此外，由于您页面的目标受众似乎是游戏玩家，因此浏览器兼容性也不应该成为问题。
【讨论】：
您需要返回并优化您的图片，因为它们的尺寸太大了。如果您使用 Photoshop，它只是文件 > 另存为 Web > 然后找到压缩伪影和文件大小之间的平衡。
使用Pictue Fill 之类的东西也可能是有益的，它可以加载特定分辨率的图像版本，从而使网站在您缩小屏幕尺寸时变得更快。为什么还要加载大量图像，而这些图像只是为较小的屏幕尺寸而缩小的！
就这么简单；
<span data-picture data-alt="Image Description">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
这可能工作量太大，但绝对值得考虑。
【讨论】：
要提高您网站的性能，您需要同时使用 Firebug 和 PageSpeed (Firefox) 或 PageSpeed (Google Chrome)。这些工具还可以帮助您改善尚未发现的其他瓶颈。
*在线工具
http://developers.google.com/speed/pagespeed/insights/
*Google Chrome 和 Firefox 的扩展
https://developers.google.com/speed/pagespeed/insights_extensions
*萤火虫
https://getfirebug.com/downloads/
要在 Firefox 中使用，需要同时安装 Firebug 和 PageSpeed。
【讨论】：