Times Square is the most visited place globally with about 380,000 pedestrian visitors a day - roughly the same amount of people which go to Wix’s dashboard. Building a page which receives such high traffic requires having great performance and intelligent architecture. In this talk, Eyal will go over the challenges of rebuilding Wix’s dashboard, the architecture and how we got it to load under 1 second.

1. eyale@wix.com twitter@eyaleizenberg linkedin/eyal-eizenberg github.com/eyaleizenberg
Tipping the scale
Eyal Eizenberg
Team Leader at Wix OS and managing Wix Haifa

2. This is me

3. Wix Engineering
Locations
Ukraine Israel Lithuania
VilniusKiev
Dnipro
Tel-Aviv
Be’er
Sheva
Haifa

4. We’ll talk about
How to build a very complex web page
for big scale traffic
Let’s say 150M website editors...

5. Meet John
A Photographer

6. Meet John
A Photographer
Wix user

7. Blog
Photo
album
Contacts
Ecom News
letter
Meet John
A Photographer
Wix user
Boost his website with
cool widgets and apps

8. ...and many back offices
Blog
Photo
album
Contacts
Ecom News
letter

9. One back office to rule them all

10. Business Manager

11. Dashboard 1.0

12. Dashboard 1.0
Common actions and information

13. Dashboard 1.0
Information of specific verticals

14. npm dep 1
npm dep 2
npm dep 3
npm dep ...
Dashboard 1.0
React/Redux/Typescript

15. Dashboard 1.0
+ Skeleton for perceived performance
React/Redux/Typescript
npm dep 2
npm dep 3
npm dep ...
npm dep 1

16. Performance
Perceived
performance
Product
Complexity
Dashboard 1.0
… but it had
some issues

17. Performance
Perceived
performance
Product
Complexity
Dashboard 1.0
One Big projectSite Details
bundle ~ 115KB

18. Performance
Perceived
performance
Product
Complexity
Dashboard 1.0
One unit - the weakest sets the tone

19. Performance
Perceived
performance
Product
Complexity
Dashboard 1.0
Steps for Ecom Steps for Events
Steps for Main Funnel
Isolated setup widgets

20. Performance
Perceived
performance
Product
Complexity
Dashboard 1.0
Isolated setup widgets

21. Dashboard
2.0

22. Site details
Omni setup
Blog
Answers
Dashboard 2.0
Performanc
e
● Separate widgets

23. Dashboard 2.0
Performanc
e
● Separate widgets
● Lazy components
Site details
Omni setup
Blog
Answers

24. Bundle arrived
Component renders
content
Parent loads the lazy
Nothing is rendered
Bundle is fetched in the
background
What is a Lazy Component?

25. Benefits of Lazy Components
▪ Many small bundles VS one big one (better for incremental performance)
▪ Confidence in deploying individual micro services
▪ Easier to test (unit & integration)
▪ Better perceived performance
Dashboard 2.0

26. Dashboard 2.0
Perceived
Performanc
e
● Separate Skeletons

27. Product
Dashboard 2.0
Increased conversion ~5%
Increased completion of setup
steps drastically ~30%
Improved many other KPIs

28. Dev Velocity
▪ Devs are spread across multiple projects
▪ Small relatively simple projects
▪ We switch to Wix Serverless
▪ From all FEDs we became all Full Stack Developers
Dashboard 2.0

29. Common Issues & Optimizations

30. Bundle arrived
Component renders
content
Data starts fetching
Data Arrived
Component renders
Content
Parent loads the lazy
Nothing is rendered
Bundle is fetched in the
background
Fetching Data from Lazy Components

31. Parent loads the lazy
Data/Bundle start
fetching
Data Arrived
Component renders
Content
Nothing is rendered
Bundle is fetched in the
background
Bundle arrived
Component renders
content
Solution: Simultaneous Fetching

32. Increased
bundle size
due to
duplicate
dependencies

33. Solution:
Re-use
packages and
extract
common code

34. Increased bundle size due to translations

35. Solution: Fetch only needed language
BONUS: Make the translations
“deployable”

36. Browser Throttling
▪ Many microservices means many network calls
▪ HTTP1 limits browsers to 6 concurrent requests to the same host
▪ Requests are stalled while in queue

40. Solution: Switch to HTTP2 & Bulk Requests
▪ No limit of concurrent requests
▪ Identical requests should be “reused” and the response should be shared.

44. Increased bundle size due to unique code

45. Solution: Work with product and...

46. …use Webpack/React code splitting

47. Some issues we are facing
moving forward

48. Disappearing
Skeletons

49. Disappearing
Skeletons

50. Blocking Breaking Dependencies
Dashboard
Widget B
Widget CWidget A

51. Blocking Breaking Dependencies
Dashboard
Widget B
Widget CWidget A

52. Solution: “Calculate” Layout in a Server
▪ Widgets will “register” to the layout service
▪ “Calculations” will be done in the server
▪ Remove build dependency completely
▪ Skeletons will appear only for relevant widgets
▪ Data will be fetched for all in the server, eliminating client-server hop
▪ Server will return lazy components & their relevant data

53. Consider what’s good to SHARE,
and what’s good for you to BREAK APART
Design, behaviors,
common code/packages...
Skeleton,
one big repo...

54. Thank You
eyale@wix.com twitter@eyaleizenberg linkedin/eyal-eizenberg github.com/eyaleizenberg

55. Q&A
eyale@wix.com twitter@eyaleizenberg linkedin/eyal-eizenberg github.com/eyaleizenberg