性能更新和托管迁移:2018 年 10 月 MDN 变更日志

10 月份完成

以下是 10 月份对 代码、数据和工具 的更新,这些更新支持 MDN Web 文档

以下是 11 月份的计划

我们发布了一些旨在改进 MDN 页面加载时间的更改。效果并不像我们希望的那样显著。

已发布的性能改进

我们的侧边栏(例如 <summary> 上的“相关主题”侧边栏)使用“mozToggler”JavaScript 方法来实现展开和折叠部分。这使用 jQueryUI 的切换效果,并在加载时动态应用。 Tim Kadlec<details> 元素 (KumaScript PR 789Kuma PR 4957) 替换了它,该元素在语义上对展开和折叠部分进行建模。<details> 元素受大多数当前浏览器支持,最显著的例外是 Microsoft Edge,它通过一个 polyfill 支持。

Two copies of Chrome's performance tool, one showing 241ms with mozTogglers, and the other showing 94ms without it.

我们根据基准测试预计至少能提高 150 毫秒。

<details> 更新于 10 月 4 日发布,并重新生成了带有侧边栏的 31,000 个页面以应用更改。

第二个更改旨在减少 Web 字体 的使用,Web 字体必须下载,并会导致页面重新绘制。一些浏览器(如 Firefox Focus)默认情况下会阻止 Web 字体,以提高性能和节省带宽。

一种策略是完全消除 Web 字体。我们在 9 月份 (PR 4967) 将 OpenSans 替换为内置的 Verdana 作为正文字体,然后在 10 月 22 日 (PR 5023) 再次替换为 Arial。我们还用内联 SVG (PR 4969PR 5053) 替换了使用 Web 字体的 Font Awesome。我们预计将在 11 月完成 SVG 工作。

第二种策略是减少 Web 字体的尺寸。随着 2017 年 6 月 的重新设计,推出的自定义 Zilla 字体已缩减至标准英文字符,在 10 月 10 日 (PR 5024) 将文件尺寸减少了一半。

这些更改已对总下载大小和渲染时间产生了影响,并且我们正在看到 合成指标 的改进。但是,对于 MDN 用户来说,在页面加载时间方面 没有显著变化。在 11 月,我们将尝试一些更激进的实验来了解更多关于页面加载时间组成部分的信息。

A graph of page load over time, declining noisily from 5 - 6 seconds to 4 -5 seconds over October

SpeedCurve 合成测量显示出稳定的改进,但尚未达到目标。

将 MDN 迁移至 MozIT

Ryan JohnsonEd LimDave Parfitt 在 10 月 29 日将生产流量从营销服务器切换到 IT 服务器。网站处于只读模式,因此所有内容在过渡期间均可用。出现了一些小问题,主要是在 Amazon 的弹性文件系统 (EFS) 的 API 预算耗尽时,但我们在维护窗口内处理了这些问题。

A two-story, 19th-century building, loaded on 64 wheels, is moved down a street by a dozen workers in hardhats

Maisenbacher House Moving 8” by Katherine Johnson, CC BY 2.0

在过渡前的几周里,团队测试了部署、更新了文档并检查了数据传输流程。他们创建了一个任务和分配列表,详细说明了迁移流程,并规划了过渡后的清理工作。团队对细节的关注和持续的沟通使 MDN 用户顺利过渡,没有停机或错误。

MozIT 集群与之前的 MozMEAO 集群非常相似。从 2017 年 10 月 10 日发布的 技术概述 仍然是对 MDN 部署方式的一个不错的指南。

有一些变化,大多数变化是 MDN 用户不会注意到的。我们现在将图像托管在 Docker Hub 而不是 quay.io 中。MozMEAO 集群运行着 Kubernetes 1.7,新的 MozIT 集群运行着 1.9。这可能是更可靠的 DNS 查找的原因,避免了连接到数据库或其他 AWS 服务时偶尔出现的问题。

在 11 月,我们将继续监控新服务器,并关闭 MozMEAO 帐户中的冗余服务。然后,我们将重新评估年初的计划,并优先考虑下一个基础架构更新。首要任务是可靠的验收测试和跨多个 AWS 区域的部署。

