Mozilla Hacks

CDN, BCD, and SVG: MDN Changelog for April 2018

By John Whitlock

Posted on May 4, 2018 in MDN and Performance

Editor’s note: A changelog is “a log or record of all notable changes made to a project. [It] usually includes records of changes such as bug fixes, new features, etc.” Publishing a changelog is kind of a tradition in open source, and a long-time practice on the web. We thought readers of Hacks and folks who use and contribute to MDN Web Docs would be interested in learning more about the work of the MDN engineering team, and the impact they have in a given month. We’ll also introduce code contribution opportunities, interesting projects, and new ways to participate.

Done in April

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

Here’s the plan for May:

Moved MDN to a CDN, improving page load time by 16%

On April 17, we switched developer.mozilla.org to be served by CloudFront, Amazon’s Content Delivery Network (CDN). CDNs have several benefits, and MDN’s visitors are seeing many of them now.

Response time drops from 2.7 to 1.2 seconds over the day

Pingdom measured improved response times as MDN switched to a CDN

A CDN has a network of servers around the world, and visitors connect to the closest CDN server. Our server connect time, which accounts for 10% of the page load time, has improved 57% world-wide, and 72% across Europe.

A CDN can request a page once from our web server, save a copy, and then serve the copy when a new visitor requests it. We’re starting with short, conservative caching times, but we’re already noticing that popular pages (including a page used in the Firefox build process) have faster load times because they are often served from the CDN directly. For example, we’ve measured a 50% improvement in page load time in India for the JavaScript basics page.

We were already using a CDN for our static assets like JavaScript, CSS, and JS. Moving the main site to a CDN means we can serve static assets from developer.mozilla.org instead of an assets domain. This impacts site speed in two ways. First, the browser skips a second DNS lookup for the assets domain, saving 5% or so per view. Second, modern browsers can request the follow-on assets over the same HTTP/2 connection. Stephanie Hobson researched the impact of HTTP/2 on MDN when we added it to the assets domain in 2017, and we implemented the follow-on work this month.

All of this adds up to a significant improvement in page load time. We’ve measured page load with WebPageTest, which provides reliable best-case metrics for the homepage:

Location Before the CDN With the CDN Improvement
Dulles, VA 1.93s 1.42s 0.51s
Hong Kong, China 2.68s 1.79s 0.89s
London, UK 2.40s 1.49s 0.91s
Sydney, Australia 2.68s 1.63s 1.05s

We also use Google Analytics, which measures average page load for actual visitors across the site:

Location Before the CDN With the CDN Improvement
All MDN Visitors 3.91s 3.28s 0.63s
USA 2.44s 2.11s 0.33s
France 3.03s 2.29s 0.74s
India 6.05s 4.45s 1.60s
China 7.87s 5.60s 2.27s

Most of the preparation of the last few months was writing our CDN caching rules, to make sure that first-time visitors were likely to get a cached copy from the CDN, but that logged-in users, page editors, and translators continue talking directly to our web servers. A serious bug got past our initial testing, which caused problems for users editing MDN in multiple browser tabs. We fixed this bug (PR 4757), and now editing is back to normal, and the site is still faster than it has ever been.

Migrated more compatibility data, now 72% complete

The community continues to migrate compatibility data from MDN to the browser-compat-data repository. After a record 329 merged pull requests, the data is now 72% migrated, versus 63% at the start of April. Thanks to Florian Scholz, Mark Boas, Daniel Beck, ExE Boss, and many others for migrating data and reviewing PRs.

We learned about three projects using this data. The polyfill-checker verifies that running code is using polyfills rather than built-ins, to ensure code runs the same on older browsers. eslint-plugin-bultin-compat does similar work using static analysis with ESLint. MDN Browser Compatibility Data Explorer is a Rails application for exploring the data, and includes feature search as well as summary graphs of browser support.

Pie charts show the proportion of features supported in Chrome, Firefox, and Opera. The majority of features are supported, but support is unknown for about 15%.

The MDN Browser Compatibility Data Explorer browser graphs

Mark Dittmer continued work on the mdn-confluence tool. This tool generates potential compatibility data updates from the Web API Confluence, which collects JavaScript API availability by testing browsers directly. The mdn-confluence tool has been integrated into the BCD development environment. Once the data migration is complete, our focus will shift to correcting and updating the data, and tools like this will be part of that process.

Replaced font-based icons with inline SVG

MDN has been using Font Awesome for high-quality icons. One feature of font-based icons was strong support for Internet Explorer 7, which was still a priority in 2014 when we last updated our icon system. We’ve been updating our list of supported browsers, and in April Schalk Neethling started the switch from font-based icons to inline SVG icons.

Both methods result in crisp icons that look good on high DPI displays. An icon font requires a network request to download the font file, either the standard version (which includes lots of icons we don’t use), or a minimized version (which we maintain and serve ourselves). With inline SVG, the browser gets the icon data with the initial HTML request, and doesn’t get any extra icons not used on the page. Inline SVG is also a better fit for our template system, making it clearer to developers what image is being used.

This work will continue in May, as we improve accessibility and localization when using SVG icons. We will also remove code that supports the font-based icons, simplifying the CSS and JavaScript.

Shipped Tweaks and Fixes

There were 510 PRs merged in April:

140 of these were from first-time contributors:

Other significant PRs:

Planned for May

Ship HTML Interactive Examples

MDN staff and volunteers are writing HTML interactive examples, such as a demonstration of <datalist>. This adds to the JavaScript and CSS examples, and will complete the first phase of the interactive examples project. There’s a bug that’s preventing publishing the HTML examples that will be fixed in May, and then these new examples can be published to MDN.

If you’d like to help write HTML examples, please see the call for help on Discourse.

Deploy Django 1.11

The work for Django 1.11 continued in April, but the CDN took more effort than expected. We’ll continue work on the Django upgrade, and should deploy it in May.

About John Whitlock

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

More articles by John Whitlock…