加速图片密集型网站

在看到了所有关于使用 Cloudflare 和大型图片网站的警告后,我决定为我正在开发的一个小型个人项目迎接这一挑战。虽然我在 Cloudflare 的使用上总体还算顺利,但我一直无法弄清楚为什么我的主题图片无法在 JavaScript 执行完成之前加载(这似乎不是 CDN 的问题)。

有没有办法让图片更早加载(与 JS/CSS 同时加载,或者至少在 JS 执行期间加载),还是说这完全不可行?这是否是一种必要的优先级设置?

以下是我的 webpagetest.org 测试结果,我关注的是从约 2.3 秒(最后一个 JS 脚本加载完成)到约 3.4 秒(图片开始下载)之间的大段空白。

主题布局:

配置
链接:https://investorcommunity.org
主题:Graceful
服务器:DO Droplet(无额外缓存或 S3)
CDN:Cloudflare(免费版,已为减少 JS 干扰而禁用“Rocket Loader")。值得注意的是,禁用 Cloudflare 似乎并未影响这一特定问题。

非常欢迎大家提供任何想法。

这段间隔是 JS 执行期,即我们完成 Discourse EmberJS 应用的下载并启动它的阶段。我们有多位同事正在致力于现代化改造 EmberJS 应用,今年我们将开始享受这项工作带来的诸多好处。

但作为 JavaScript 应用,总会存在一些 JS 执行过程,因此如果你已经决定使用 Discourse 来搭建你的社区,我其实不太建议为此过分担忧。

1 个赞

有道理……谢谢你的解释。

有没有办法在该脚本初始化时并行启动主题图片的传输,这样图片可以预加载,并在 JavaScript 执行完毕后立即显示?还是说 JavaScript 脚本是确定需要拉取哪些图片的必要前提条件?

很期待听到关于 EmberJS 的消息!你们持续推出的改进令人振奋!

1 个赞