Consider removing some fonts/variations

[atopal]

Tasks:

• Identify where each font and variant is used
• decision about where needed/not needed
• removing unnecessary ones from the site
• measure and record performance impact

Acceptance Criteria:

• font usage investigated and unnecessary ones removed
• performance impact reported

[tkadlec]

Took a look at where each variant is being used on the home page. Posting images here for posterity.

[tkadlec]

Font Synthesis testing to see what happens if we only load the regular versions of each font.

Chrome

Safari

Firefox

[atopal]

@tkadlec can we get this with a wiki article page?

[tkadlec]

@atopal Like so? https://github.com/mdn/mdn-fiori/wiki/MDN-Web-Fonts

@schalkneethling Let me know if I should do this as a page elsewhere. I know we put the metrics here and I think that's where you wanted these kinds of things.

[schalkneethling]

@tkadlec That totally works for me. Thanks a lot!

[atopal]

Hey Tim, can you share your numbers here too? I was kinda hoping for a bigger impact, but I still think we should go ahead with just Zilla slab and bold. Can you prep the PR?

[tkadlec]

Here are the results. Adding percentages too, since I think that may provide a better perspective of the impact (MDN being pretty quick already means it's hard to get huge raw numbers).

JavaScript page

Test case: 3G network, Moto G

• Start Render: 47ms faster (1.3% improvement)
• First Interactive: 774ms faster (13.3% improvement)
• Visually Complete: 992ms faster (16.8% improvement)
• Speed Index: 248 points faster (6.2% improvement)
• Body Copy displays: 1.6s faster (30% improvement)

http://www.webpagetest.org/video/compare.php?tests=180830_RK_3d384deba8db3d8617ad5df3fc3ca95d%2C180830_2R_d844ff49886ad23aea853ba97dff857b&thumbSize=200&ival=100&end=visual

Interactive Example Page

Test case: 3.5x throttling, Cable connection

• Start Render: 100ms faster (5.2% improvement)
• First Interactive: 501ms faster (11.9% improvement)
• Visually Complete: 500ms faster (11.1% improvement)
• Speed Index: 230 points faster (10.4% improvement)
• Interactive Editor Interactive: 534ms faster (12.2% improvement)
• Interactive Editor Complete: 517ms faster (11.7% improvement)

http://www.webpagetest.org/video/compare.php?tests=180830_D1_dca45302fc9b757dec936fbb6c87244d%2C180830_SH_706e33894647de56f2e1305cb126ded8&thumbSize=200&ival=100&end=visual

Home Page

Test case: 3.5x throttling, Cable connection

• Start Render: 200ms faster (13.3% improvement)
• First Interactive: 199ms faster (13.3% improvement)
• Visually Complete: 300ms faster (14.3% improvement)
• Speed Index: 303 points faster (18.6% improvement)

http://www.webpagetest.org/video/compare.php?tests=180830_1K_bca0a2c75257ad5230ef701d4d3c15ca%2C180830_VG_0dab7a527b16c49d9a3531bda6aff4bf&thumbSize=200&ival=100&end=visual

[jwhitlock]

The changes in mdn/kuma#4967 have been deployed, and there's a lot more Verdana.

[jwhitlock]

Follow-on work to try Arial in bug 1491154.