Where's your <head> at?

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Where’s Your At? @sophiegibson #WTSFest Where’s Your At?

Slide 3

Slide 3 text

How to optimise the for SEO success Where’s Your At?

Slide 4

Slide 4 text

1 2 3 How the render process works SEO elements in the Impact on site speed 4 How to optimise the

Slide 5

Slide 5 text

Where’s Your At? @sophiegibson #WTSFest

Slide 6

Slide 6 text

Where’s Your At? @sophiegibson #WTSFest Contains important SEO tags

Slide 7

Slide 7 text

Where’s Your At? @sophiegibson #WTSFest Canonicals

Slide 8

Slide 8 text

Where’s Your At? @sophiegibson #WTSFest Title Tag My Awesome Website

Slide 9

Slide 9 text

Where’s Your At? @sophiegibson #WTSFest Meta description

Slide 10

Slide 10 text

Where’s Your At? @sophiegibson #WTSFest Meta robots

Slide 11

Slide 11 text

Where’s Your At? @sophiegibson #WTSFest hreﬂang

Slide 12

Slide 12 text

Where’s Your At? @sophiegibson #WTSFest Structured data { "@context": "https://schema.org/", "@type": "Recipe", "name": "Party Coffee Cake" }

Slide 13

Slide 13 text

Where’s Your At? @sophiegibson #WTSFest

Slide 14

Slide 14 text

Where’s Your At? @sophiegibson #WTSFest Google needs to ﬁnd and read this information

Slide 15

Slide 15 text

Where’s Your At? @sophiegibson #WTSFest

Slide 16

Slide 16 text

Where’s Your At? @sophiegibson #WTSFest ↜ ↜ ↜

Slide 17

Slide 17 text

Where’s Your At? @sophiegibson #WTSFest How the render process works

Slide 18

Slide 18 text

Where’s Your At? @sophiegibson #WTSFest Parse the HTML

Slide 19

Slide 19 text

Where’s Your At? @sophiegibson #WTSFest Fetch External Resources

Slide 20

Slide 20 text

Where’s Your At? @sophiegibson #WTSFest Parse the CSS

Slide 21

Slide 21 text

Where’s Your At? @sophiegibson #WTSFest Execute the Javascript

Slide 22

Slide 22 text

Where’s Your At? @sophiegibson #WTSFest Build the Render Tree

Slide 23

Slide 23 text

Where’s Your At? @sophiegibson #WTSFest Construct Layout & Paint

Slide 24

Slide 24 text

Where’s Your At? @sophiegibson #WTSFest https://debarshiraj.hashnode.dev/ho w-does-your-browser-renders-the-w ebsite-that-you-see-on-screen

Slide 25

Slide 25 text

Where’s Your At? @sophiegibson #WTSFest When the HTML parser ﬁnds a tag, it pauses to load, parse, and execute the JavaScript code.

Slide 26

Slide 26 text

Where’s Your At? @sophiegibson #WTSFest https://debarshiraj.hashnode.dev/how-does-your-browser-renders-the-website-that-you-see-on-screen

Slide 27

Slide 27 text

Where’s Your At? @sophiegibson #WTSFest

Slide 28

Slide 28 text

Where’s Your At? @sophiegibson #WTSFest Any step which changes something in a previous step, the browser needs to go back & repeat those steps to reprocess this new information

Slide 29

Slide 29 text

1 2 3 Parse the HTML Fetch External Resources Parse the CSS Execute the Javascript Build the Render Tree Construct Layout & Paint 4 5 6

Slide 30

Slide 30 text

The is the biggest single render-blocking part of a page Harry Roberts @csswizard Harry Roberts - Get Your Head Straight https:/ /www.youtube.com/watch?v=MHyAOZ45vnU

Slide 31

Slide 31 text

Where’s Your At? @sophiegibson #WTSFest

Slide 32

Slide 32 text

1. 2. 3. preconnect 4. 5. CSS that includes @import 6. Synchronous JS 7. Synchronous CSS 8. preload 9. 10. prefetch / prerender 11. Everything else (icons, Open Graph, etc.) 12. Optimal order for rendering Harry Roberts @csswizardry

Slide 33

Slide 33 text

Where’s Your At? @sophiegibson #WTSFest

Slide 34

Slide 34 text

Where’s Your At? @sophiegibson #WTSFest

Slide 35

Slide 35 text

Where’s Your At? @sophiegibson #WTSFest

Slide 36

Slide 36 text

Where’s Your At? @sophiegibson #WTSFest

Slide 37

Slide 37 text

Where’s Your At? @sophiegibson #WTSFest ❌ ❌

Slide 38

Slide 38 text

Where’s Your At? @sophiegibson #WTSFest

Slide 39

Slide 39 text

Where’s Your At? @sophiegibson #WTSFest Two Tools

Slide 40

Slide 40 text

Where’s Your At? @sophiegibson #WTSFest Dev Tools

Slide 41

Slide 41 text

Where’s Your At? @sophiegibson #WTSFest CAPO Chrome Extension

Slide 42

Slide 42 text

Where’s Your At? @sophiegibson #WTSFest https://chromewebstore.google.com/detail/capo-get-your-%EF%B9%A4%F0%9D%9A%91%F0%9D%9A%8 E%F0%9D%9A%8A%F0%9D%9A%8D%EF%B9%A5/ohabpnaccigjhkkebjofhpmebofgpbeb?pli=1

Slide 43

Slide 43 text

Where’s Your At? @sophiegibson #WTSFest Benchmark

