Testing for performance
- 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
- 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
- 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
- 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