What your Google Lighthouse score hides from you - BrightonSEO

Slide 1

Slide 1 text

What Google Lighthouse score hides from you SpeakerDeck.Com/AymenLoukil @LoukilAymen Aymen Loukil Speetals Founder

Slide 2

Slide 2 text

@LoukilAymen #BrightonSEO Back to 2017, my webperf consulting journey…

Slide 3

Slide 3 text

@LoukilAymen #BrightonSEO And this was my #webperf workﬂow Audit in Lab Write user stories Implement Test in Lab

Slide 4

Slide 4 text

@LoukilAymen #BrightonSEO Awesome!

Slide 5

Slide 5 text

@LoukilAymen #BrightonSEO Me excited Ship it!

Slide 6

Slide 6 text

@LoukilAymen #BrightonSEO Now what?

Slide 7

Slide 7 text

@LoukilAymen #BrightonSEO We need to wait for the next CrUX dataset (in 28 days) [Every second Tuesday]

Slide 8

Slide 8 text

@LoukilAymen #BrightonSEO In 1 month many things happen..

Slide 9

Slide 9 text

@LoukilAymen #BrightonSEO Users faced improvement deterioration! Feb 2020 Mar 2020 73% => 70.8%

Slide 10

Slide 10 text

@LoukilAymen #BrightonSEO Feb 2020 Mar 2020 Me disappointed

Slide 11

Slide 11 text

@LoukilAymen #BrightonSEO A shot in the dark!

Slide 12

Slide 12 text

@LoukilAymen #BrightonSEO As a consultant, This feels bad and frustrating.

Slide 13

Slide 13 text

@LoukilAymen #BrightonSEO Reﬂection was needed to understand what happened?

Slide 14

Slide 14 text

@LoukilAymen #BrightonSEO Gabriela Palai - Pexels What’s wrong with Lighthouse score…?

Slide 15

Slide 15 text

@LoukilAymen #BrightonSEO Where does it fall in our users? We have 100 users LCP 4s to 2.5s on mobile

Slide 16

Slide 16 text

@LoukilAymen #BrightonSEO Does it represent someone? We have 100 users LCP 4s to 2.5s on mobile

Slide 17

Slide 17 text

@LoukilAymen #BrightonSEO One LH run may or not represent one of your users

Slide 18

Slide 18 text

@LoukilAymen #BrightonSEO Emulation isn’t real life..

Slide 19

Slide 19 text

@LoukilAymen #BrightonSEO

Slide 20

Slide 20 text

@LoukilAymen #BrightonSEO I’ve also been part of this!

Slide 21

Slide 21 text

@LoukilAymen #BrightonSEO Webperf score obsession isn’t new!

Slide 22

Slide 22 text

@LoukilAymen #BrightonSEO We have always been assessed with grades..

Slide 23

Slide 23 text

@LoukilAymen #BrightonSEO Do they even correlate in some way?

Slide 24

Slide 24 text

@LoukilAymen #BrightonSEO 50% of perfect Lighthouse score (90+) pages fail at Web Vitals Brendan Kenny @brendankenny

Slide 25

Slide 25 text

@LoukilAymen #BrightonSEO With a score of 50/100, many pages passes the Web Vitals Brendan Kenny @brendankenny

Slide 26

Slide 26 text

@LoukilAymen #BrightonSEO There is a blind spot!

Slide 27

Slide 27 text

@LoukilAymen #BrightonSEO What do your users and Lighthouse have in common?

Slide 28

Slide 28 text

@LoukilAymen #BrightonSEO CPU Memory Screen size Location Internet speed Device Context flaticon.com

Slide 29

Slide 29 text

@LoukilAymen #BrightonSEO Users interact, but Lighthouse doesn’t!

Slide 30

Slide 30 text

@LoukilAymen #BrightonSEO Are they at least talking the same metrics?

Slide 31

Slide 31 text

@LoukilAymen #BrightonSEO Ultimately they don’t share as many metrics!

Slide 32

Slide 32 text

@LoukilAymen #BrightonSEO Ultimately they don’t share as many metrics! Above the fold only CLS

Slide 33

Slide 33 text

@LoukilAymen #BrightonSEO Ultimately they don’t share as many metrics! Above the fold only CLS Depends on conditions

Slide 34

Slide 34 text

@LoukilAymen #BrightonSEO Variability issues 3 consecutive runs on the same page and on same conditions

Slide 35

Slide 35 text

@LoukilAymen #BrightonSEO It is like Rock paper scissors

Slide 36

Slide 36 text

@LoukilAymen #BrightonSEO You can easily trick it! Barry Pollard @tunetheweb

Slide 37

Slide 37 text

@LoukilAymen #BrightonSEO My customer’s Web agency

Slide 38

