推出 Discourse Splash - 一个在网站资源加载时显示的视觉预加载器

公告
,
1

Discourse 是一个单页 Javascript 应用程序。

这意味着应用程序内的导航速度极快。现代 Web 应用程序的折衷之处在于它们必须在初始页面加载时进行加载和解析。虽然我们多年来一直在努力优化站点资源的加载方式，但根据设备/网络条件，这有时可能会有点慢。

在过去的几周里，我们一直在积极开发和测试潜在的改进措施，以解决慢速连接/设备用户遇到的初始等待问题。我们很高兴地宣布，从 此提交 开始，Discourse 站点现在将在加载站点资源时显示一个启动屏幕。

看起来怎么样？

我们已经在 Meta 上启用了此功能一段时间了，所以您可能已经看到过了。如果没有，它看起来是这样的。

它是如何工作的？

如果用户加载您的 Discourse 站点，并且 Discourse 在接下来的两秒钟内未解析，我们将显示启动屏幕。所以，它是基于连接时间 + 2 秒。

我们不会为使用快速设备/连接的用户显示启动屏幕。

如何获取？

这是核心功能，并且该设置现在默认启用，因此您所要做的就是更新到最新版本。如果碰巧您尝试了我们添加的设置但看不到它，请确保您已启用 splash_screen 站点设置。

有什么好处？

除了向慢速设备/连接的用户显示某些内容之外。此功能还减少了 Discourse 站点的 FCP/LCP 延迟。我们构建了一些内部工具来跟踪 Meta 上的 FCP/LCP，以下是结果：

dcdaa086b20f9497222327a82e8c22760b1c472b
dcdaa086b20f9497222327a82e8c22760b1c472b1920×996 67.2 KB

还有什么我应该知道的吗？

启动屏幕中显示的“正在加载”文本基于 preloader_text 翻译字符串。我们的社区非常棒，该文本已被翻译成多种语言。如果您希望它有所不同，可以在您站点的 /admin/customize/site_texts?q=preloader_text 下自定义该字符串。

启动屏幕不会以任何方式延迟您的站点，并且仅在加载站点资源时显示。站点准备好后，启动屏幕将立即移除。站点准备好和移除启动屏幕之间没有延迟。

67 个赞
2

有兴趣了解您的内部数据是否与 Google Search Console 记录的您的 CWV 数据相匹配。

6 个赞
3

我们使用 Google 自有的 Web-Vitals 库来获取内部指标，因此它们将是匹配的。只是搜索控制台中的信息具有更广泛的反馈循环，因此我们自己捕获了这些信息以便更快地迭代解决方案。

您也可以使用 WebPageTest 工具来验证新的 LCP 值。

11 个赞
4

这看起来很棒！

我知道这听起来可能有点书呆子气，但有没有可能改变加载动画中圆圈的颜色？ :grin:

4 个赞
5

对于想要修改加载器的人，这是文件：

10 个赞
6

加载动画存在于不同的 CSS 作用域中，因此您无法通过主题修改 CSS。不过，我们确实有计划进行改进，我已经开始着手这项工作。

一旦更改在您的站点上线，加载动画的点将使用您当前主题的颜色。

19 个赞
7

我认为，为了保持一致性，应该显示默认的 Discourse 旋转器，而不是那个动画。当然，这只是我的个人意见。

2 个赞
8

很棒的功能，最新升级中已包含。

我本以为在考虑装饰之前，应该优先考虑与深色主题同步。在深色主题下突然全屏显示白色，在黑暗的房间里简直是对视觉传感器的疯狂攻击！:face_with_spiral_eyes:

请添加一些 :sunglasses: 以保持与深色主题的一致性。

3 个赞
9

我的理解是我们已经同步了深色背景，@Johani？

问题是服务器可能需要几秒钟才能告诉我们我们正在处理深色主题，我们可以通过 service worker 的魔法来改进第二次加载，但这确实是一个非常棘手的问题。

4 个赞
10

