pagespeed - 使用 mod_pagespeed 时跳过传统的页面加载/速度技术

Question

我正在尝试确定我们的前端团队是否可以跳过某些“PageSpeed 最佳实践”并构建过程，因为我们正在使用 mod_pagespeed (Apache)。mod_pagespeed 自动执行的可能被跳过的示例如下： 1. 合并和缩小 JS 和 CSS（例如可以使用 Browserify 之类的工具完成） 2. 压缩图像 3. JS 和 CSS 的异步加载/注入（脚本加载器、atomify 等） 4. 用于缓存清除的静态资产版本控制（grunt-usemin 等）

举个例子，现在我已经删除了静态资产版本控制，取而代之的是我们的 global.js 和 global.css 文件没有版本控制并且到期时间很短。这是因为 mod_pagespeed 快速地对它们进行了巨大的过期。

Answer 1

我们为一家大型电信公司的主要门户网站实施了 mod_pagespeed。虽然 PageSpeed 是一个非常方便的优化工具，但它不是魔法棒并且有一些严格的限制。我们摒弃了大部分传统技术，但发现需要大量手动修复资源才能优化所有内容。

1. 合并和缩小 JS 和 CSS？可以，但请注意以下限制：

   • 您不能跨内联脚本和 IE 条件注释组合 JavaScript。
   • 你不能合并使用“use strict”的 JavaScript 文件（你可能需要一个过滤器在运行时把它们去掉）
   • https://developers.google.com/speed/pagespeed/module/filter-css-combine和https://developers.google.com/speed/pagespeed/module/filter-js-combine的进一步限制
   • mod_pagespeed 必须能够获取和重写您的资源（如果未正确配置，则不会发生任何事情）
2. 压缩图像？可以，但请注意以下限制：
   • 动画 GIF 未压缩
   • 需要对您的 mod_pagespeed 配置进行大量调整，以使图像压缩以最佳方式为您的站点工作
3. JS和CSS的异步加载/注入？有点：
   • 你仍然需要类似 require.js 的东西来条件加载 JavaScript。我们为此提供了服务器端解决方案
   • 您会发现很多 JavaScript 无法异步加载，您必须将其标记为：<script pagespeed_no_defer="">...</script>
   • 没有异步/条件注入 CSS 的机制
   • 此外，图像的延迟加载效果非常好。
4. 用于缓存破坏的静态资产版本控制？是的。这是 mod_pagespeed 真正大放异彩的一个领域，我们无需进行任何手动修复即可使其正常工作。但是，请注意 mod_pagespeed 只有在您有将资源标记为可缓存的标头时才能使用它。

此外，如果您正在考虑使用图像精灵，请注意它的限制非常严格： 使用 mod_pagespeed 进行图像精灵