Slide 38 text

@LoukilAymen #BrightonSEO You can even hack it!

Slide 39

Slide 39 text

@LoukilAymen #BrightonSEO If the page is loaded with Lighthouse, Gtmetrix, or other tool => Only load HTML, no styles, no JavaScript, no images

Slide 40

Slide 40 text

@LoukilAymen #BrightonSEO Do you mainly care about your users or Lighthouse

Slide 41

Slide 41 text

@LoukilAymen #BrightonSEO Your users are diﬀerent

Slide 42

Slide 42 text

@LoukilAymen #BrightonSEO CPUs are getting faster every year… 4G and 5G are common… Our audience top device is iPhone.. But..we often assume

Slide 43

Slide 43 text

@LoukilAymen #BrightonSEO You are just making assumptions!

Slide 44

Slide 44 text

@LoukilAymen #BrightonSEO iPhone isn’t real life…(Alex Russel) Your users potentially have 2019 smartphones Android iOS

Slide 45

Slide 45 text

@LoukilAymen #BrightonSEO A user does not care about your website Lighthouse score, your technical stack, or even if it is AI-powered..

Slide 46

Slide 46 text

@LoukilAymen #BrightonSEO So..Rely on your Users’ data, And here is how👉

Slide 47

Slide 47 text

@LoukilAymen #BrightonSEO Remember my failed #webperf workﬂow? Audit in Lab Write user stories Implement Test in Lab https://www.vectorstock.com/ https://knowyourmeme.com/

Slide 48

Slide 48 text

@LoukilAymen #BrightonSEO I transformed it into this: Audit in ﬁeld Prioritize Implement Test in Lab Fast validate on users Iterate

Slide 49

Slide 49 text

@LoukilAymen #BrightonSEO Audit in ﬁeld Prioritize Implement Test in Lab Fast validate on users Hear your users experience, validate your eﬀort with them Iterate Now you can use Lighthouse..

Slide 50

Slide 50 text

Audit in the ﬁeld (Hear your users experience) STEP 1

Slide 51

Slide 51 text

@LoukilAymen #BrightonSEO Identify improvement points for each metric/ device

Slide 52

Slide 52 text

@LoukilAymen #BrightonSEO Identify improvement points for each metric/ device Detect distribution gaps between devices

Slide 53

Slide 53 text

@LoukilAymen #BrightonSEO See how your audience LCP distributes

Slide 54

Slide 54 text

@LoukilAymen #BrightonSEO See how your audience distributes 75% of your users are facing a 6.1s LCP loading!!

Slide 55

Slide 55 text

@LoukilAymen #BrightonSEO Compare against competition’ audience experiences

Slide 56

Slide 56 text

@LoukilAymen #BrightonSEO How my geo-audience is experiencing it

Slide 57

Slide 57 text

Prioritize. (Do the right thing ﬁrst) STEP 2

Slide 58

Slide 58 text

@LoukilAymen #BrightonSEO Sort your top page-types per metric Domain data Page-level data

Slide 59

Slide 59 text

@LoukilAymen #BrightonSEO Identify low-hanging fruits Start with this listing page template

Slide 60

Slide 60 text

Implement & Audit in lab. (Implement, test) STEP 3

Slide 61

Slide 61 text

@LoukilAymen #BrightonSEO Audit in ﬁeld Prioritize optimizations Implement Test in Lab Fast validate on users Iterate Now you can use Google Lighthouse!

Slide 62

Slide 62 text

Validate the outcomes. (Don’t wait 28 days..) STEP 4

Slide 63

Slide 63 text

@LoukilAymen #BrightonSEO 34%+ Desktop CLS increase in 10 days - PDP Validated Deployed

Slide 64

Slide 64 text

@LoukilAymen #BrightonSEO +7% Mobile LCP improvement in one week - PLP

Slide 65

Slide 65 text

@LoukilAymen #BrightonSEO +7% Mobile LCP improvement in one week - PLP Validated Deployed

Slide 66

Slide 66 text

@LoukilAymen #BrightonSEO LCP P75th percentile chart going down! 4.2s => 2.3s

Slide 67

Slide 67 text

@LoukilAymen #BrightonSEO Feb 2020 Mar 2020 Remember this frustration?

Slide 68

Slide 68 text

@LoukilAymen #BrightonSEO Fast detect regressions - CLS on PDP 😞

Slide 69

Slide 69 text

@LoukilAymen #BrightonSEO Set up regression Slack alerts

Slide 70

Slide 70 text

@LoukilAymen #BrightonSEO Validate monthly to conﬁrm the outcomes Domain-level LCP on Mobile

Slide 71

Slide 71 text

Thank you! Aymen Loukil @LoukilAymen https://speetals.com International SEO and Web Performance Consultant