Friday, 9 November, 2018 UTC

Performance Updates and Hosting Moves: MDN Changelog for October 2018

Performance Updates and Hosting Moves: MDN Changelog for October 2018

Summary

Done in October
Here’s what happened in October to the code, data, and tools that support MDN Web Docs:
  • Shipped performance improvements
  • Moved MDN to MozIT
  • Shipped tweaks and fixes by merging 352 pull requests, including 78 pull requests from 62 new contributors.
Here’s the plan for November:
  • Ship recurring payments
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.
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.
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.
“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:
  • 127 mdn/browser-compat-data PRs
  • 48 mozilla/kuma PRs
  • 45 mdn/kumascript PRs
  • 39 mdn/interactive-examples PRs
  • 32 mdn/infra PRs
  • 25 mdn/bob PRs
  • 10 mdn/webaudio-examples PRs
  • 6 mdn/data PRs
  • 4 mdn/ansible-jenkins PRs
  • 2 mdn/web-components-examples PRs
  • 2 mdn/css-examples PRs
  • 2 mdn/imsc PRs
  • 2 mdn/short-descriptions PRs
  • 1 mdn/django-locallibrary-tutorial PR
  • 1 mdn/learning-area PR
  • 1 mdn/webextensions-examples PR
  • 1 mdn/web-tech-games PR
  • 1 mdn/pwa-examples PR
  • 1 mdn/fibonacci-worker PR
  • 1 mdn/sprints PR
  • 1 mdn/express-locallibrary-tutorial PR
This includes some important changes and fixes:
  • Fix anchor links like #Using_thisArg (Kuma PR 4954), from Schalk Neethling.
  • Add permissive Content Security Policy (CSP) (Kuma PR 5002), from me.
  • Prefer .blockIndicator for styling block indicators (KumaScript PR 830), part of a series of changes to standardize indicators from ExE Boss.
  • Remove the localize macro (KumaScript PR 897), from wbamberg, one of 25 macros removed in the macro massacre.
  • A step sequencer demo (webaudio-examples PR 13), one of several audio demos from Ruth John.
