How to Create Impact in a Changing Tech Landscape [PerfNow 2023]

Slide 1

Slide 1 text

How to Create Impact in a Changing Landscape @tameverts webperf.social/@tammy #PerfNow

Slide 2

Slide 2 text

Work smarter, not harder.

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Work smarter, not harder.

Slide 5

Slide 5 text

@tameverts webperf.social/@tammy

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

TTFB DNS FCP FMP LCP CLS FID TBT TTI INP OMG WTF

Slide 15

Slide 15 text

77% of developers have assumed more responsibility for testing in the last year @tameverts

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Impact

Slide 18

Slide 18 text

Problems for the company Opportunities for the individual

Slide 19

Slide 19 text

Run toward unsolved problems

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Am I looking at the right metrics? Are my optimizations working? Am I reporting effectively? Am I involving the right people at the right time? Am I motivating my team? Am *I* motivated? Am I proving business value? Does my company care? Define potential unsolved problems by asking yourself…

Slide 22

Slide 22 text

Chasing impact is a healthy mental model for your career

Slide 23

Slide 23 text

Chasing impact is a healthy mental model for your career Challenges your comfort zone

Slide 24

Slide 24 text

Chasing impact is a healthy mental model for your career Challenges your comfort zone Treats your skills as a means to an end

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Don’t do the hard stuff until you’ve done the easy stuff.

Slide 27

Slide 27 text

Don’t do the hard stuff until you’ve done the easy stuff. If you’re doing the hard stuff, make sure it actually makes a difference.

Slide 28

Slide 28 text

common sense

Slide 29

Slide 29 text

uncommon sense

Slide 30

Slide 30 text

Focus on what matters

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

*tangential book recommendation

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

56 resources 13 blocking CSS 4 blocking JS 24 non-blocking JS 12 images 2 custom fonts 1 HTML

Slide 37

Slide 37 text

Optimizing the critical rendering path refers to prioritizing the display of content that relates to the current user action. Ilya Grigorik (2013) web.dev/articles/critical-rendering-path

Slide 38

Slide 38 text

smashingmagazine.com/ 2023/10/speedcurve-fight-main-thread/ The Fight for the Main Thread Geoff Graham

Slide 39

Slide 39 text

Not all pages are equal (Some are more equal than others)

Slide 40

Slide 40 text

1. Product 2. Category 3. Home 4. Cart 5. Search @tameverts

Slide 41

Slide 41 text

1. Article 2. Search 3. Department 4. Home 5. About @tameverts

Slide 42

Slide 42 text

Find the low-hanging fruit

Slide 43

Slide 43 text

“The dull boring stuff” ~Andy Davies

Slide 44

Slide 44 text

Scripts (especially third parties)

Slide 45

Slide 45 text

Scripts (especially third parties) Images

Slide 46

Slide 46 text

Scripts (especially third parties) Images Extraneous code

Slide 47

Slide 47 text

Scripts (especially third parties) Images Extraneous code Undeferred resources

Slide 48

Slide 48 text

@tameverts

Slide 49

Slide 49 text

Small changes can have a huge impact

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Shaved 15KB off logo Ran A/B test Increased bookings chasingwaterfalls.io/episodes/episode-one-with-malek-hakim/ @tameverts

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

1. Compressed images 2. Deferred image sprite that was blocking rendering 3. Optimized CSS and JS on the critical rendering path @tameverts

Slide 54

Slide 54 text

2s improvement in median load time almost doubled mobile conversions @tameverts

Slide 55

Slide 55 text

Manage expectations

Slide 56

Slide 56 text

Manage expectations (including your own)

Slide 57

Slide 57 text

Dan Gayle // Crate & Barrel "I don't know if this helps anyone, but one thing I've been stressing to our dev teams at Crate and Barrel is this: We’re not trying to speed up the website by 500ms. We’re trying to speed up the website by 100ms, five times. Or 50ms, ten times.”

Slide 58

Slide 58 text

"Getting teams to think incrementally has proven to be more effective than trying to do everything all at once. It's less stressful, it's faster to implement, and everyone, including product managers, seems to get it. Smaller projects get more buy-in than megalithic projects that span multiple sprints or multiple teams.” Dan Gayle // Crate & Barrel

Slide 59

Slide 59 text

"It's not to say that large, structural issues shouldn't be addressed, but while we're waiting for someday to come around, we can do what we can now to improve in smaller chunks that ultimately add up.” Dan Gayle // Crate & Barrel

Slide 60

Slide 60 text

Know your performance plateau

Slide 61

Slide 61 text

The performance plateau is the point at which changes to your website’s rendering metrics cease to matter because you’ve bottomed out in terms of business and user engagement metrics. speedcurve.com/blog/web-performance-plateau/

Slide 62

Slide 62 text

speedcurve.com/blog/web-performance-plateau/

Slide 63

Slide 63 text

speedcurve.com/blog/web-performance-plateau/

Slide 64

Slide 64 text

Fight regression

Slide 65

Slide 65 text

devops.com/survey-sees-spike-in-untested-code-leading-to-a-devops-crisis/ @tameverts

Slide 66

Slide 66 text

devops.com/survey-sees-spike-in-untested-code-leading-to-a-devops-crisis/ @tameverts

Slide 67

Slide 67 text

77% of developers have assumed more responsibility for testing in the last year @tameverts

Slide 68

Slide 68 text

Renato Sinohara // Westwing “My company used to do 'focus weeks' for performance, and I have found that to be ineffective. We now have a continuous process for monitoring and improvement, and it works much better.”

Slide 69

Slide 69 text

