1

我们刚刚完成了这个网页http://marinosactiongrill.com/，你可以看到它的巨大并且它有很多图形（几乎 7M），这使得它在第一次下载时非常慢（大约 20 到 40 秒）

你能帮我提供一些技巧来让展示更快吗？

我知道使用精灵更好......但我找不到一种方法来制作响应式按钮和动画的精灵也兼容 IE 和其他浏览器

问候...

4

3 回答 3

3

首先，您可能需要考虑使用Google Page Speed 插件- 它可以帮助您分析性能瓶颈。

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 正在以相当令人满意的速度失去其市场份额。此外，由于您页面的目标受众似乎是游戏玩家，因此浏览器兼容性也不应该成为问题。

于 2013-10-22T01:19:52.463 回答
0

为了提高您网站的性能，您需要同时使用 Firebug 和 PageSpeed (Firefox) 或 PageSpeed (Google Chrome)。这些工具还可以帮助您改善尚未发现的其他瓶颈。

*在线工具
http://developers.google.com/speed/pagespeed/insights/
*Google Chrome 和 Firefox 的扩展
https://developers.google.com/speed/pagespeed/insights_extensions
*Firebug
https://getfirebug.com /downloads/
要在 Firefox 中使用它，您需要同时安装 Firebug 和 PageSpeed。

于 2013-10-22T01:26:45.603 回答
0

您需要返回并优化您的图像，因为它们的尺寸太大了。如果您使用 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>

这可能工作量太大，但绝对值得考虑。

于 2013-10-22T02:31:50.763 回答