FRONTEND PERFORMANCE
OPTIMIZATION

A case study from zXXXS-mvp2

ZXXXS MVP2

🤔

identify 🔎
analyze 🧐
tweak 👾
measure 🤓
repeat 🔁

"lazy-loading images is NOT WORKING ANYMORE"

• staging2 (original)

• ed32f0739 (before optimize)

• 21ea04e1 (afterRender) #1978

• 97e35881 (mCustomScrollbar) #1981

• next: afterRender

• de7a878c (setTimeout)

• de18908e ($.show()) #1982

• audit network

• c30794e3 (loadCSS) #1985

https://developers.google.com/web/fundamentals/performance/rendering/

https://www.youtube.com/watch?v=8aGhZQkoFbQ

https://twitter.com/paul_irish/status/564443848613847040?lang=en

further improvements

• initialize plugins only when needed
  (Idle Until Urgent)
• age slider
• fouc
• 60fps

🤔  🙋‍♀️  🤮