Slide 44

Slide 44 text

Lighthouse

Slide 45

Slide 45 text

Where’s Your At? @sophiegibson #WTSFest

Slide 46

Slide 46 text

Where’s Your At? @sophiegibson #WTSFest

Slide 47

Slide 47 text

Where’s Your At? @sophiegibson #WTSFest Open CAPO

Slide 48

Slide 48 text

Where’s Your At? @sophiegibson #WTSFest

Slide 49

Slide 49 text

Where’s Your At? @sophiegibson #WTSFest

Slide 50

Slide 50 text

Where’s Your At? @sophiegibson #WTSFest Click on ‘Sorted head order’

Slide 51

Slide 51 text

Where’s Your At? @sophiegibson #WTSFest Scroll to bottom of text

Slide 52

Slide 52 text

Where’s Your At? @sophiegibson #WTSFest Right Click > Copy > Copy Element

Slide 53

Slide 53 text

Where’s Your At? @sophiegibson #WTSFest Paste in Code / Text Editor

Slide 54

Slide 54 text

Where’s Your At? @sophiegibson #WTSFest Back to Dev Tools: Inspect > Elements Right Click > Edit as HTML

Slide 55

Slide 55 text

Where’s Your At? @sophiegibson #WTSFest Delete the & replace with our new, sorted content

Slide 56

Slide 56 text

Where’s Your At? @sophiegibson #WTSFest Test, Test, Test

Slide 57

Slide 57 text

Where’s Your At? @sophiegibson #WTSFest Re-Run Lighthouse

Slide 58

Slide 58 text

Where’s Your At? @sophiegibson #WTSFest Before After

Slide 59

Slide 59 text

Where’s Your At? @sophiegibson #WTSFest Mmmm, tasty & quick speed improvements

Slide 60

Slide 60 text

Where’s Your At? @sophiegibson #WTSFest

Slide 61

Slide 61 text

Where’s Your At? @sophiegibson #WTSFest ↜ HIGH PRIORITY 🚨SEO STUFF 🚨

Slide 62

Slide 62 text

→ → → Title Tag hreﬂang Structured data Meta description Canonicals Meta robots → → → 🚨 HIGH PRIORITY 🚨 SEO STUFF

Slide 63

Slide 63 text

“WATCH OUT!” for

Slide 64

Slide 64 text

Single points of Failure (SPoF) occurs when a 3rd party asset is called and there was some problem delivering that asset. thisisoptimal.com

Slide 65

Slide 65 text

This in turn results in a web page not rendering properly – in many cases resulting in blank screen being presented thisisoptimal.com

Slide 66

Slide 66 text

Where’s Your At? @sophiegibson #WTSFest

Slide 67

Slide 67 text

Where’s Your At? @sophiegibson #WTSFest

Slide 68

Slide 68 text

“WATCH OUT!” for

Slide 69

Slide 69 text

Where’s Your At? @sophiegibson #WTSFest INVALID HTML

Slide 70

Slide 70 text

Where’s Your At? @sophiegibson #WTSFest stop here & move on to the This shouldn’t be here?

Slide 71

Slide 71 text

Where’s Your At? @sophiegibson #WTSFest https://validator.w3.org/

Slide 72

Slide 72 text

Where’s Your At? @sophiegibson #WTSFest

Slide 73

Slide 73 text

Where’s Your At? @sophiegibson #WTSFest

Slide 74

Slide 74 text

1. 2. 3. 4. 5. preconnect 6. 7. CSS that includes @import 8. Synchronous JS 9. Synchronous CSS 10. preload 11. 12. prefetch / prerender 13. Everything else (icons, Open Graph, etc.) 14. Harry Roberts @csswizardry

Slide 75

Slide 75 text

Where’s Your At? @sophiegibson #WTSFest

Slide 76

Slide 76 text

Where’s Your At? @sophiegibson #WTSFest

Slide 77

Slide 77 text

Where’s Your At? @sophiegibson #WTSFest

Slide 78

Slide 78 text

How to conduct a Core Web Vitals audit slideshare.net/sophiegibson3 @sophiegibson Sophie Gibson StudioHawk

Slide 79

Slide 79 text

Where’s Your At? @sophiegibson #WTSFest Getting Buy In

Slide 80

Slide 80 text

Where’s Your At? @sophiegibson #WTSFest % Increase in conversions for every 100ms reduction in Largest Contentful Paint time 1.3

Slide 81

Slide 81 text

Where’s Your At? @sophiegibson #WTSFest Average order value for organic traﬃc £89 Visitors per month from organic traﬃc 19650 Your current organic conversion rate 0.73%

Slide 82

Slide 82 text

Where’s Your At? @sophiegibson #WTSFest Average order value for organic traﬃc £89 Visitors per month from organic traﬃc 19650 2 Second increase = 2000ms = 20 x 1.3% = 23% increase 0.92%

Slide 83

Slide 83 text

Where’s Your At? @sophiegibson #WTSFest £2225 Order increase +25 New conversion rate 0.92% Additional revenue = =

Slide 84

Slide 84 text

Where’s Your At? @sophiegibson #WTSFest SEO’s Stakeholders

Slide 85

Slide 85 text

Where’s Your At? @sophiegibson #WTSFest

Slide 86

Slide 86 text

Talk to me! Sophie Gibson Technical SEO Director @ StudioHawk www.studiohawk.co.uk @sophiegibson @studiohawk bsky.app/profile/sagibson.co.uk [email protected] linkedin.com/in/sophie-a-gibson/ ✉