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

Where's your <head> at?

Sophie Gibson
March 13, 2024
1
82

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
99

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
For a Future-Friendly Web
brad_frost
175
9.4k
BBQ
matthewcrist
85
9.3k
Statistics for Hackers
jakevdp
796
220k
The Pragmatic Product Professional
lauravandoore
31
6.3k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
GraphQLとの向き合い方2022年版
quramy
43
13k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
120
Designing for humans not robots
tammielis
250
25k

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