Slide 1

Slide 1 text

Connecting the dots between… site speed user experience your business @tammyeverts #WebExpo 2025

Slide 2

Slide 2 text

2

Slide 3

Slide 3 text

3 @tammyeverts.com /tammyeverts

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

speedcurve.com/benchmarks

Slide 6

Slide 6 text

Web Performance Guide speedcurve.com/web-performance-guide/

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Why should I care?

Slide 10

Slide 10 text

Why should I care? How do I measure site speed?

Slide 11

Slide 11 text

Why should I care? How do I measure site speed? How fast should my site be?

Slide 12

Slide 12 text

Why should I care? How do I measure site speed? How fast should my site be? How do I make it faster?

Slide 13

Slide 13 text

“web stress”

Slide 14

Slide 14 text

“web stress” When apps or sites are slow, we concentrate up to 50% harder to stay on task

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

People feel slowness in the moment

Slide 17

Slide 17 text

Frustration increases between 11.5% and 26% during browsing and checkout

Slide 18

Slide 18 text

People feel slowness after they leave your site

Slide 19

Slide 19 text

fast slow

Slide 20

Slide 20 text

content “boring”

Slide 21

Slide 21 text

content visual design “boring” “tacky” “confusing”

Slide 22

Slide 22 text

content visual design usability “boring” “tacky” “confusing” “frustrating” ‘hard to navigate”

Slide 23

Slide 23 text

People feel slowness long after they leave your site

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

If you do not consider time as a usability factor, you are missing a fundamental aspect of the user experience.

Slide 26

Slide 26 text

How can I measure page speed?

Slide 27

Slide 27 text

Performance monitoring tools Synthetic monitoring (lab) Mimics defined network & browser conditions No installation required Limited URLs Limited test locations Compare any sites Detailed analysis & visuals Real user monitoring (field) Real network & browser conditions Requires JavaScript installation Large sample size (up to 100%) Geographic spread Only measure your own site Correlation with other metrics (e.g., bounce rate)

Slide 28

Slide 28 text

Real user monitoring Helps you understand your users and how they experience your site

Slide 29

Slide 29 text

Synthetic monitoring Helps you understand your pages and what you need to fix to improve UX

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

What metrics should I focus on?

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Is the page loading?

Slide 34

Slide 34 text

Is the page loading? Can I use it?

Slide 35

Slide 35 text

Is the page loading? Can I use it? How does it feel?

Slide 36

Slide 36 text

Is the page loading? Can I use it? How does it feel? Does it correlate with business metrics?

Slide 37

Slide 37 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 ☆ ★ ★ ★ ★ Cumulative Layout Shift ☆ ★ ★ ★ Interaction to Next Paint ★ ★ ★ speedcurve.com/web-performance-guide/glossary-of-web-performance-metrics/

Slide 38

Slide 38 text

How fast should my site be?

Slide 39

Slide 39 text

Real user monitoring Helps you understand your users and how they experience your site

Slide 40

Slide 40 text

Identify the conversion peak

Slide 41

Slide 41 text

speedcurve.com/blog/site-speed-business-correlation/

Slide 42

Slide 42 text

1.1 second Largest Contentful Paint (LCP) 6.2% conversion rate speedcurve.com/blog/site-speed-business-correlation/

Slide 43

Slide 43 text

Locate the performance plateau

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Understand your goal vs threshold

Slide 46

Slide 46 text

speedcurve.com/blog/site-speed-business-correlation/ 1.1 second is your GOAL 2.8 seconds is your THRESHOLD

Slide 47

Slide 47 text

What do I need to fix?

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Not all pages are equal

Slide 51

Slide 51 text

1. Product 2. Category 3. Home 4. Cart 5. Search Conversion impact // retail sites

Slide 52

Slide 52 text

1. Article 2. Search 3. Department 4. Home 5. About Engagement impact // media sites

Slide 53

Slide 53 text

Identify the critical rendering path

Slide 54

Slide 54 text

Synthetic monitoring Helps you understand your pages and what you need to fix to improve UX

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

Largest Contentful Paint (LCP) When the main visual element has rendered in the viewport

Slide 57

Slide 57 text

Largest Contentful Paint (LCP) When the main visual element has rendered in the viewport After LCP From a user’s perspective, none of this matters (It does actually matter, but not for our purposes today)

Slide 58

Slide 58 text

Largest Contentful Paint (LCP) When the main visual element has rendered in the viewport After LCP From a user’s perspective, none of this matters (It does actually matter, but not for our purposes today) critical rendering path

Slide 59

Slide 59 text

critical rendering path

Slide 60

Slide 60 text

“The dull boring stuff” ~Andy Davies

Slide 61

Slide 61 text

“The dull boring stuff” ~Andy Davies Scripts (including third parties) speedcurve.com/web-performance-guide/best-practices-for-optimizing-javascript/

Slide 62

Slide 62 text

“The dull boring stuff” ~Andy Davies Scripts (including third parties) Images speedcurve.com/web-performance-guide/best-practices-for-optimizing-images/

Slide 63

Slide 63 text

“The dull boring stuff” ~Andy Davies Scripts (including third parties) Images Defer assets where possible speedcurve.com/web-performance-guide/using-critical-css-for-faster-rendering/

Slide 64

Slide 64 text

Web Performance Guide speedcurve.com/web-performance-guide/

Slide 65

Slide 65 text

Even small changes can have a huge impact

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

2s improvement in median load time almost 2X mobile conversions

Slide 73

Slide 73 text

1. Measure! 2. Start with just a few metrics 3. Identify your speed goals (and thresholds) 4. Focus on the pages that matter most 5. Optimize the critical rendering path 6. Keep measuring 7. Celebrate your wins!

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

Děkuju! (Thank you!) :) @tammyeverts.com /tammyeverts