Mozilla Hacks

Performance Updates and Hosting Moves: MDN Changelog for October 2018

By John Whitlock

Posted on November 9, 2018 in MDN and Performance

Done in October

Here’s what happened in October to the code, data, and tools that support MDN Web Docs:

Here’s the plan for November:

We shipped some changes designed to improve MDN’s page load time. The effects were not as significant as we’d hoped.

Shipped performance improvements

Our sidebars, like the Related Topics sidebar on <summary>, use a “mozToggler” JavaScript method to implement open and collapsed sections. This uses jQueryUI’s toggle effect, and is applied dynamically at load time. Tim Kadlec replaced it with the <details> element (KumaScript PR 789 and Kuma PR 4957), which semantically models open and collapsed sections. The <details> element is supported by most current browsers, with the notable exception of Microsoft Edge, which is supported with a polyfill.

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

We expected at least 150ms improvement based on bench tests

The <details> update shipped October 4th, and the 31,000 pages with sidebars were regenerated to apply the change.

A second change was intended to reduce the use of Web Fonts, which must be downloaded and can cause the page to be repainted. Some browsers, such as Firefox Focus, block web fonts by default for performance and to save bandwidth.

One strategy is to eliminate the web font entirely. We replaced OpenSans with the built-in Verdana as the body font in September (PR 4967), and then again with Arial on October 22 (PR 5023). We’re also replacing Font Awesome, implemented with a web font, with inline SVG (PR 4969 and PR 5053). We expect to complete the SVG work in November.

A second strategy is to reduce the size of the web font. The custom Zilla font, introduced with the June 2017 redesign, was reduced to standard English characters, cutting the file sizes in half on October 10 (PR 5024).

These changes have had an impact on total download size and rendering time, and we’re seeing improvements in our synthetic metrics. However, there has been no significant change in page load as measured for MDN users. In November, we’ll try some more radical experiments to learn more about the components of page load time.

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

SpeedCurve Synthetic measurements show steady improvement, but not yet on target.

Moved MDN to MozIT

Ryan Johnson, Ed Lim, and Dave Parfitt switched production traffic from the Marketing to the IT servers on October 29th. The site was placed in read-only mode, so all the content was available during the transition. There were some small hiccups, mostly around running out of API budget for Amazon’s Elastic File System (EFS), but we handled the issues within the maintenance window.

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

In the weeks leading up to the cut over, the team tested deployments, updated documentation, and checked data transfer processes. They created a list of tasks and assignments, detailed the process for the migration, and planned the cleanup work after the cut over. The team’s attention to detail and continuous communication made this a smooth transition for MDN’s users, with no downtime or bugs.

The MozIT cluster is very similar to the previous MozMEAO cluster. The technical overview from the October 10, 2017 launch is still a decent guide to how MDN is deployed.

There are a handful of changes, most of which MDN users shouldn’t notice. We’re now hosting images in Docker Hub rather than quay.io. The MozMEAO cluster ran Kubernetes 1.7, and the new MozIT cluster runs 1.9. This may be responsible for more reliable DNS lookups, avoiding occasional issues when connecting to the database or other AWS services.

In November, we’ll continue monitoring the new servers, and shut down the redundant services in the MozMEAO account. We’ll then re-evaluate our plans from the beginning of the year, and prioritize the next infrastructure updates. The top of the list is reliable acceptance tests and deploys across multiple AWS zones.

Shipped tweaks and fixes

There were 352 PRs merged in October:

This includes some important changes and fixes:

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

A step sequencer demonstrating web audio APIs.

78 pull requests were from first-time contributors:

Planned for November

We’ll continue on performance experiments in November, such as removing Font Awesome and looking for new ways to lower page load time. We’ll continue ongoing projects, such as migrating and updating browser compatibility data and shipping more HTML examples like the one on <input>.

Ship recurring payments

In October, we shipped a new way to support MDN with one-time payments. For November, we’re working with Potato London again to add the option for monthly payments to MDN.

Interested in contributing to MDN? Don’t miss Getting started on MDN or jump right in to the Kuma repo to begin contributing code.

If you’re just getting started, take a look at the MDN wiki page for new contributors or have a look at

About John Whitlock

John is a web developer working on the engine of MDN Web Docs

More articles by John Whitlock…

5 comments

  1. Anders

    “One strategy is to eliminate the web font entirely”
    Yeah, and there was much rejoicing. That took you quite a while! Please don’t put them back.

    “These changes have had an impact on total download size and rendering time, and we’re seeing improvements in our synthetic metrics. However, there has been no significant change in page load as measured for MDN users”

    Seems to be because you are doing it (measuring synthetically) wrong. This webpagetest run shows a problem and when I tested it on my local machine I saw a similar pattern (the browser is waiting 4.5sec for the html):
    https://www.webpagetest.org/result/181110_FD_c07592befaabd47c3964aa2dac777122/
    I’d say that you are having a problem with your cache. Although caching static html really isn’t rocket science. And that you are probably testing the same page over and over in you synthetic tests.

    November 10th, 2018 at 00:24

  2. Raphael

    Arial is ugly as hell. Couldn’t you maybe at least make Open Sans the first item in the font list (without including it as a web font) so that, for people that have installed it locally, the browser will use that?

    November 10th, 2018 at 01:27

  3. DD

    MDN is such a fantastic and vital resource. Whenever I need to right, solid info about something on the Web, MDN is usually the first place I go.

    Thank you very much to the team(s) that keep this going, and to the many contributors who improve the articles and content.

    The Web without MDN would be a Web without a unified, obvious place to go for documentation. Thanks for being a frequent first stop on my path to learning the web!

    November 10th, 2018 at 13:43

  4. Kadir Topal

    Anders, yeah, what you are seeing is the difference between a page load with a CDN hit and and CDN miss. Unfortunately we can currently only offer a 5 minute TTL for documents. That said, we experimented with much longer TTLs and the effects on real user metrics were limited.

    November 11th, 2018 at 16:32

    1. Anders

      “what you are seeing is the difference between a page load with a CDN hit and and CDN miss.”
      – Are you saying that a CDN miss takes 4.5 seconds? Are you spending 4.5 seconds generating the html? For a mostly static site? You are doing it wrong.

      “Unfortunately we can currently only offer a 5 minute TTL for documents.”
      – You know exactly when a document changes, so there are no reason for you to ever have a miss (i.e. generate the page on the fly). Google says that there are about 75.200 pages under d.m.o, bing says 87,300, so let’s say 90.000. Probing a few it seems they gzip to ~20kb. That is 1,8GB. I.e. not very much (and cut out the inline svg-paths and save a third). If you cdn is preventing you from serving that, your cdn is hurting you.

      “That said, we experimented with much longer TTLs and the effects on real user metrics were limited.”
      – What is the hit-rate. What has the change in hit-rate. At the 5% percentile. What does the histogram for the RUM look like. In what stage of the request is the time being spend.

      November 14th, 2018 at 13:44

Comments are closed for this article.