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

Get Your Head Straight

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.

Harry Roberts

September 22, 2021
Tweet

More Decks by Harry Roberts

Other Decks in Technology

Transcript

  1. Get Your Head Straight
    Harry Roberts – @csswizardry

    View Slide

  2. 🫀The cardiocentric theory.

    View Slide

  3. View Slide

  4. 🧠 The cephalocentric theory.

    View Slide

  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)

    View Slide


  6. View Slide

  7. Key Concepts

    View Slide

  8. HTML is parsed line-by-line.

    View Slide

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


    5.


    6. ...

    View Slide

  10. 1.


    2.


    3.


    4.


    5. console.log('hello')


    6. What am I?


    7.


    8.


    9.


    10.


    11. ...


    12.


    13.


    14.

    View Slide

  11. The head is the biggest single render-blocking part of a page.

    View Slide

  12. 1.


    2. ...


    3. <br/><br/><br/>4. body { background-color: red; }<br/><br/><br/>5.


    6.


    7.


    8. ...


    9.


    10.


    11.


    12. Get Your <head> Straight


    13.


    14.


    15.

    View Slide

  13. View Slide

  14. 1.


    2. ...


    3. <br/><br/><br/>4. body { background-color: red; }<br/><br/><br/>5.


    6. ...


    7.


    8.


    9.


    10.


    11.


    12. Get Your <head> Straight


    13.


    14.


    15.

    View Slide

  15. View Slide

  16. A Baseline
    csswz.it/gyhs-baseline

    View Slide

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

    View Slide

  18. View Slide

  19. FCP: 9.33s

    View Slide

  20. Don’t Be So Big-Headed

    View Slide

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

    View Slide

  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

    View Slide

  23. View Slide

  24. 1. 

    src="https://unpkg.com/jquery@latest/dist/jquery.js">


    View Slide

  25. View Slide

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

    View Slide

  27. Self-Host Whatever You Can

    View Slide

  28. csswz.it/self-host

    View Slide

  29. View Slide

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

    View Slide

  31. Get Your Head Checked Out

    View Slide

  32. Invalid head tags can cause problems.

    View Slide

  33. View Slide

  34. 1.


    2.


    3.


    4. <br/><br/><br/>5. <meta><br/><br/><br/>6. <script><br/><br/><br/>7. <noscript><br/><br/><br/>8. <template><br/>

    View Slide

  35. View Slide

  36. View Slide

  37. Change from Previous Cumulative Improvement
    +0.139 -0.279
    Fix Invalid Markup

    View Slide

  38. The Optimum Head Order*

    View Slide

  39. 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 (‘SEO’ meta tags, icons, Open Graph, etc.)



    View Slide

  40. Meta CSP Disables Preload Scanner

    View Slide

  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

    View Slide

  42. Before the Preload Scanner: Parse, discover, download, execute, parse, discover, download, execute, parse…

    View Slide

  43. After the Preload Scanner: Parsing and downloading are now independent.

    View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. 1.


    2. ...


    3. ...


    4. ...


    5. 

    content="upgrade-insecure-requests" />


    6. ...


    7.

    View Slide

  48. csswz.it/preload-scanner-src

    View Slide

  49. 1. SELECT client, COUNT(1) as PAGES_FIRST_HTML


    2. FROM `httparchive.almanac.summary_response_bodies`


    3. WHERE LOWER(BODY) LIKE '%

    4. AND date = '2020-08-01'


    5. AND firstHTML


    6. GROUP BY client
    @tunetheweb

    View Slide

  50. View Slide

  51. Change from Previous Cumulative Improvement
    -3.704 -3.983
    Move CSP Meta

    View Slide

  52. Metadata About the Page** Goes First

    View Slide

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

    View Slide

  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

    View Slide

  55. View Slide

  56. Don’t Hide the Title

    View Slide

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

    View Slide

  58. 1.


    2. ...


    3.


    4. Hello, World!


    5. ...


    6.

    View Slide

  59. View Slide

  60. 1.


    2. ...


    3.


    4. Hello, World!


    5. ...


    6.

    View Slide

  61. 1.


    2. ...


    3. Hello, World!


    4.


    5. ...


    6.

    View Slide

  62. View Slide

  63. View Slide

  64. Change from Previous Cumulative Improvement
    -0.281 -4.264
    Arrange Page Metadata

    View Slide

  65. Synchronous JS before CSS

    View Slide

  66. CSS blocks the execution of subsequent JS.

    View Slide

  67. 1.


    2.


    3. <br/><br/><br/>4. const page = document.documentElement;<br/><br/><br/>5. console.log(getComputedStyle(page).color);<br/><br/><br/>6.

    View Slide

  68. 1.


    2. ...


    3.


    4.


    5. ...


    6.


    7. <br/><br/><br/>8. var script = document.createElement('script');<br/><br/><br/>9. script.src = "https://analytics.com/analytics.js";<br/><br/><br/>10. document.head.appendChild(script);<br/><br/><br/>11.


    12. ...


    13.

    View Slide

  69. View Slide

  70. 1.


    2. ...


    3.


    4.


    5. ...


    6.


    7. <br/><br/><br/>8. var script = document.createElement('script');<br/><br/><br/>9. script.src = "https://analytics/analytics.js";<br/><br/><br/>10. document.head.appendChild(script);<br/><br/><br/>11.


    12. ...


    13.

    View Slide

  71. 1.


    2. ...


    3. <br/><br/><br/>4. var script = document.createElement('script');<br/><br/><br/>5. script.src = "https://analytics/analytics.js";<br/><br/><br/>6. document.head.appendChild(script);<br/><br/><br/>7.


    8.


    9. ...


    10.


    11.


    12. ...


    13.

    View Slide

  72. View Slide

  73. View Slide

  74. But beware. Synchronous JS blocks subsequent @imports†.

    View Slide

  75. 1.


    2. ...


    3.


    4.


    5. ...


    6.

    View Slide

  76. Start Render: 4.7s

    View Slide

  77. 1.


    2. ...


    3.


    4.


    5. ...


    6.

    View Slide

  78. 1.


    2. ...


    3.


    4.


    5. ...


    6.

    View Slide

  79. Start Render: 2.9s

    View Slide

  80. 9.3s wait

    View Slide

  81. View Slide

  82. View Slide

  83. Change from Previous Cumulative Improvement
    -1.65 -5.914
    Reorder CSS and JS

    View Slide

  84. View Slide

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

    View Slide

  86. SEO and Social Goes Last

    View Slide

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

    View Slide

  88. View Slide

  89. A New Order
    csswz.it/gyhs-
    fi
    xed

    View Slide

  90. FCP: 2.669s

    View Slide

  91. View Slide

  92. View Slide

  93. View Slide

  94. View Slide

  95. View Slide

  96. Computed Tomography

    View Slide

  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

    View Slide

  98. ct.css

    View Slide

  99. View Slide

  100. View Slide

  101. View Slide

  102. 1. 

    href="https://csswizardry.com/ct/ct.css"

    class="ct" />

    View Slide

  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. }());

    View Slide

  104. csswizardry.com/ct

    View Slide

  105. Thank You
    harry.is/for-hire

    View Slide