$30 off During Our Annual Pro Sale. View Details »

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. “[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)
  2. 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>
  3. 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>
  4. 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>
  5. 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
  6. 1. <title> 2. <base> 3. <link> 4. <style> 5. <meta>

    6. <script> 7. <noscript> 8. <template>
  7. 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>
  8. 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
  9. 1. <head> 2. ... 3. ... 4. ... 5. <meta

    http-equiv="Content-Security-Policy" 
 content="upgrade-insecure-requests" /> 6. ... 7. </head>
  10. 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
  11. “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
  12. 1. <link rel="stylesheet" href="style.css" /> 2. 3. <script> 4. const

    page = document.documentElement; 5. console.log(getComputedStyle(page).color); 6. </script>
  13. 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>
  14. 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>
  15. 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>
  16. 1. <head> 2. ... 3. <link rel="stylesheet" href="importer.css" /> 4.

    <script src="synchronous.js"></script> 5. ... 6. </head>
  17. “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
  18. 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. }());