A step sequencer demonstrating web audio APIs.
78 pull requests were from first-time contributors:
  • Add details for MS Edge support of SubtleCrypto (BCD PR 2738), from Wim L.
  • Add support for CSS property -moz-image-region (BCD PR 2853), from Shivam Singhal.
  • Add browser versions for CSS property scroll-snap-type (BCD PR 2867), from Chris Bitsakis.
  • Add data for overflow-clip-box-*, -moz-user-focus, and (-moz-)user-modify (PR 2868), Add data for many non-standard CSS properties/selectors (PR 2874), and 11 more PRs to BCD from Vinyl Darkscratch.
  • Add Edge support for Intl (BCD PR 2882), from Jack Horton.
  • Add Edge 18 and supported features (BCD PR 2907), from Merih Akar.
  • Fix typo (“performace.now()” to “performance.now()”) (BCD PR 2914), from Merlin Luntke.
  • Update to extend 3.0.2 (BCD PR 2916), from Jonathan Felchlin.
  • Update Firefox’s supported <iframe sandbox> attributes (BCD PR 2919), from Dan Callahan.
  • Fix typo and link to capabilities on MDN (BCD PR 2930), from Andreas Tolfsen.
  • Add Edge Mobile’s support of <input type=date> (BCD PR 2932), from Jeff Powell.
  • Add IE’s partial support of HTMLHyperlinkElementUtils.pathname (BCD PR 2934), from wizzwizz4.
  • Add Firefox 57 support for MediaPlayPause (BCD PR 2936), from Carlin Scott.
  • Add note that IE does not support Node.contains for SVG elements (BCD PR 2942), from Pascal Duez.
  • Add notes for Origin header change in Firefox 59 (BCD PR 2943), from Théophile Helleboid – chtitux.
  • Add support details for FontFaceSet API in Chromium and Opera (BCD PR 2948), from Gerhard Preuss.
  • Update IE support for window.scrollBy (BCD PR 2975), from Mathieu Lemoine.
  • Add Safari 11.1 support for CacheStorage API (BCD PR 2976), from Jianrong Yu.
  • Update Chrome’s and Opera’s support for MediaRecorder (PR 2977), Update Selection support in Chrome and Opera (PR 3032), and Update ImageBitmap API support (PR 3033), to BCD from Xiaoru Li.
  • Change Edge 17 to partial support for fieldset disabled attribute (PR 2978), and Change IE 9 to partial support for box-shadow inset (PR 2996), to BCD from Bart Groeneveld.
  • Add notes that Edge support for CustomElements and ShadowDOM is in development (BCD PR 2982), from Jim Montgomery.
  • Add details of browser support for CSS all (BCD PR 2986), from Pier Bover.
  • Add Safari versions that support FormData methods (BCD PR 2988), from Rouven Bühlmann.
  • Remove Edge support for ::cue selector (BCD PR 2998), from Clement Allen.
  • Add Android WebView 61 support for JavaScript import (BCD PR 3001), from happy-monk.
  • Add IE and Safari support for document.createComment (BCD PR 3003), from Giordano Ricci.
  • Add Edge 12 support for Element.scrollIntoView (BCD PR 3006), from Michel Plungjan.
  • Add support for CSS properties block-size and inline-size (BCD PR 3012), from cartinez.
  • Add Edge 18 support for Promise.finally (BCD PR 3013), from Pedro Barbiero.
  • Add Chrome 69 support for OffscreenCanvas without a flag (PR 3017), and Add Chrome 69 support for transferControlToOffscreen without a flag (PR 3019), to BCD from SMUsamaShah.
  • Add Edge 15 support for Brotli compression (BCD PR 3023), from Jacob Stamm.
  • Remove Safari support for Element.animate (BCD PR 3028), from Jérémy Thulliez.
  • Fix alternative names for WebGL in Firefox (BCD PR 3029), from Anis Ladram.
  • Add Safari 7 support for document.createComment (BCD PR 3037), from Ben Keith.
  • Add accessible text to social icons (PR 5000), from Hidde de Vries (first contribution to Kuma).
  • Hide code line numbers from screen readers (PR 5047), from arai-a (first contribution to Kuma).
  • Fix hash link on pages without Table of Contents (Kuma PR 5057), from urty5656.
  • Add Stripe customer ID to MDN user record (Kuma PR 5059), from Michal Macioszczyk.
  • Update sidebars to use details/summary (PR 789), from tkadlec (first contribution to KumaScript).
  • Change wording of vendor prefix note in compatibility table (PR 806), from Connor Shea (first contribution to KumaScript).
  • Remove lightweight themes from the sidebar. (PR 965), from Irene Smith (first contribution to KumaScript).
  • Use += instead of a = a + x (PR 1171), from a now deleted user (first contribution to Interactive Examples).
  • Add example for headings <h1> through <h6> (Interactive Examples PR 1180), from Tremaine Neethling.
  • Update JavaScript Object.entries example (Interactive Examples PR 1182), from Raju Gautam.
  • Use template strings to improve readability (Interactive Examples PR 1187), from Flying-Toast.
  • Add “attribute-“ prefix to HTML attribute examples (Interactive Examples PR 1189), from Dimitri Belopopsky.
  • Fix bug in String.normalize live example (Interactive Examples PR 1193), from Eugene Dzhumak.
  • Use consistent white space, switch to arrow functions, and address other nits (webaudio-examples PR 20), from Stoyan.
  • Add :blank CSS selector data (PR 298), from Michal Čaplygin (first contribution to Data).
  • Correct the list of observed attributes (web-components-examples PR 10), from LordRegentTB.
  • Improve edit-word demo (web-components-examples PR 11), from Jan Murmann.
  • Remove warning about Firefox 33 from @counter-style demo (css-examples PR 10), from Razvan Caliman.
  • Add minimal ttml sample for live preview (imsc PR 3), from Andreas Tai.
  • Add inline styles example (imsc PR 4), from Pierre-Anthony Lemieux.
  • Add initial license info (PR 1), from Daniel D. Beck (first contribution to short-descriptions).
  • Add guidelines for CSS short descriptions (PR 3), from wbamberg (first contribution to short-descriptions).
  • Update var to let (learning-area PR 106), from Lisa Tidball.
  • Make website responsive (web-tech-games PR 2), from Purushottam Sharma.
  • Reduce image sizes for A2HS demo (pwa-examples PR 9), from Nemo.
  • Change the var keyword to let (fibonacci-worker PR 3), from Varsha Chahal.
  • Add custom issue template to replace Bugzilla documentation requests (PR 505), from Janet Swisher (first contribution to sprints).
  • Add authentication and role-based authorization (express-locallibrary-tutorial PR 54), from Caglar Turali.
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.

... more @ hacks.mozilla.org

hacks.mozilla.org