Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Where's your <head> at?

Sophie Gibson
March 13, 2024
0
24

Where's your <head> at?

Talk given at Women in Tech SEO Festival on 08/03/2024

How the structure of the can unlock SEO & CRO benefits

Sophie Gibson

March 13, 2024
Tweet

More Decks by Sophie Gibson

See All by Sophie Gibson
How to Conduct a Core Web Vitals Audit - BrightonSEO October 2022
sophiegibson
0
71

Featured

See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Designing Experiences People Love
moore
136
23k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
How STYLIGHT went responsive
nonsquared
92
4.8k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
Designing for Performance
lara
601
67k
The Cost Of JavaScript in 2023
addyosmani
21
4k
Debugging Ruby Performance
tmm1
70
11k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
A Philosophy of Restraint
colly
197
16k
Producing Creativity
orderedlist
PRO
338
39k

Transcript

  1. None

  2. Where’s Your <HEAD> At? @sophiegibson #WTSFest Where’s Your <head> At?

  3. How to optimise the <head> for SEO success Where’s Your

    <head> At?

  4. 1 2 3 How the render process works SEO elements

    in the <head> Impact on site speed 4 How to optimise the <head>

  5. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  6. Where’s Your <HEAD> At? @sophiegibson #WTSFest Contains important SEO tags

  7. Where’s Your <HEAD> At? @sophiegibson #WTSFest Canonicals <link rel="canonical" href="https://www.myaweso

    mesite.com">

  8. Where’s Your <HEAD> At? @sophiegibson #WTSFest Title Tag <title>My Awesome

    Website</title>

  9. Where’s Your <HEAD> At? @sophiegibson #WTSFest Meta description <meta name="description"

    content="We are an incredible website">

  10. Where’s Your <HEAD> At? @sophiegibson #WTSFest Meta robots <meta name="robots"

    content="index, follow">

  11. Where’s Your <HEAD> At? @sophiegibson #WTSFest hreflang <link rel="alternate" href="https://www.myawes

    omesite.com" hreflang="en-gb">

  12. Where’s Your <HEAD> At? @sophiegibson #WTSFest Structured data <script type="application/ld+json">

    { "@context": "https://schema.org/", "@type": "Recipe", "name": "Party Coffee Cake" } </script>

  13. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  14. Where’s Your <HEAD> At? @sophiegibson #WTSFest Google needs to find

    and read this information

  15. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  16. Where’s Your <HEAD> At? @sophiegibson #WTSFest ↜ ↜ ↜

  17. Where’s Your <HEAD> At? @sophiegibson #WTSFest How the render process

    works

  18. Where’s Your <HEAD> At? @sophiegibson #WTSFest Parse the HTML

  19. Where’s Your <HEAD> At? @sophiegibson #WTSFest Fetch External Resources

  20. Where’s Your <HEAD> At? @sophiegibson #WTSFest Parse the CSS

  21. Where’s Your <HEAD> At? @sophiegibson #WTSFest Execute the Javascript

  22. Where’s Your <HEAD> At? @sophiegibson #WTSFest Build the Render Tree

  23. Where’s Your <HEAD> At? @sophiegibson #WTSFest Construct Layout & Paint

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

  25. Where’s Your <HEAD> At? @sophiegibson #WTSFest When the HTML parser

    finds a <script> tag, it pauses to load, parse, and execute the JavaScript code.

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

  27. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  28. Where’s Your <HEAD> 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

  29. 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

  30. The <head> 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

  31. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  32. 1. <head> 2. <meta charset|http-equiv|viewport|robots> 3. preconnect 4. <script src=""

    async></script> 5. CSS that includes @import 6. Synchronous JS 7. Synchronous CSS 8. preload 9. <script src="" defer></script> 10. prefetch / prerender 11. Everything else (icons, Open Graph, etc.) 12. </head> Optimal <head> order for rendering Harry Roberts @csswizardry

  33. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  34. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  35. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  36. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  37. Where’s Your <HEAD> At? @sophiegibson #WTSFest ❌ ❌

  38. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  39. Where’s Your <HEAD> At? @sophiegibson #WTSFest Two Tools

  40. Where’s Your <HEAD> At? @sophiegibson #WTSFest Dev Tools

  41. Where’s Your <HEAD> At? @sophiegibson #WTSFest CAPO Chrome Extension

  42. Where’s Your <HEAD> 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

  43. Where’s Your <HEAD> At? @sophiegibson #WTSFest Benchmark

  44. Lighthouse

  45. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  46. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  47. Where’s Your <HEAD> At? @sophiegibson #WTSFest Open CAPO

  48. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  49. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  50. Where’s Your <HEAD> At? @sophiegibson #WTSFest Click on ‘Sorted head

    order’

  51. Where’s Your <HEAD> At? @sophiegibson #WTSFest Scroll to bottom of

    text

  52. Where’s Your <HEAD> At? @sophiegibson #WTSFest Right Click > Copy

    > Copy Element

  53. Where’s Your <HEAD> At? @sophiegibson #WTSFest Paste in Code /

    Text Editor

  54. Where’s Your <HEAD> At? @sophiegibson #WTSFest Back to Dev Tools:

    Inspect > Elements Right Click > Edit as HTML

  55. Where’s Your <HEAD> At? @sophiegibson #WTSFest Delete the <head> &

    replace with our new, sorted <head> content

  56. Where’s Your <HEAD> At? @sophiegibson #WTSFest Test, Test, Test

  57. Where’s Your <HEAD> At? @sophiegibson #WTSFest Re-Run Lighthouse

  58. Where’s Your <HEAD> At? @sophiegibson #WTSFest Before After

  59. Where’s Your <HEAD> At? @sophiegibson #WTSFest Mmmm, tasty & quick

    speed improvements

  60. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  61. Where’s Your <HEAD> At? @sophiegibson #WTSFest ↜ <head> HIGH PRIORITY

    🚨SEO STUFF 🚨

  62. → → → Title Tag hreflang Structured data Meta description

    Canonicals Meta robots → → → 🚨 HIGH PRIORITY 🚨 SEO STUFF

  63. “WATCH OUT!” for

  64. Single points of Failure (SPoF) occurs when a 3rd party

    asset is called and there was some problem delivering that asset. thisisoptimal.com

  65. This in turn results in a web page not rendering

    properly – in many cases resulting in blank screen being presented thisisoptimal.com

  66. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  67. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  68. “WATCH OUT!” for

  69. Where’s Your <HEAD> At? @sophiegibson #WTSFest INVALID HTML

  70. Where’s Your <HEAD> At? @sophiegibson #WTSFest stop here & move

    on to the <body> This shouldn’t be here?

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

  72. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  73. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  74. 1. <head> 2. <meta charset|http-equiv|viewport|robots> 3. <title><meta desc> 4. <canonical><hreflang>

    5. preconnect 6. <script src="" async></script> 7. CSS that includes @import 8. Synchronous JS 9. Synchronous CSS 10. preload 11. <script src="" defer></script> 12. prefetch / prerender 13. Everything else (icons, Open Graph, etc.) 14. </head> Harry Roberts @csswizardry

  75. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  76. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  77. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  78. How to conduct a Core Web Vitals audit slideshare.net/sophiegibson3 @sophiegibson

    Sophie Gibson StudioHawk

  79. Where’s Your <HEAD> At? @sophiegibson #WTSFest Getting Buy In

  80. Where’s Your <HEAD> At? @sophiegibson #WTSFest % Increase in conversions

    for every 100ms reduction in Largest Contentful Paint time 1.3

  81. Where’s Your <HEAD> At? @sophiegibson #WTSFest Average order value for

    organic traffic £89 Visitors per month from organic traffic 19650 Your current organic conversion rate 0.73%

  82. Where’s Your <HEAD> At? @sophiegibson #WTSFest Average order value for

    organic traffic £89 Visitors per month from organic traffic 19650 2 Second increase = 2000ms = 20 x 1.3% = 23% increase 0.92%

  83. Where’s Your <HEAD> At? @sophiegibson #WTSFest £2225 Order increase +25

    New conversion rate 0.92% Additional revenue = =

  84. Where’s Your <HEAD> At? @sophiegibson #WTSFest SEO’s Stakeholders

  85. Where’s Your <HEAD> At? @sophiegibson #WTSFest

  86. 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/ ✉