“Funny enough, the key was not the improvements themselves, but frequently monitoring to understand changes. Regular meetings to spot changes and investigate what caused them. This was the spark for a constant flow of ideas on how to improve things, plus free flow of 'low hanging fruits'. Results were staggering. Developers keep thinking about performance and keep learning more as we go.” Renato Sinohara // Westwing

Slide 70

Slide 70 text

Performance budgets FTW

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

speedcurve.com/blog/performance-budgets/

Slide 73

Slide 73 text

speedcurve.com/blog/performance-budgets/

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

MVB

Slide 78

Slide 78 text

MVB Minimum Viable Budgets

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

Meaningful content Usable out of the box Broad browser support Synthetic RUM Correlates to business/UX Time to First Byte ★ ★ ★ ★ ☆ Start Render ☆ ★ ★ ★ ★ ★ Largest Contentful Paint ☆ ★ ★ ★ ★ Last Painted Hero ☆ ★ ★ ★ Cumulative Layout Shift ☆ ☆ ★ ★ Long Tasks ★ ★ ★ ★ ☆ Interaction to Next Paint ★ ★ ★ ★ @tameverts

Slide 82

Slide 82 text

Share the load

Slide 83

Slide 83 text

Everyone who touches a page should care about the performance of that page

Slide 84

Slide 84 text

“One of the original directives of the performance team was we weren’t going to set ourselves up to be performance cops.” Dan Chilton, Vox Media responsivewebdesign.com/podcast/vox-media-performance/

Slide 85

Slide 85 text

“We weren’t going to go around slapping people on the wrist, saying, ‘You built an article that broke the page size budget! You have to take that down or change that immediately!’ “Our goal setting out was to set up best practices, make recommendations, and be a resource within the company that people can turn to when they have to make performance-related decisions.” Dan Chilton, Vox Media responsivewebdesign.com/podcast/vox-media-performance/

Slide 86

Slide 86 text

Give people ownership

Slide 87

Slide 87 text

If your marketing team is responsible for adding and maintaining third-party tags, they should: For example…

Slide 88

Slide 88 text

If your marketing team is responsible for adding and maintaining third-party tags, they should: For example… • Have a basic understanding of the metrics (such as Long Tasks Time) • Collaborate on setting the budget • Receive alerts when the budget is violated • Participate (or at least have visibility) in identifying and fixing the issue

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

Measure success

Slide 91

Slide 91 text

“We, as engineers, should learn how to show the impact on anything we do.” Malek Hakim // Priceline chasingwaterfalls.io/episodes/episode-one-with-malek-hakim/

Slide 92

Slide 92 text

We moved from 6th place to 3rd place in our competitive dashboard.

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

We moved from 6th place to 3rd place in our competitive dashboard. We optimized (or removed) a third party and reduced bounce rate from 87.5% to 62.1%.

Slide 95

Slide 95 text

youtube.com/watch?v=cXLOIIJ1UaE Harry Roberts // From Milliseconds to Millions // PerfNow 2019

Slide 96

Slide 96 text

speedcurve.com/customers/tag/ab-testing/

Slide 97

Slide 97 text

Slide 98

Slide 98 text

@tameverts

Slide 99

Slide 99 text

We moved from 6th place to 3rd place in our competitive dashboard. We optimized a third party and reduced bounce rate from 87.5% to 62.1%. We improved LCP by 0.8 seconds and increased conversion rate from 4.2% to 5.3%. We prevented 3 regressions to LCP from going live, and prevented degradation to conversion rate. @tameverts

Slide 100

Slide 100 text

Celebrate victories!

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

WPOstats.com

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

Increase your impact Identify your critical rendering path

Slide 108

Slide 108 text

Increase your impact Identify your critical rendering path Focus on the pages that matter

Slide 109

Slide 109 text

Increase your impact Identify your critical rendering path Focus on the pages that matter Fix the low-hanging fruit

Slide 110

Slide 110 text

Increase your impact Identify your critical rendering path Focus on the pages that matter Fix the low-hanging fruit Manage expectations

Slide 111

Slide 111 text

Increase your impact Identify your critical rendering path Focus on the pages that matter Fix the low-hanging fruit Manage expectations Use performance budgets to fight regressions

Slide 112

Slide 112 text

Increase your impact Identify your critical rendering path Focus on the pages that matter Fix the low-hanging fruit Manage expectations Use performance budgets to fight regressions Quantify success – and brag about it!

Slide 113

Slide 113 text

There’s no magic. Show up with a plan. Do the work. Be patient.

Slide 114

Slide 114 text

There’s no magic. Show up with a plan. Do the work. Be patient. Be kind.

Slide 115

Slide 115 text

Thank you! @tameverts webperf.social/@tammy

Slide 116

Slide 116 text

Critical Rendering Path // Ilya Grigorik web.dev/articles/critical-rendering-path/ The Fight for the Main Thread // Geoff Graham smashingmagazine.com/2023/10/speedcurve-fight-main-thread/ Vox Media Performance // Dan Chilton responsivewebdesign.com/podcast/vox-media-performance/ Why You Need to Know Your Site’s Performance Plateau speedcurve.com/blog/web-performance-plateau/ Survey Sees Spike in Untested Code Leading to a DevOps Crisis devops.com/survey-sees-spike-in-untested-code-leading-to-a-devops-crisis/ A Complete Guide to Performance Budgets speedcurve.com/blog/performance-budgets/ Scaling a Culture of Performance // Malek Hakim chasingwaterfalls.io/episodes/episode-one-with-malek-hakim/ From Milliseconds to Millions // Harry Roberts youtube.com/watch?v=cXLOIIJ1UaE @tameverts