查看此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用于图像(例如菜单翻转或图标).这有利于两个原因:

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

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

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