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 full-size slide

  2. 🫀The cardiocentric theory.

    View full-size slide

  3. 🧠 The cephalocentric theory.

    View full-size slide

  4. “[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 full-size slide

  5. Key Concepts

    View full-size slide

  6. HTML is parsed line-by-line.

    View full-size slide

  7. 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 full-size slide

  8. 1.


    2.


    3.


    4.


    5. console.log('hello')


    6. What am I?


    7.


    8.


    9.


    10.


    11. ...


    12.


    13.


    14.

    View full-size slide

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

    View full-size slide

  10. 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 full-size slide

  11. 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 full-size slide

  12. A Baseline
    csswz.it/gyhs-baseline

    View full-size slide

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

    View full-size slide

  14. Don’t Be So Big-Headed

    View full-size slide

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

    View full-size slide

  16. 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 full-size slide

  17. 1. 

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


    View full-size slide

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

    View full-size slide

  19. Self-Host Whatever You Can

    View full-size slide

  20. csswz.it/self-host

    View full-size slide

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

    View full-size slide

  22. Get Your Head Checked Out

    View full-size slide

  23. Invalid head tags can cause problems.

    View full-size slide

  24. 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 full-size slide

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

    View full-size slide

  26. The Optimum Head Order*

    View full-size slide

  27. 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 full-size slide

  28. Meta CSP Disables Preload Scanner

    View full-size slide

  29. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  32. 1.


    2. ...


    3. ...


    4. ...


    5. 

    content="upgrade-insecure-requests" />


    6. ...


    7.

    View full-size slide

  33. csswz.it/preload-scanner-src

    View full-size slide

  34. 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 full-size slide

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

    View full-size slide

  36. Metadata About the Page** Goes First

    View full-size slide

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

    View full-size slide

  38. “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 full-size slide

  39. Don’t Hide the Title

    View full-size slide

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

    View full-size slide

  41. 1.


    2. ...


    3.


    4. Hello, World!


    5. ...


    6.

    View full-size slide

  42. 1.


    2. ...


    3.


    4. Hello, World!


    5. ...


    6.

    View full-size slide

  43. 1.


    2. ...


    3. Hello, World!


    4.


    5. ...


    6.

    View full-size slide

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

    View full-size slide

  45. Synchronous JS before CSS

    View full-size slide

  46. CSS blocks the execution of subsequent JS.

    View full-size slide

  47. 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 full-size slide

  48. 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 full-size slide

  49. 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 full-size slide

  50. 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 full-size slide

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

    View full-size slide

  52. 1.


    2. ...


    3.


    4.


    5. ...


    6.

    View full-size slide

  53. Start Render: 4.7s

    View full-size slide

  54. 1.


    2. ...


    3.


    4.


    5. ...


    6.

    View full-size slide

  55. 1.


    2. ...


    3.


    4.


    5. ...


    6.

    View full-size slide

  56. Start Render: 2.9s

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. SEO and Social Goes Last

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. Computed Tomography

    View full-size slide

  63. “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 full-size slide

  64. 1. 

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

    class="ct" />

    View full-size slide

  65. 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 full-size slide

  66. csswizardry.com/ct

    View full-size slide

  67. Thank You
    harry.is/for-hire

    View full-size slide