已发布的调整和修复

10 月份合并了 352 个 PR。

这包括一些重要的更改和修复

A sequencer with four effects and four steps that can be selected

一个演示 Web Audio API 的步进音序器。

78 个拉取请求来自首次贡献者

计划于 11 月

我们将继续进行性能实验,例如移除 Font Awesome 和寻找新的降低页面加载时间的方法。我们将继续进行正在进行的项目,例如迁移和更新浏览器兼容性数据以及发布更多 HTML 示例,比如关于 <input> 的示例。

发布定期付款

在 10 月,我们发布了 一种新的支持 MDN 的方法,即一次性付款。在 11 月,我们将再次与 Potato London 合作,为 MDN 添加月度付款选项。

有兴趣为 MDN 做贡献?不要错过 在 MDN 上入门 或直接加入 Kuma 仓库 开始贡献代码。

如果您刚开始,请查看 MDN wiki 页面以了解新贡献者或查看

关于 John Whitlock

John 是一位网络开发人员,负责 MDN Web Docs 的引擎开发工作。

John Whitlock 的更多文章…


5 条评论

  1. Anders

    “一种策略是完全消除网络字体”
    是的,然后大家都很高兴。这花费了你相当长的时间!请不要再放回去了。

    “这些更改对总下载量和渲染时间产生了影响,我们发现合成指标有所改善。然而,在针对 MDN 用户测量的页面加载时间方面,没有发生重大变化。”

    这似乎是因为你(合成测试)做错了。这个 webpagetest 运行显示了一个问题,我在本地机器上测试时也看到了类似的模式(浏览器正在等待 4.5 秒,以便获取 html)。
    https://www.webpagetest.org/result/181110_FD_c07592befaabd47c3964aa2dac777122/
    我认为是你的缓存出了问题。虽然缓存静态 html 并不算火箭科学。而且你可能在合成测试中反复测试了同一页面。

    2018 年 11 月 10 日 00:24

  2. Raphael

    Arial 丑陋至极。您能不能至少将 Open Sans 放在字体列表的首位(不将其作为网络字体包含在内),这样,对于在本地安装了该字体的用户,浏览器将使用它?

    2018 年 11 月 10 日 上午 01:27

  3. DD

    MDN 是一个如此出色且必不可少的资源。无论何时我需要关于网络上某件事的正确、可靠的信息,MDN 通常都是我首先去的地方。

    非常感谢那些让 MDN 持续运行的团队,以及那些改进文章和内容的众多贡献者。

    没有 MDN 的网络,将是一个没有统一、明显去处获取文档的网络。感谢成为我学习网络时经常去的第一个站点!

    2018 年 11 月 10 日 下午 13:43

  4. Kadir Topal

    Anders,是的,您看到的是 CDN 命中和 CDN 未命中页面加载之间的区别。不幸的是,我们目前只能为文档提供 5 分钟的 TTL。也就是说,我们尝试过更长的 TTL,但对真实用户指标的影响有限。

    2018 年 11 月 11 日 下午 16:32

    1. Anders

      “您看到的是 CDN 命中和 CDN 未命中页面加载之间的区别。”
      – 您是否是在说 CDN 未命中需要 4.5 秒?您是在花 4.5 秒生成 html 吗?对于一个大部分是静态的网站?您做错了。

      “不幸的是,我们目前只能为文档提供 5 分钟的 TTL。”
      – 您确切地知道文档何时发生变化,因此您没有任何理由发生未命中(即动态生成页面)。Google 表示,d.m.o 下大约有 75200 个页面,bing 表示有 87300 个页面,所以我们假设是 90000 个。探测几个页面后发现,它们 gzip 到大约 20kb。也就是说,不太多(并且删除内联 svg-paths 并节省三分之一)。如果您的 CDN 阻止您提供这些页面,您的 CDN 正在损害您。

      “也就是说,我们尝试过更长的 TTL,但对真实用户指标的影响有限。”
      – 命中率是多少?命中率的变化是什么?在 5% 的百分位数。RUM 的直方图是什么样的?请求的哪个阶段在花费时间?

      2018 年 11 月 14 日 下午 13:44

本文评论已关闭。