Performance improvements 🔥 🔥 🔥

[denar90]

Hi. I wanted to share some ideas about docs performance improvements.

TL;DR:

I have some history, so let's go.

Using pwmetrics some measurements were done.

P.S. It’s taking measurements using Nexus 5 devices emulation and 1.6 Mbps network throttling.

So, looks like there some place for opportunity,
Below some inconsistent behavior of FOIC (flash of invisible content) and FOUC (flash of unstyled content) can be noticed.

FOIC

FOUC

It will be nice to show fallback font as soon as possible and add progressive enhancement strategy to the site.

But, first of all, scripts which are blocking First Paint should be managed.

Timeline trace

---

So, adding defer attribute to all these scripts (except vue.js, we will manage it later) brought us to

100ms for TTCI and TTFI not so impressive but it’s something.
Commit - b996ecf

Continue….

---

Adding defer to vue.js saved us
FCP - 3,528 sec -> 1,972 sec
FMP - 4,627 sec -> 3,419 sec
PSI - 6,116 sec -> 4,912 sec
TTFI - 6,066 sec -> 4,861 sec
TTCI - 6,066 sec -> 4,861 sec

Good, but we can do more.
Commit - 97ea5db

P.S. Adding defer requires to warp example codes into domContentLoaded listener, but I think it can be easily done in scope of hexo-renderer-marked fork.

---

Looks like fonts loading is blocking FMP

Timeline trace

Since browsers repaint after loading resources founded in body

we can cheat and move loading resources fonts there.
Commit - 7fba6b7

Results:

Really really nice results on chart.

FMP, FCP under 2 sec
TTCI, TTCI, PSI under 5 sec

How it looks in browser

FOIC

FOUC

Not nice behavior for browsers with FOIC strategy…

---

But, we have fontfaceobserver which detects fonts loading. Let's try it.

So, results are:
Timeline trace

FMP, FCP under 2 sec, still the same
TTCI, TTCI, PSI under 5,2 sec instead of 4,8 sec

Hense, 400ms looks like a good trade off for consistent behavior through all browsers.
Commit - 6b13c3

And, last gifs

FOIC

FOUC

Aaaaand to compare the before and after...

Thanks :)

P.S. In case supporting only evergreen browsers font-display can manage FOIC.

[chrisvfritz]

Nice work and detailed notes! The only immediate issue (that comes to mind at least) is the code demos, which are actually handled outside of the Markdown renderer (even though they're in MD files). I think the only solution might be to manually wrap every example in a DOMContentLoaded listener, which I don't have a problem with, if you're willing to make those updates.

[denar90]

@chrisvfritz thanks for the reply. I've wrapped all examples :)

[chrisvfritz]

@denar90 Hmm, I'm actually testing this out in the browser now and immediately, I noticed that the body font doesn't seem to be loading anymore. 😕 The short flash of the fallback font is also a little off-putting to me - I'm thinking it should at least be sans-serif, like the primary font.

I'm a bit torn, because you've obviously put a lot of work into this and I do appreciate it, but seeing a problem right away has made me more cautious. Since the performance of the site is already pretty good, I'm not sure how much time I'd like to spend troubleshooting this - and perhaps other, more subtle bugs in the future.

If there's a @vuejs/docs team member that wants to take responsibility for this PR and work with @denar90 to ensure it doesn't break anything, I'm happy to keep this open and eventually merge. In my personal priorities for my Vue work, I worry that it's just not high enough. 😞

[denar90]

@chrisvfritz I really appreciate that you spend time looking at it.
It's true that there really present some issue, I messed up with some code because of rebasing and stuff and wanna apologize for wasting your time.

Talking about this PR, in general, I can say that it became too big because of wrapping all examples.
Wrapping each example in DOMContentLoaded event listener might cause some bugs if not now but in future creating new vue example.
Another thing is about using js for detecting loaded fonts. If you are happy using font-display and have behavior with FOIC for browsers are not supporting it https://caniuse.com/#search=font-display then js logic can be reduced.

So, I'm closing it but if someone from @vuejs team is interested in this improvements I'll be more than happy finish it :)

[chrisvfritz]

@denar90 Thanks for your understanding. 🙂 Despite this not quite fitting in with our current priorities, I do want to thank you for opening this PR. It's definitely one of the most organized and well-communicated I've ever seen and I definitely hope we see more from you in the future! 👍