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

Get Your Head Straight

Harry Roberts
September 22, 2021
Technology
13
15k

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

See All by Harry Roberts
cache rules everything
csswizardry
0
12
My Website Is Slow!
 Where Do I Start?
csswizardry
0
87
Optimising Largest Contentful Paint
csswizardry
6
1.8k
From Milliseconds
 to Millions: A Look at the Numbers Powering Web Performance
csswizardry
1
1.9k
More Than You Ever Wanted to Know About Resource Hints
csswizardry
6
8k
It’s My (Third) Party, and I’ll Cry if I Want To
csswizardry
13
4.8k
FaCSSt: CSS & Performance
csswizardry
26
3.4k
Vim for Front-end Developers
csswizardry
12
5.7k
Why Fast Matters
csswizardry
24
8k

Other Decks in Technology

See All in Technology
kanto_kaggler_senkin13
senkin13
0
180
サーバーレスで仮想待合室を作ろう！ / Serverless Virtual Waiting Room
_kensh
2
160
そのとき歴史は動かなかった 〜 JTCのウォーターフォール研究者がバックログを発明した日〜
bonotake
0
280
2023/09/14 Fin-JAWS #32 「SIEM on Amazon OpenSearch Serviceを1年運用してわかったこと」
junjikoide
1
200
GraphQLはどんな時に使うか
saboyutaka
0
430
How to Maximize Effectiveness and Efficiency of Daily Scrum
eiki
0
120
Building smarter apps with machine learning, from magic to reality
picardparis
4
3.6k
Boot verification in Android
prashantspol
0
210
DroidKaigi 2023
keiji
0
330
Traversing the GraphQL AST and Calculating Query Costs
joere
0
320
KARTEのAPIサーバ化
line_developers
PRO
1
200
R Not Only in Production
karawoo
0
120

Featured

See All Featured
GraphQLとの向き合い方2022年版
quramy
24
11k
Scaling GitHub
holman
455
140k
How STYLIGHT went responsive
nonsquared
89
4.4k
Building a Scalable Design System with Sketch
lauravandoore
453
31k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
33
8.5k
RailsConf 2023
tenderlove
0
230
Navigating Team Friction
lara
177
12k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
Code Review Best Practice
trishagee
53
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
10
1.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
352
21k
Bash Introduction
62gerente
603
210k

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