Slide 1
Slide 1 text
Get Your Head Straight
Harry Roberts – @csswizardry
Slide 2
Slide 2 text
🫀The cardiocentric theory.
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
🧠 The cephalocentric theory.
Slide 5
Slide 5 text
“[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)
Slide 6
Slide 6 text
❤
Slide 7
Slide 7 text
Key Concepts
Slide 8
Slide 8 text
HTML is parsed line-by-line.
Slide 9
Slide 9 text
1.
2. var foo = document.getElementById('foo');
3. console.log(foo); // null
4.
5.
6.
...
Slide 10
Slide 10 text
1.
2.
3.
4.
5. console.log('hello')
6. What am I?
7.
8.
9.
10.
11. ...
12.
13.
14.
Slide 11
Slide 11 text
The head is the biggest single render-blocking part of a page.
Slide 12
Slide 12 text
1.
2. ...
3.
4. body { background-color: red; }
5.
6.
7.
8. ...
9.
10.
11.
12. Get Your
13.
14.
15.
Get Your <head> Straight
13.
14.
15.
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
1.
2. ...
3.
4. body { background-color: red; }
5.
6. ...
7.
8.
9.
10.
11.
12. Get Your
13.
14.
15.
Get Your <head> Straight
13.
14.
15.
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
A Baseline
csswz.it/gyhs-baseline
Slide 17
Slide 17 text
Stylesheets
Scripts
CSP
CSRF Token
Metadata
@import
Async snippets
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
FCP: 9.33s
Slide 20
Slide 20 text
Don’t Be So Big-Headed
Slide 21
Slide 21 text
If it doesn’t need to be in the head, get it out of there.
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
1.
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Change from Previous Cumulative Improvement
-0.041 N/A
Remove Redirect
Slide 27
Slide 27 text
Self-Host Whatever You Can
Slide 28
Slide 28 text
csswz.it/self-host
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Change from Previous Cumulative Improvement
-0.377 -0.418
Self-Hosting
Slide 31
Slide 31 text
Get Your Head Checked Out
Slide 32
Slide 32 text
Invalid head tags can cause problems.
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
1.
2.
3.
4.
5. <meta>
6. <script>
7. <noscript>
8. <template>
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
Change from Previous Cumulative Improvement
+0.139 -0.279
Fix Invalid Markup
Slide 38
Slide 38 text
The Optimum Head Order*
Slide 39
Slide 39 text
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.)
Slide 40
Slide 40 text
Meta CSP Disables Preload Scanner
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
Before the Preload Scanner: Parse, discover, download, execute, parse, discover, download, execute, parse…
Slide 43
Slide 43 text
After the Preload Scanner: Parsing and downloading are now independent.
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
1.
2. ...
3. ...
4. ...
5.
6. ...
7.
Slide 48
Slide 48 text
csswz.it/preload-scanner-src
Slide 49
Slide 49 text
1. SELECT client, COUNT(1) as PAGES_FIRST_HTML
2. FROM `httparchive.almanac.summary_response_bodies`
3. WHERE LOWER(BODY) LIKE '%
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Change from Previous Cumulative Improvement
-3.704 -3.983
Move CSP Meta
Slide 52
Slide 52 text
Metadata About the Page** Goes First
Slide 53
Slide 53 text
Tell the browser how to deal with the page.
Slide 54
Slide 54 text
“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
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
Don’t Hide the Title
Slide 57
Slide 57 text
Your title is o
ft
en a visitor’s very
fi
rst impression.
Slide 58
Slide 58 text
1.
2. ...
3.
4. Hello, World!
5. ...
6.
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
1.
2. ...
3.
4. Hello, World!
5. ...
6.
Slide 61
Slide 61 text
1.
2. ...
3. Hello, World!
4.
5. ...
6.
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
Change from Previous Cumulative Improvement
-0.281 -4.264
Arrange Page Metadata
Slide 65
Slide 65 text
Synchronous JS before CSS
Slide 66
Slide 66 text
CSS blocks the execution of subsequent JS.
Slide 67
Slide 67 text
1.
2.
3.
4. const page = document.documentElement;
5. console.log(getComputedStyle(page).color);
6.
Slide 68
Slide 68 text
1.
2. ...
3.
4.
5. ...
6.
7.
8. var script = document.createElement('script');
9. script.src = "https://analytics.com/analytics.js";
10. document.head.appendChild(script);
11.
12. ...
13.
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
1.
2. ...
3.
4.
5. ...
6.
7.
8. var script = document.createElement('script');
9. script.src = "https://analytics/analytics.js";
10. document.head.appendChild(script);
11.
12. ...
13.
Slide 71
Slide 71 text
1.
2. ...
3.
4. var script = document.createElement('script');
5. script.src = "https://analytics/analytics.js";
6. document.head.appendChild(script);
7.
8.
9. ...
10.
11.
12. ...
13.
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
But beware. Synchronous JS blocks subsequent @imports†.
Slide 75
Slide 75 text
1.
2. ...
3.
4.
5. ...
6.
Slide 76
Slide 76 text
Start Render: 4.7s
Slide 77
Slide 77 text
1.
2. ...
3.
4.
5. ...
6.
Slide 78
Slide 78 text
1.
2. ...
3.
4.
5. ...
6.
Slide 79
Slide 79 text
Start Render: 2.9s
Slide 80
Slide 80 text
9.3s wait
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
Change from Previous Cumulative Improvement
-1.65 -5.914
Reorder CSS and JS
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
Change from Previous Cumulative Improvement
-0.747 -6.661
Remove @imports
Slide 86
Slide 86 text
SEO and Social Goes Last
Slide 87
Slide 87 text
If Googlebot can’t
fi
nd your meta tags, it can’t
fi
nd your content.
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
A New Order
csswz.it/gyhs-
fi
xed
Slide 90
Slide 90 text
FCP: 2.669s
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
Computed Tomography
Slide 97
Slide 97 text
“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
Slide 98
Slide 98 text
ct.css
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
1.
Slide 103
Slide 103 text
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. }());
Slide 104
Slide 104 text
csswizardry.com/ct
Slide 105
Slide 105 text
Thank You
harry.is/for-hire