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

Where's your <head> at?

Sophie Gibson
March 13, 2024
1
86

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
110

Featured

See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Code Reviewing Like a Champion
maltzj
520
39k
Gamification - CAS2011
davidbonilla
80
5.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
270
Being A Developer After 40
akosma
87
590k
Bash Introduction
62gerente
608
210k
KATA
mclloyd
29
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to Ace a Technical Interview
jacobian
276
23k
Visualization
eitanlees
145
15k

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