Getting your Team Passionate About Web Performance to Achieve Performant Web Apps

Getting your Team Passionate About Web Performance to Achieve Performant Web Apps & /phacks

OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME Why performance matters & /phacks

OUTLINE Performance matters for your business WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks Source: https://wpostats.com/

OUTLINE Performance matters for your business WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE THE LEAN PHILOSOPHY THE RIGHT TOOLS Zalando saw a 0.7% increase in revenue when they shaved 100ms off their load time. PERFORMANCE IS A LONG GAME & /phacks Source: https://wpostats.com/

OUTLINE Performance matters for your business WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & Zalando saw a 0.7% increase in revenue when they shaved 100ms off their load time. Trainline reduced latency by 0.3 seconds across their funnel and customers spent an extra £8 million (~€9.1 million) a year. /phacks Source: https://wpostats.com/

OUTLINE Performance matters for your business WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & Zalando saw a 0.7% increase in revenue when they shaved 100ms off their load time. Trainline reduced latency by 0.3 seconds across their funnel and customers spent of the new,(~€9.1 fastermillion) FT.coma showed an Tests extra £8 million year. users were up to 30% more engaged— meaning more visits and more content being consumed. /phacks Source: https://wpostats.com/

OUTLINE Performance matters for your business WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & Zalando saw a 0.7% increase in revenue when they shaved 100ms off their load time. Trainline reduced latency by 0.3 seconds across their funnel and customers spent of the new,(~€9.1 fastermillion) FT.coma showed an Tests extra £8 million year. users were up to 30% more engaged— meaning more visits and more content BBC has seen that they lose an being consumed. additional 10% of users for every additional second it takes for their site to load /phacks Source: https://wpostats.com/

OUTLINE Performance matters for your business WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks Zalando saw a 0.7% increase in revenue when they shaved 100ms off their load time. Trainline reduced latency by 0.3 seconds across their funnel and customers spent of the new,(~€9.1 fastermillion) FT.coma showed an Tests extra £8 million year. users were up to 30% more engaged— meaning more visits and more content BBC has seen that they lose an being consumed. additional 10% of users for every additional second it takes for their site to Rebuilding Pinterest pages for load performance resulted in a 15% increase in SEO traffic and a 15% increase in conversion rate to signup. Source: https://wpostats.com/

OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks “Poor performance can, and does, lead to exclusion.”  Tim Kadlek

OUTLINE WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks The ethics of web performance

OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks Source: https://v8.dev/blog/cost-of-javascript-2019

OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks Source: https://blog.chriszacharias.com/page-weight-matters

OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME “Performance good practices] have well-known benefits to usability, but are also acts of environmental protection.”  Cennydd Bowles, Future Ethics & /phacks

OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks 🐌 Source: https://timkadlec.com/remembers/20190109-the-ethics-of-performance/

OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME 🐌 “I need to buy a new phone” & /phacks Source: https://timkadlec.com/remembers/20190109-the-ethics-of-performance/

OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks 🔋 Source: https://timkadlec.com/remembers/20190109-the-ethics-of-performance/

OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME 🔋 “My battery does not last a full day anymore” & /phacks Source: https://timkadlec.com/remembers/20190109-the-ethics-of-performance/

OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks ♻ Source: https://timkadlec.com/remembers/20190109-the-ethics-of-performance/

OUTLINE The ethics of web performance WHY PERFORMANCE MATTERS THE BUSINESS STANDPOINT THE ETHICS OF WEB PERFORMANCE THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME ♻ Web Performance is not a zero-sum game & /phacks Source: https://timkadlec.com/remembers/20190109-the-ethics-of-performance/

Nicolas Goutay Web Performance Evangelist  Theodo Twitter: @phacks & /phacks

🗓 Feb. 2018 🚀🚀🚀🐌🐌 🐌🐌🐌🐌🐌 🐌🐌🐌🐌🐌 🐌🐌 🤔 & /phacks

🗓 Feb. 2018 🗓 Jan. 2019 🚀🚀🚀🐌🐌 🐌🐌🐌🐌🐌 🐌🐌🐌🐌🐌 🐌🐌 🚀🚀🚀🚀🚀 🚀🚀🚀🚀🚀 🐌🐌🐌🐌🐌 🐌🐌🐌 🤔 🙂 & /phacks

