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

Get Your Head Straight

Bb854891c46db72f4a6f9da4504e879a?s=47 Harry Roberts
September 22, 2021

Get Your Head Straight

Despite being the only section of a website that a user never sees, the HEAD is arguably the most important. It is bound to its own unique set of rules and often governs the overall speed of the page. In this talk, we’ll look at some specific caveats, some fascinating intricacies, and—critically—the optimum order for a faster HEAD. Find out why your HEAD tags are so messy, so vital, and, I promise you, so interesting.

Bb854891c46db72f4a6f9da4504e879a?s=128

Harry Roberts

September 22, 2021
Tweet

Transcript

  1. Get Your Head Straight Harry Roberts – @csswizardry

  2. 🫀The cardiocentric theory.

  3. None
  4. 🧠 The cephalocentric theory.

  5. “[T]he heart’s one role is the transmission of the 


    blood and its propulsion, by means of the arteries, 
 to the extremities everywhere.” 
 —William Harvey (1578–1657AD)
  6. <head>❤</head>

  7. Key Concepts

  8. HTML is parsed line-by-line.

  9. 1. <script> 2. var foo = document.getElementById('foo'); 3. console.log(foo); //

    null 4. </script> 5. 6. <div id="foo">...</div>
  10. 1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. 5.

    <script>console.log('hello')</script> 6. <title>What am I?</title> 7. 8. </head> 9. <body> 10. 11. ... 12. 13. </body> 14. </html>
  11. The head is the biggest single render-blocking part of a

    page.
  12. 1. <head> 2. ... 3. <style> 4. body { background-color:

    red; } 5. </style> 6. 7. <script src="synchronous.js"></script> 8. ... 9. </head> 10. <body> 11. 12. <h1>Get Your <code>&lt;head&gt;</code> Straight</h1> 13. 14. </body> 15. </html>
  13. None
  14. 1. <head> 2. ... 3. <style> 4. body { background-color:

    red; } 5. </style> 6. ... 7. </head> 8. <body> 9. 10. <script src="synchronous.js"></script> 11. 12. <h1>Get Your <code>&lt;head&gt;</code> Straight</h1> 13. 14. </body> 15. </html>
  15. None
  16. A Baseline csswz.it/gyhs-baseline

  17. Stylesheets Scripts CSP CSRF Token Metadata @import Async snippets

  18. None
  19. FCP: 9.33s

  20. Don’t Be So Big-Headed

  21. If it doesn’t need to be in the head, get

    it out of there.
  22. Remove as Much as Possible Move low-priority scripts to the

    closing body tag Utilise in-body CSS Reduce in-head payloads—external or inlined Kill any ine ffi ciencies such as redirects
  23. None
  24. 1. <script 
 src="https://unpkg.com/jquery@latest/dist/jquery.js"> 
 </script>

  25. None
  26. Change from Previous Cumulative Improvement -0.041 N/A Remove Redirect

  27. Self-Host Whatever You Can

  28. csswz.it/self-host

  29. None
  30. Change from Previous Cumulative Improvement -0.377 -0.418 Self-Hosting

  31. Get Your Head Checked Out

  32. Invalid head tags can cause problems.

  33. None
  34. 1. <title> 2. <base> 3. <link> 4. <style> 5. <meta>

    6. <script> 7. <noscript> 8. <template>
  35. None
  36. None
  37. Change from Previous Cumulative Improvement +0.139 -0.279 Fix Invalid Markup

  38. The Optimum Head Order*

  39. 1. <meta charset|http-equiv|viewport /> 2. <title> 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 (‘SEO’ meta tags, icons, Open Graph, etc.) <head> 
 </head>
  40. Meta CSP Disables Preload Scanner

  41. The Preload Scanner Invented in IE8 as the ‘Speculative Pre-Parser’

    A secondary, inert, download-only parser Decouples resource discovery/download from runtime executions Made the web a lot, lot faster In every single modern browser
  42. Before the Preload Scanner: Parse, discover, download, execute, parse, discover,

    download, execute, parse…
  43. After the Preload Scanner: Parsing and downloading are now independent.

  44. None
  45. None
  46. None
  47. 1. <head> 2. ... 3. ... 4. ... 5. <meta

    http-equiv="Content-Security-Policy" 
 content="upgrade-insecure-requests" /> 6. ... 7. </head>
  48. csswz.it/preload-scanner-src

  49. 1. SELECT client, COUNT(1) as PAGES_FIRST_HTML 2. FROM `httparchive.almanac.summary_response_bodies` 3.

    WHERE LOWER(BODY) LIKE '%<script%<meta http-equiv="content- security-policy"%' 4. AND date = '2020-08-01' 5. AND firstHTML 6. GROUP BY client @tunetheweb
  50. None
  51. Change from Previous Cumulative Improvement -3.704 -3.983 Move CSP Meta

  52. Metadata About the Page** Goes First

  53. Tell the browser how to deal with the page.

  54. “The element containing the character encoding declaration must be serialized

    completely within the first 1024 bytes of the document.” 
 — §4.2.5.4 Specifying the document's character encoding
  55. None
  56. Don’t Hide the Title

  57. Your title is o ft en a visitor’s very fi

    rst impression.
  58. 1. <head> 2. ... 3. <script src="slow-script.js"></script> 4. <title>Hello, World!</title>

    5. ... 6. </head>
  59. None
  60. 1. <head> 2. ... 3. <script src="slow-script.js"></script> 4. <title>Hello, World!</title>

    5. ... 6. </head>
  61. 1. <head> 2. ... 3. <title>Hello, World!</title> 4. <script src="slow-script.js"></script>

    5. ... 6. </head>
  62. None
  63. None
  64. Change from Previous Cumulative Improvement -0.281 -4.264 Arrange Page Metadata

  65. Synchronous JS before CSS

  66. CSS blocks the execution of subsequent JS.

  67. 1. <link rel="stylesheet" href="style.css" /> 2. 3. <script> 4. const

    page = document.documentElement; 5. console.log(getComputedStyle(page).color); 6. </script>
  68. 1. <head> 2. ... 3. <link rel="stylesheet" href="main.min.css" /> 4.

    5. ... 6. 7. <script> 8. var script = document.createElement('script'); 9. script.src = "https://analytics.com/analytics.js"; 10. document.head.appendChild(script); 11. </script> 12. ... 13. </head>
  69. None
  70. 1. <head> 2. ... 3. <link rel="stylesheet" href="main.min.css" /> 4.

    5. ... 6. 7. <script> 8. var script = document.createElement('script'); 9. script.src = "https://analytics/analytics.js"; 10. document.head.appendChild(script); 11. </script> 12. ... 13. </head>
  71. 1. <head> 2. ... 3. <script> 4. var script =

    document.createElement('script'); 5. script.src = "https://analytics/analytics.js"; 6. document.head.appendChild(script); 7. </script> 8. 9. ... 10. 11. <link rel="stylesheet" href="main.min.css" /> 12. ... 13. </head>
  72. None
  73. None
  74. But beware. Synchronous JS blocks subsequent @imports†.

  75. 1. <head> 2. ... 3. <script src="synchronous.js"></script> 4. <link rel="stylesheet"

    href="importer.css" /> 5. ... 6. </head>
  76. Start Render: 4.7s

  77. 1. <head> 2. ... 3. <script src="synchronous.js"></script> 4. <link rel="stylesheet"

    href="importer.css" /> 5. ... 6. </head>
  78. 1. <head> 2. ... 3. <link rel="stylesheet" href="importer.css" /> 4.

    <script src="synchronous.js"></script> 5. ... 6. </head>
  79. Start Render: 2.9s

  80. 9.3s wait

  81. None
  82. None
  83. Change from Previous Cumulative Improvement -1.65 -5.914 Reorder CSS and

    JS
  84. None
  85. Change from Previous Cumulative Improvement -0.747 -6.661 Remove @imports

  86. SEO and Social Goes Last

  87. If Googlebot can’t fi nd your meta tags, it can’t

    fi nd your content.
  88. None
  89. A New Order csswz.it/gyhs- fi xed

  90. FCP: 2.669s

  91. None
  92. None
  93. None
  94. None
  95. None
  96. Computed Tomography

  97. “CT and MRI scans are two methods of imaging 


    internal body parts […] CT scans are more 
 common and less expensive, but MRI 
 scans produce more detailed images.” 
 — Oesophageal Patients Association
  98. ct.css

  99. None
  100. None
  101. None
  102. 1. <link rel="stylesheet" 
 href="https://csswizardry.com/ct/ct.css" 
 class="ct" />

  103. 1. (function(){ 2. var ct = document.createElement('link'); 3. ct.rel =

    'stylesheet'; 4. ct.href = 'https://csswizardry.com/ct/ct.css'; 5. ct.classList.add('ct'); 6. document.head.appendChild(ct); 7. }());
  104. csswizardry.com/ct

  105. Thank You harry.is/for-hire