预加载 DEV(和 Forem)主页信息流和侧边栏,可显著提升性能。
当您访问dev.to的主页时,该页面本身会在边缘进行缓存,以便从最近的服务器尽快将其提供给您。
这很好,但这种静态呈现方式也意味着我们无法根据您关注的标签和用户立即显示您的个性化信息流和侧边栏。
为了获取这些信息,我们会异步调用您的信息源,该请求会一直发送到数据库以动态加载响应。
这是正常现象,但盯着加载界面看很烦人,而且等待时间往往比我们预期的要长。这种延迟是由于其他资源(例如 CSS、JavaScript 和图片)必须先加载造成的。
一个简单的优化
我们最近进行了一项调整,通过在首页顶部添加“preload”指令来优先显示您的信息流<head>。
它看起来像这样:
<link rel="preload" href="/stories/feed/?page=1&type_of=discover" as="fetch" crossorigin="same-origin">
这行简单的代码指示浏览器优先处理此端点,而不是其他一些它原本可能优先处理的资源。谨慎选择要指示浏览器优先处理的资源。当所有资源都很重要时,就等于没有重要的资源;但如果你有一些对用户体验至关重要的端点,那就帮助浏览器,告诉它该怎么做!
返回首页并刷新。如果您还记得几天前的体验,应该会发现现在的响应速度更快了。由于一些差异,每次可能还无法做到完美,但这确实是一个明显的改进。
虽然没有进行全面的前后对比测量,但结果显而易见。信息流和侧边栏的加载速度比以前快得多。这些关键资源现在优先加载,而不是被埋没在图片下方——即使将图片向下移动一个位置,也不会对用户体验造成负面影响。
所有货物都运往福雷姆
DEV 版本基于Forem 开源代码运行——我们最近开始扩展其功能,以最大限度地重用 Forem 软件。我们希望这能在未来促进更多自托管应用,所有这些改进都将应用于所有这些自托管场景。
自托管目前仍过于复杂,难以大规模普及,我们尚未能优先解决这个问题——但与此同时,我们已经推出了子论坛。core.forem.com是我们发布项目最新动态的主要平台。
如果您负责软件项目并有意快速启动yourproject.forem.com,这正是我们乐于支持的用例。如果您对此感兴趣,请填写表格。
祝您编程愉快!
文章来源:https://dev.to/devteam/preloading-the-dev-and-forem-home-feed-and-sidebar-for-substantial-performance-benefits-2cg8