查看此Web优化报告 - 如何解决？

Question

大家好我在http://www.websiteoptimization.com/services/analyze/上运行了分析仪，我得到了一些最突出的问题：

---

TOTAL_OBJECTS - 警告！此页面上的对象总数为93，按其数量将占据网页延迟。考虑将其减少到更合理的数量。每页超过20个对象，处理实际对象（描述时间和等待时间）的开销占整个页面延迟的80％以上。请参阅图II-3：延迟组件的相对分布，显示对象开销主导网站优化秘密中的网页延迟，以获取有关对象开销如何控制网页延迟的更多详细信息。组合，优化和优化外部对象。使用CSS翻转替换图形翻转以加速显示并最小化HTTP请求。考虑使用CSS sprites来帮助巩固装饰图像。使用CSS技术（如彩色背景，边框或间距）而不是图形技术可以减少HTTP请求。用CSS文本标题替换图形文本标题以进一步减少HTTP请求。最后，考虑使用不同的主机名或CDN来优化并行下载，以减少对象开销。

TOTAL_IMAGES - 警告！此页面上的图像总数为85，请考虑将其减少到更合理的数量。建议组合，替换和优化您的图形。使用CSS翻转菜单替换图形翻转菜单，以加快显示速度并最大限度地减少HTTP请求。考虑使用CSS sprites来帮助巩固装饰图像。使用CSS技术（如彩色背景，边框或间距）而不是图形技术来减少HTTP请求。用CSS文本标题替换图形文本标题以进一步减少HTTP请求。最后，考虑使用不同的主机名来优化并行下载，以减少对象开销。

---

问题在于我提到的85张图片都是在我的css文件中引用的 - 我不知道如何但是我想把这个数字降下来 - 但是我确实需要在我的网站中的所有这些文件。

任何进一步优化这一点的想法。

另外，即使在最大压缩之后，我的javascript文件仍然高达150K - 我已经用尽了减少开销的想法，并可以起诉一些提示。

Answer 1

您可以将CSS Sprites用于图像（例如菜单翻转或图标）。这有利于两个原因：

• 多个页面共有的精灵图像允许浏览器缓存精灵图像，从而减少您网站其他页面的后续下载。
• 通过减少服务器发送和接收的请求数量，Sprite图像可以减少服务器负载，因为许多图像可以组合成一个更大的图像。

你说你的JavaScript被压缩到最大值 - 然而，你的页面需要它吗？或者它可以分成几页？此外，脚本中是否存在不必要或可以减少的位，例如通过使用包装器函数来执行通常在脚本中执行的任务。一个简单的例子是使用Prototype-esque $函数代替document.getElementById，如果多次调用，可以非常显着地减小JavaScript的大小。

此外，正如报告建议的那样，使用样式文本而不是代表样式文本的图像，如果可以的话（当然这并不适用于所有情况）。

Answer 2

另请查看您的图片是什么。我看到的一个常见的事情是用于导航的不同背景图像 - 一个图像显示'Home'，另一个图像显示'关于我们'，等等。

您可以将这些组合成一个空白背景图像，然后将文本写在顶部。

Answer 3

关于您的JS文件，您可以删除发行版本上的回车符，“minify”（将所有内部变量和方法更改为1或2个字符的名称）和/或gzip。 JQuery使用这些技术;生产版本为19K，而开发版本为120K - 节省了80％以上。

Answer 4

你可以将你的CSS文件砍成不同的文件，以便得到那么多的图像。 javascript文件也一样。你真的需要每页150K的javascript吗？ 将其重构为不同的文件，仅包含您需要的文件。