[docs] Improve lighthouse performance score

[eps1lon]

Doing some lighthouse perf auditing. Starting with using font-display: swap.

Only auditing the landing page in this PR. Should have the most potential.

lighthouse report from this PR

[mui-pr-bot]

Details of bundle changes.

Comparing: df50ea7...9e5bb30

bundle	parsed diff	gzip diff	prev parsed	current parsed	prev gzip	current gzip
@material-ui/core	0.00%	0.00%	315,971	315,971	86,587	86,587
@material-ui/core/Paper	0.00%	0.00%	67,870	67,870	20,158	20,158
@material-ui/core/Paper.esm	0.00%	0.00%	61,152	61,152	18,947	18,947
@material-ui/core/Popper	0.00%	0.00%	28,740	28,740	10,352	10,352
@material-ui/core/Textarea	0.00%	0.00%	5,513	5,513	2,378	2,378
@material-ui/core/TrapFocus	0.00%	0.00%	3,744	3,744	1,580	1,580
@material-ui/core/styles/createMuiTheme	0.00%	0.00%	15,960	15,960	5,782	5,782
@material-ui/core/useMediaQuery	0.00%	0.00%	2,106	2,106	975	975
@material-ui/lab	0.00%	0.00%	139,101	139,101	42,772	42,772
@material-ui/styles	0.00%	0.00%	51,353	51,353	15,176	15,176
@material-ui/system	0.00%	0.00%	14,458	14,458	4,184	4,184
Button	0.00%	0.00%	84,061	84,061	25,582	25,582
Modal	0.00%	0.00%	20,344	20,344	6,684	6,684
colorManipulator	0.00%	0.00%	3,904	3,904	1,543	1,543
docs.landing	-0.12%	+0.47% 🔺	56,051	55,983	13,962	14,027
docs.main	0.00%	0.00%	645,685	645,698	203,069	203,078
packages/material-ui/build/umd/material-ui.production.min.js	0.00%	0.00%	294,911	294,911	84,103	84,103

Generated by 🚫 dangerJS against 9e5bb30

[oliviertassinari]

It remembers me: #14299

[eps1lon]

It remembers me: #14299

I'm not you should actually lazy load main fonts. Didn't find anything in the lighthouse docs. What I am wondering though is if we shouldn't extract the font paths and preload them. Not sure if the *.woff paths change very often but currently this results in a waterfall from doc -> fonts.googleapis -> gstatic.

fonts.googleapis is also a bit wasteful since it loads greek, vietnames etc. Though it does document a subset query param but that doesn't seem to work.

[oliviertassinari]

@eps1lon Anything missing for leaving the "Draft" state?

[eps1lon]

Yes

[oliviertassinari]

The changes helps:

Before

---

After

[oliviertassinari]

Well done.

[eps1lon]

Yeah I was hoping to gain a bit more but I guess there are some false positives from lightouse. At least the input latency doesn't make much sense.

[oliviertassinari]

Maybe it's something to explore: https://www.webpagetest.org/result/190525_2S_ba02c243c6318fd2a192baeae34e4e47/. The rendering gap in the middle is strange. Bandwidth is low, CPU usage is low, and yet, the main thread is busy for 1s:

[ithinco]

Hi, @eps1lon @oliviertassinari , this doesn't work for lighthouse any more.

<link rel="preload" as="font" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

works as expected.