加速图片密集型网站

在看到了所有关于使用 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 来搭建你的社区,我其实不太建议为此过分担忧。

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

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

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