自从我上次发帖以来，我注意到了一些事情。为了说明清楚——在未登录时，我注意到 discourse 会识别操作系统的主题为深色，同时将 discourse 站点也设置为深色，因此加载屏幕也使用深色背景色以与主题样式同步。

然而，当以默认启用深色主题的用户身份登录时，它会恢复为白色加载屏幕。

所以，我说它已经 50% 按预期工作可能是对的。:disguised_face:

我还没有测试过，也许其他人可以试试。

2 个赞
11

是的，今天测试了，它的行为是这样的：在未登录时可以正常工作，然后在设置为深色主题的用户登录后会默认显示为白屏。如果能让它的行为与检测到操作系统深色主题时的行为相同，那就行了。

4 个赞
12

奇怪的是，它似乎取决于我的操作系统是设置为浅色模式还是深色模式，而 Discourse 的行为与我预期的相反。基本上，当设置为深色模式时，Discourse 会闪烁白色，但当设置为浅色模式时，Discourse 会显示一个深色页面，直到内容加载：

这是深色模式。请注意，它开始是深色的（iOS 等待从服务器获取数据），然后闪烁白色（我认为是 Discourse 的初始页面加载），然后加载我设置的深色主题：

这是浅色模式。它开始是白色的（iOS 等待从服务器获取数据），然后变成深色的（我认为是 Discourse 的初始页面加载），然后保持在我设置的深色主题：

5 个赞
13

很有意思！感谢提供的视频，@Johani 会看看然后反馈。

7 个赞
14

是的，就是这样，还有视频作为完美的例子！

我就知道我没疯！:crazy_face:

3 个赞
17

@Johani 我已将最新提交更新为我认为是修复（或有望修复）的内容，但不确定是否有所不同（iOS、Safari / macOS Safari）

我目前的网络连接太好了，不容易复现，让我去找个拨号上网之类的…… :rofl:

3 个赞
18

在桌面设备上，您可以使用浏览器的开发者工具来限制您的连接：How to perform Network Throttling in Chrome | BrowserStack

不过我不知道移动浏览器是否也支持。

3 个赞
19

谢谢，我不使用 Chrome，但我会看看 xCode 工具并配置一些节流。

我花了一些额外的时间，可以确认情况仍然一样。

3 个赞
20

这可能与白光闪烁有关，所以我将在此发布。

iPhone 在浅色模式下，顶部栏是深色的。这是符合预期的，因为它匹配了我使用的深色 Discourse 布局。

image
image750×1334 137 KB

iPhone 在深色模式下，顶部栏是浅色的。这是出乎意料的，并且与白光闪烁一样，似乎表明布局的某些东西让手机误以为页面是白色的。我说这是因为 iPhone 上的 Safari 会尝试将顶部栏的颜色与您正在查看的网站的主色调相匹配。

image
image750×1334 136 KB

4 个赞
21

我们确实同步了，但我们忽略了用户仅将常规配色方案设置为深色模式的情况。我们之前依赖操作系统偏好在启动页面的浅色/深色模式之间进行选择，并假设用户会同时设置两者并使用操作系统切换。

我推送了几个修复程序：

如果常规方案是深色，则使用它。如果它是浅色，则在操作系统浅色模式下使用浅色方案，在操作系统深色模式下使用深色方案（如果已设置）。

此问题以及这个

现在应该都已修复。感谢您的报告 :+1:

11 个赞
22

:+1: 很棒，期待尝试！

建议 - 品牌化

是否可以允许在动画点上方进行基本徽标自定义，或者将“点”填充为徽标（fav.ico 大小的图像）或固定低分辨率固定大小（如果存在加载和速度问题）。

另一位用户建议恢复加载圆圈，这是 discourse 的熟悉产物，我认为这是一个简洁的想法，可以保持 UI/UX 的一致性，并且可以通过允许指定基本静态网站图像/徽标来增强 - 它可以在用户处于加载状态的“ limbo ”时保持用户的方向感和定位，从而提高用户体验和用户信心。

补充 - 从现有的品牌设置中获取图像，fav.ico 或“小徽标”可能是个不错的默认选择。

6 个赞