🗓 Feb. 2018 🗓 Jan. 2019 🗓 Dec. 2019 🚀🚀🚀🐌🐌 🐌🐌🐌🐌🐌 🐌🐌🐌🐌🐌 🐌🐌 🚀🚀🚀🚀🚀 🚀🚀🚀🚀🚀 🐌🐌🐌🐌🐌 🐌🐌🐌 🚀🚀🚀🚀🚀 🚀🚀🚀🚀🚀 🚀🚀🚀🚀🚀 🚀🐌🐌🐌🐌 🐌🐌 🤔 🙂 🥳 & /phacks

OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME The Lean Philosophy & /phacks

OUTLINE What is Lean? WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY WHAT IS LEAN? IDENTIFYING THE VALUE STREAM CATCHING PROBLEMS AT THE EARLIEST THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks Lean is a systematic method to maximize customer value while minimizing waste.

OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY WHAT IS LEAN? IDENTIFYING THE VALUE STREAM CATCHING PROBLEMS AT THE EARLIEST THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks What is Lean?

OUTLINE Identifying the Value Stream WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY WHAT IS LEAN? IDENTIFYING THE VALUE STREAM CATCHING PROBLEMS AT THE EARLIEST THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks Maps the value-added steps to go from the raw materials to the finished product

OUTLINE Identifying the Value Stream WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY WHAT IS LEAN? IDENTIFYING THE VALUE STREAM CATCHING PROBLEMS AT THE EARLIEST THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks Rendering a Web Page is a process

OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY WHAT IS LEAN? IDENTIFYING THE VALUE STREAM CATCHING PROBLEMS AT THE EARLIEST THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks Identifying the Value Stream

OUTLINE Identifying the Value Stream WHY PERFORMANCE MATTERS ⏱ ✅ THE LEAN PHILOSOPHY WHAT IS LEAN? IDENTIFYING THE VALUE STREAM ✅ CATCHING PROBLEMS AT THE EARLIEST Cache Control: Private THE RIGHT TOOLS PERFORMANCE IS A LONG GAME ⏱ & /phacks ❌ ⏱

Identifying the Value Stream OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY WHAT IS LEAN? IDENTIFYING THE VALUE STREAM CATCHING PROBLEMS AT THE EARLIEST THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks 👀 Takes into account the whole process

Identifying the Value Stream OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY WHAT IS LEAN? IDENTIFYING THE VALUE STREAM CATCHING PROBLEMS AT THE EARLIEST THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks 👀 Takes into account the whole process 👋 Teams asked for help much sooner

Identifying the Value Stream OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY WHAT IS LEAN? IDENTIFYING THE VALUE STREAM CATCHING PROBLEMS AT THE EARLIEST 👀 Takes into account the whole process 👋 Teams asked for help much sooner 👥 Collaboration with stakeholders THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks

Identifying the Value Stream OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY WHAT IS LEAN? IDENTIFYING THE VALUE STREAM CATCHING PROBLEMS AT THE EARLIEST 👀 Takes into account the whole process 👋 Teams asked for help much sooner 👥 Collaboration with stakeholders 💡 Easily point to solutions THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks

Identifying the Value Stream OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY WHAT IS LEAN? IDENTIFYING THE VALUE STREAM CATCHING PROBLEMS AT THE EARLIEST 👀 Takes into account the whole process 👋 Teams asked for help much sooner 👥 Collaboration with stakeholders 💡 Easily point to solutions 📸 Look at the bigger picture THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks

OUTLINE Jidoka: catch problems at the earliest WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY WHAT IS LEAN? IDENTIFYING THE VALUE STREAM CATCHING PROBLEMS AT THE EARLIEST THE RIGHT TOOLS PERFORMANCE IS A LONG GAME The Andon cord & /phacks

Jidoka: catch problems at the earliest OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY WHAT IS LEAN? IDENTIFYING THE VALUE STREAM CATCHING PROBLEMS AT THE EARLIEST THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks 🛑 Stops the line of production

Jidoka: catch problems at the earliest OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY WHAT IS LEAN? IDENTIFYING THE VALUE STREAM CATCHING PROBLEMS AT THE EARLIEST THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks 🛑 Stops the line of production 🧠 Prevents the problem from happening again

OUTLINE Jidoka: catch problems at the earliest WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY WHAT IS LEAN? IDENTIFYING THE VALUE STREAM CATCHING PROBLEMS AT THE EARLIEST THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks In the IDE We use the Import Cost VSCode extension to detect heavy libraries when we add them to our code.

