Get Your Head Straight

Get Your Head Straight Harry Roberts – @csswizardry

🫀The cardiocentric theory.

🧠 The cephalocentric theory.

“[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)

Key Concepts

HTML is parsed line-by-line.

1. <script> 2. var foo = document.getElementById('foo'); 3. console.log(foo); //
null 4. </script> 5. 6. <div id="foo">...</div>

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>

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

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><head></code> Straight</h1> 13. 14. </body> 15. </html>

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><head></code> Straight</h1> 13. 14. </body> 15. </html>

A Baseline csswz.it/gyhs-baseline

Stylesheets Scripts CSP CSRF Token Metadata @import Async snippets

FCP: 9.33s

Don’t Be So Big-Headed

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

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

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

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

Self-Host Whatever You Can

csswz.it/self-host

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

Get Your Head Checked Out

Invalid head tags can cause problems.

1. <title> 2. <base> 3. <link> 4. <style> 5. <meta>
6. <script> 7. <noscript> 8. <template>

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

The Optimum Head Order*

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>

Meta CSP Disables Preload Scanner

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

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

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

1. <head> 2. ... 3. ... 4. ... 5. <meta
http-equiv="Content-Security-Policy"   content="upgrade-insecure-requests" /> 6. ... 7. </head>

csswz.it/preload-scanner-src

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

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

Metadata About the Page** Goes First

Tell the browser how to deal with the page.

“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

Don’t Hide the Title

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

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

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

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

Synchronous JS before CSS

CSS blocks the execution of subsequent JS.

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

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>

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>

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>

But beware. Synchronous JS blocks subsequent @imports†.

1. <head> 2. ... 3. <script src="synchronous.js"></script> 4. <link rel="stylesheet"
href="importer.css" /> 5. ... 6. </head>

Start Render: 4.7s

1. <head> 2. ... 3. <script src="synchronous.js"></script> 4. <link rel="stylesheet"
href="importer.css" /> 5. ... 6. </head>

1. <head> 2. ... 3. <link rel="stylesheet" href="importer.css" /> 4.
<script src="synchronous.js"></script> 5. ... 6. </head>

Start Render: 2.9s

9.3s wait

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

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

SEO and Social Goes Last

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

A New Order csswz.it/gyhs- fi xed

FCP: 2.669s

Computed Tomography

“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

ct.css

1. <link rel="stylesheet"   href="https://csswizardry.com/ct/ct.css"   class="ct" />

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

csswizardry.com/ct

Thank You harry.is/for-hire

Get Your Head Straight

Get Your Head Straight

More Decks by Harry Roberts

Other Decks in Technology

Featured

Transcript