Testing for performance At Wix tech Talks Vilnius.

1. Dan Shappir, Performance Tech Lead
danshl@wix.com twitter@DanShappir github.com/DanShappir
Testing For Performance

2. Hi.
I’m Dan
Performance Tech Lead at Wix R&D
Making over 100 Million sites load and execute
faster
dansh@wix.com twitter@DanShappir www.wix.engineering

3. Wix In Numbers.
130 million users
(+2 million each month)
~1 billion monthly visits
Multiple clouds & data
centers (Amazon, Google)
> 2000 Employees
(~50% R&D)
#5 best software company
to work for worldwide
(according to Glassdoor, 2018)

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

5. AGENDA
● Why is Performance important & challenging
● What is (Web) Performance
● How to Measure and Test Performance
● Integrating performance into the build and
testing cycle

6. Why is
Performance
Important and
Challenging

7. A website’s performance is critical to its
success.
Source: Pingdom,
2018
Bounce Rate (%)
Pageviews (%)

8. If your site is slow users won’t
wait for it, regardless of how
good it is

9. When A Website Is Slow To Load.
▪ 11% yell at their phone
▪ 23% swear at their phone
▪ 4% throw their phone !!!

10. Not All Phones Are Created Equal*
* And don’t forget the different networks

11. Web Page Download Size.
Source: SpeedCurve, 2018

12. Web Page Resources Download
Size.
Source: SpeedCurve, 2018

13. JavaScript Processing Times.

14. What is (Web)
Performance

15. What to Measure.
The RAIL model breaks down the user's experience into key actions:

16. Page Loading Steps.
First Paint
First Contentful
Paint
First Meaningful
Paint
Time To
Interactive

17. How to Measure
and Test
Performance

18. “If you can’t measure
it, you can’t improve
it” -- Peter Drucker

19. When to Measure.
Dev-time
Locally
(your session)
Production
Real User
Measurements
Pre-release
Synthetic
sessions

20. Measuring Performance.
▪ WebPageTest.org
▪ Google Lighthouse:
○ Built-in in Chrome Dev Tools
○ PageSpeed Insights
○ web.dev
○ WebPageTest.org/lighthouse
▪ Pingdom

21. DEMO
▪ Lighthouse
▪ WebPageTest

22. Integrating
performance into
the build and
testing cycle

23. Performance Budget.
A limit for pages which the team is not allowed to exceed, such as:
▪ Maximum JavaScript bundle sizes
▪ Total media weight
▪ A specific load time (e.g Time-to-Interactive in under 5s on 3G)
▪ Lighthouse scores

24. Tools For Enforcing Performance Budget.
▪ Use Performance Budget Calculator for estimated budget values
▪ bundlesize for catching JavaScript size regressions in CI
▪ WebPack has built-in support: warn / error on bundle size
▪ WebPageTest.org automation
▪ Use Lighthouse CI to fail build when a score falls under a certain value
▪ SpeedCurve support setting budgets for metrics, sizes and Lighthouse audits
▪ Garie is an Open Source tools which provides dashboards and reporting for
web performance

25. You gotta...● Understand your requirements
● Set (realistic) performance
budgets
● Test for these budgets
● Fail on performance
regressions
If you don’t test for
performance, it
won’t happen

26. Thank You
talkol@wix.com twitter@koltal linkedin/talkol github.com/talkol

27. Q&A
talkol@wix.com twitter@koltal linkedin/talkol github.com/talkol