Filesize (Kb)
0
45
90
135
180
Before Gzip After Gzip
12Kb
108Kb
18kb
72kb
@extend Mixin
Slide 67
Slide 67 text
“
“My tests showed pretty conclusively that
mixins end up being better for network
performance than using @extend.
“The way gzip works means that we get better
savings even when our uncompresssed files are
substantially larger.”
— csswz.it/2jNxNMh
Slide 68
Slide 68 text
Asset Domains
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
Slide 71
Slide 71 text
Slide 72
Slide 72 text
0 0.5 1.0 2.0
CSS on an Asset Domain
Slide 73
Slide 73 text
0 0.5 1.0 2.0
Back on the Host Domain
Slide 74
Slide 74 text
“
“Make CSS small, minify, compress,
load from the same hostname even (no DNS)
and inline, if small enough.”
— Stoyan Stefanov, csswz.it/2fYM2ei
Slide 75
Slide 75 text
LINK in BODY
Slide 76
Slide 76 text
LINK in BODY
Traditionally, all elements go in the
But we can now start putting in the
Effectively progressively rendering pages…
Slide 77
Slide 77 text
…
…
…
…
HTTP/1.1:
Bundle everything
But this
contains lots of
redundancy…
…and blocks
rendering
Slide 78
Slide 78 text
Browsers don’t render anything
until all CSS has been retrieved.
Slide 79
Slide 79 text
…
…
…
…
HTTP/2:
Split everything
Much less
redundancy…
…But still
blocks rendering
Slide 80
Slide 80 text
Now browsers now only block
rendering of subsequent content
Slide 81
Slide 81 text
…
…
…
…
Nice
Slide 82
Slide 82 text
Before
csswz.it/2J0RCj3
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
After
csswz.it/2J0RCj3
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
“
“Firefox and Edge/IE will give you a lovely
progressive render, whereas Chrome and Safari
give you a white screen until all the CSS loads.
“The current Chrome/Safari behaviour is no worse
than putting all your stylesheets in the , so
you can start using this method today.”
— csswz.it/2J0RCj3
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
…
Empty script
block for Firefox
Slide 90
Slide 90 text
Loading CSS and JS
Slide 91
Slide 91 text
i
Inline scripts block on
CSSOM construction
Slide 92
Slide 92 text
var script = document.createElement('script');
script.src = "script.js";
document.getElementsByTagName('head')[0].appendChild(script);
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
var script = document.createElement('script');
script.src = "script.js";
document.getElementsByTagName('head')[0].appendChild(script);
Slide 95
Slide 95 text
var script = document.createElement('script');
script.src = "script.js";
document.getElementsByTagName('head')[0].appendChild(script);
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
i
Load the JS with the
async attribute
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
Basically…
Slide 100
Slide 100 text
1.Optimise your critical path
2.Keep blocking CSS to a minimum
3.Avoid Base64
4.@import is evil
5.So is @extend
6.Alphabetic CSS is better
7.Get your head straight
Basically…
Only for
performance
For many
reasons other
than Performance
Except for a
handful of exceptions