This post was originally published at Performance Updates and Hosting Moves: MDN Changelog for October 2018

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 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

The post Performance Updates and Hosting Moves: MDN Changelog for October 2018 appeared first on Mozilla Hacks – the Web developer blog.


This post was originally published at Performance Updates and Hosting Moves: MDN Changelog for October 2018