OUTLINE Jidoka: catch problems at the earliest WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY WHAT IS LEAN? IDENTIFYING THE VALUE STREAM CATCHING PROBLEMS AT THE EARLIEST THE RIGHT TOOLS PERFORMANCE IS A LONG GAME & /phacks In the CI We check on each PR if the bundle size of our web site is under a certain threshold (here, 500Kb).

OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME The Right Tools & /phacks

OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS KEEPING IT SMALL KEEPING IT SNAPPY PERFORMANCE IS A LONG GAME & /phacks Keeping it small 🎨 Coverage Real-time CSS & JS code coverage. 💡 Helpful for: detecting unused libraries or dead code.

OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS KEEPING IT SMALL KEEPING IT SNAPPY PERFORMANCE IS A LONG GAME & /phacks Keeping it small 📦 bundlesize CI-friendly bundle size checker. 💡 Helpful for: detecting if your JS goes over a certain threshold

OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS KEEPING IT SMALL KEEPING IT SNAPPY PERFORMANCE IS A LONG GAME & /phacks Keeping it small 😱 Bundlephobia Find the performance cost of a npm package 💡 Helpful for Deciding between two libraries w/ similar features

OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS KEEPING IT SMALL KEEPING IT SNAPPY PERFORMANCE IS A LONG GAME & /phacks Keeping it snappy 🎨 Paint Flashing Highlight Chrome repaints of parts of your UI 💡 Helpful for: detecting useless renders slowing down the UI

OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS KEEPING IT SMALL KEEPING IT SNAPPY PERFORMANCE IS A LONG GAME & /phacks Keeping it snappy ❓ why-did-you-update Detects React’s unnecessary updates 💡 Helpful for: detecting useless renders slowing down the UI.

OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME Performance is a long game & /phacks

OUTLINE Third party scripts have an impact WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks Average mobile impact. Source & methodology: https://www.thirdpartyweb.today/

OUTLINE Third party scripts have an impact WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS Google Ad Manager costs 450ms PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks Average mobile impact. Source & methodology: https://www.thirdpartyweb.today/

OUTLINE Third party scripts have an impact WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS Google Ad Manager costs 450ms PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING The YouTube video player costs 700ms OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks Average mobile impact. Source & methodology: https://www.thirdpartyweb.today/

OUTLINE Third party scripts have an impact WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS Google Ad Manager costs 450ms PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING The YouTube video player costs 700ms OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & Google Maps widget costs 200ms /phacks Average mobile impact. Source & methodology: https://www.thirdpartyweb.today/

OUTLINE Third party scripts have an impact WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS Google Ad Manager costs 450ms PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING The YouTube video player costs 700ms OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO Google Maps widget costs 200ms HotJar session replay costs 90ms & /phacks Average mobile impact. Source & methodology: https://www.thirdpartyweb.today/

OUTLINE Third party scripts have an impact WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS Google Ad Manager costs 450ms PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING The YouTube video player costs 700ms OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO Google Maps widget costs 200ms HotJar session replay costs 90ms Facebook Share widget costs 160ms & /phacks Average mobile impact. Source & methodology: https://www.thirdpartyweb.today/

OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS JavaScript bloat has an impact “Every 100KB of compressed JS results in a 34 second increase in Time to Interactive on a 3G connection”  Paul Calvano PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks Source: https://twitter.com/paulcalvano/status/1179192810727186433

OUTLINE Open Source performance auditing tools WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks Lighthouse

OUTLINE Open Source performance auditing tools WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks WebPageTest

OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks Falco, our WebPageTest runner

OUTLINE Falco, our WebPageTest runner WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & ❤ Falco is Open Source /phacks

OUTLINE WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks Falco, our WebPageTest runner

OUTLINE Falco, our WebPageTest runner WHY PERFORMANCE MATTERS THE LEAN PHILOSOPHY THE RIGHT TOOLS PERFORMANCE IS A LONG GAME THE IMPORTANCE OF MONITORING OPEN SOURCE PERFORMANCE AUDIT TOOLS ENTERS FALCO & /phacks https://github.com/theodo/falco https://getfal.co

Thank you! Slides will be available later today on my Twitter: @phacks Fonts used for this presentation: • Faune (headers) by Alice Savoie/CNAP • Overpass (outline) by Delve Fonts • Inter (body copy) by Rasmus Andersson • IBM Plex Mono (monospace) by IBM & /phacks

Getting your Team Passionate About Web Performance to Achieve Performant Web Apps

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67