Question

我们刚刚完成了这个网页http://marinosactiongrill.com/，因为你可以看到它的巨大而且它有很多图形（差不多7M），这使得第一次下载速度非常慢（aprox 20到40秒）< / p>

你能帮助我提供更快速的节目提示吗？

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

问候......

Answer 1

首先，您可能需要考虑使用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脚本和css作为纯文本传递，“gzip”它，使用正确的HTTP标头，浏览器将自动解压缩它。

7）最后但又相当重要的技巧 - 将您的javascript文件合并为一个大缩小的javascript文件。问题是，当同时向服务器发出大量请求时，这些请求将开始相互阻塞。加载1个大小为20kb的文件而不是20个大小为1kb的文件要快得多。对css使用相同的技术。

总结一下 - 没有神奇的技术可以通过使用几行代码来快速建立这个网站。当您设置服务器端缓存并组合+缩小您的java脚本和css文件时，您应该没问题。当需要额外的性能时，请考虑使用现代的css + html技术而不是带宽较重的图像。

此外，作为快速注释，您的网页不必在所有浏览器中看起来100％相同。现代浏览器执行无缝自动更新，跟上新标准，旧版本的Internet Explorer正以相当令人满意的速度失去市场份额。此外，由于您的网页的目标受众似乎是游戏玩家，因此浏览器兼容性也不应成为问题。

Answer 2

要提高网站的性能，您需要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。

Answer 3

您需要返回并优化图片，因为它们的尺寸太大了。如果您使用photoshop只是一个文件的情况＆gt;另存为web＆gt;然后找到压缩工件和文件大小之间的平衡。

使用像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>

这可能是太多的工作，但绝对值得考虑。

使用大量图形优化网页速度

3 个答案: