1

我有一个网络解决方案托管和 ExpressionEngine。我有一个页面使用 jquery isotope 来展示我们的产品。此页面需要大量时间来加载。我下载了“Yslow”FF 插件，并根据这些指南进行了优化，得到了 93 分。然而页面仍然很慢。

  • 我已经用“smush.it”压缩了所有图像
  • 设置 Etags 和过期标头
  • 结合和缩小 js 和 css
  • 减少 DOM 元素的数量
  • 减少了 EE 查询的数量 - 通过删除 playa 字段类型关联从 415 减少到 69。
  • css在顶部，js在底部
4

1 回答 1

3

查看您提供的链接，在上面的评论中提出了一项基准测试建议。

您是否按照@kant312 的建议使用 Chrome 开发人员工具？或者更好的是尝试Google Canary，因为这些工具是下一代的。

未启动的浏览器缓存中的总有效负载超过 1.0MB，总共有 74 个网络请求。这是大量数据和大量请求。

使用该 Chrome 工具，从网络的角度来看，您最严重的违规者是：

http://www.hexarmor.com/automin/8ce57c337ec87d08b88c9da7c9fbb37b.js?modified=1338396875 这是一个 154KB 的 .js 文件，由于某种原因它没有被压缩。

您的第二大文件是http://www.hexarmor.com/assets/img/background.jpg这是一个 147KB 的图像。您在这里使用的那种嘈杂的纹理背景不能很好地压缩。至于压缩算法，这一切看起来都像是“重要的细节”。如果稍微模糊它，它可能会压缩得更好。但这是一个设计因素。

第三大文件是http://www.hexarmor.com/automin/ede5907dc9f416131684b845fc597112.css?modified=1342712812这是一个 117KB 的 CSS 文件。同样，高度可压缩，但您的服务器没有压缩它。

我认为通过修复这 3 个文件，您可以将总有效负载减少 200KB (20%)。修复 CSS 和 JS 的 gzipping 也将适用于其他文件，以便自动进一步减少有效负载。

这是我们用于 gzip 压缩的 .htaccess 行

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/x-js application/x-javascript text/javascript

有些人使用大量额外的规则来处理边缘情况（主要是较旧的浏览器），但这应该可以帮助您入门。

如果你要在一个页面上展示这么多产品，那么你将会有很多网络请求图像。也许您可以延迟加载页面较低的那些？还可以考虑将您的社交按钮组合成一个单独的精灵。

于 2012-07-19T18:26:33.487 回答