![Page 1: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/1.jpg)
some *fantastic* frontend performance tricks and why we do themJenna Zeigen • RevolutionConf • 5/18/18
whee!
![Page 2: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/2.jpg)
@zeigenvector
jenna.is/at-revconf-18
![Page 3: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/3.jpg)
SJBrooklyn
2018.empirejs.org
![Page 4: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/4.jpg)
![Page 5: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/5.jpg)
loading + rendering
![Page 6: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/6.jpg)
loading + rendering
(keep things small)
![Page 7: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/7.jpg)
loading + rendering
(keep things small) (keep things smart)
![Page 8: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/8.jpg)
loading + rendering
(keep things small)
(keep things smooth)
(keep things smart)
![Page 9: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/9.jpg)
but wait how do
websites?
![Page 10: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/10.jpg)
'Cause I’m on the network getting packets
Server’s sending me three-hundred and five
♪♪♪
how do websites?
![Page 11: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/11.jpg)
The bigger you send, The harder you fall
Take it from me, girl, You gotta start small
♪♪♪
how do websites?
![Page 12: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/12.jpg)
We did everything right, Bytes are on the client side
♪♪♪
how do websites?
![Page 13: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/13.jpg)
Are you listening? (Whoa-oh-oh-oh-oh) Please come back. (Whoa-oh-oh-oh-oh)
I’ll tell you what do I need I’ll tell you what do I need
Whoa-oh, whoa-oh ♪♪♪
how do websites?
![Page 14: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/14.jpg)
how do websites?
document
html
head body
divtitle
h1 p
“Kitties!” “Cats!”
![Page 15: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/15.jpg)
how do websites?
document
html
head body
divtitle
h1 p
“Kitties!” “Cats!”
body
div
h1 p
font-size: 16px
font-size: 16px font-weight: bold
font-size: 16px color: blue
font-size: 16px float: left
![Page 16: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/16.jpg)
how do websites?
+document
html
head body
divtitle
h1 p
“Kitties!” “Cats!”
body
div
h1 p
font-size: 16px
font-size: 16px font-weight: bold
font-size: 16px color: blue
font-size: 16px float: left
=
RenderView
Scroll
Block
Block
Block
Block Block
Text Text
![Page 17: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/17.jpg)
Well, I'm gonna paint my picture Paint myself in blue and red and
green and… a All of the beautiful pixels are very, very meaningful
♪♪♪
![Page 18: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/18.jpg)
Whoa, oh, oh, oh, oh Whoa, oh, oh, oh, DOM’s interactive DOM’s interactive
♪♪♪
![Page 19: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/19.jpg)
keep things small
![Page 20: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/20.jpg)
Harder, Better, Faster, Smaller
♪♪♪
keep things small
![Page 21: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/21.jpg)
minify your html, css, and js
Got some files to send over And their length’s insane Remove the whitespace, baby
It’ll up your game ♪♪♪
keep things small
![Page 22: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/22.jpg)
var array = [];
for (var i = 0; i < 20; i++) { array[i] = i; }
https://en.wikipedia.org/wiki/Minification_(programming)
keep things smallminify your html, css, and js
![Page 23: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/23.jpg)
for(var a=[i=0];++i<20;a[i]=i);
https://en.wikipedia.org/wiki/Minification_(programming)
keep things smallminify your html, css, and js
![Page 24: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/24.jpg)
compress your html, css, and js
Shrink it down, gzip it
(Don’t reverse it…) ♪♪♪
keep things small
![Page 25: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/25.jpg)
optimize your images
All the small things What speed this brings!
♪♪♪
keep things small
![Page 26: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/26.jpg)
optimize your images
The picture is far too big to look at kid
Your screen’s just not wide enough
♪♪♪
keep things small
![Page 27: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/27.jpg)
optimize your images
keep things small
<img srcset="miso-320w.jpg 320w, miso-480w.jpg 480w, miso-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src=“miso-800w.jpg"
alt=“Miso, a big, red cat”>
![Page 28: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/28.jpg)
optimize your images
keep things small
<picture> <source
media="(max-width: 799px)" srcset="miso-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="miso-800w.jpg">
<img src=“miso-800w.jpg" alt=“Miso on the floor">
</picture>
![Page 29: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/29.jpg)
caching
Guess they had to change that code Updated that file
which then changed its number So I need the new stuff though
Now it’s just some page that I used to know
♪♪♪
keep things small
![Page 30: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/30.jpg)
caching
Pull it down, I'm yelling timber Unless it moves or gets enhanced This data, I’m told to remember Until it tells me to forget
♪♪♪
keep things small
![Page 31: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/31.jpg)
only include *necessary* files
Well I know that I'll get through this
'Cause I know that I am smart I don't need you anymore I don't need you anymore I don't need you anymore
No I don't need you anymore… ♪♪♪
keep things small
![Page 32: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/32.jpg)
only include *necessary* files
Shake it, shake it, shake it, Shake it, shake it, shake it, Shake it, shake it, shake it
Shake it like a JavaScript bundle Hey ya! ♪♪♪
keep things small
![Page 33: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/33.jpg)
optimize fonts
Baby I don't need fancy glyphs To have a good site (Yay system fonts!)
♪♪♪
keep things small
![Page 34: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/34.jpg)
put your assets in a cdn
keep things small
I feel so close to you right now ♪♪♪
![Page 35: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/35.jpg)
keep things smart
![Page 36: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/36.jpg)
concatenate your css and js
Come together, right now Up the speed
♪♪♪
keep things smart
![Page 37: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/37.jpg)
use image sprites and icon fonts
Yeah, it's always better when they’re together
♪♪♪
keep things smart
![Page 38: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/38.jpg)
make js non-blocking
Scripts go at the bottom Not up here
Scripts go at the bottom So the whole page freakin’ here
♪♪♪
keep things smart
![Page 39: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/39.jpg)
make js non-blocking
So I don’t take the fall Of a document.write call
When I see you, everything stops Never put JS on top
♪♪♪
keep things smart
![Page 40: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/40.jpg)
keep things smartmake js non-blocking
We can’t stop… ♪♪♪
![Page 41: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/41.jpg)
make js non-blocking
And we won’t stop… ♪♪♪
keep things smart
![Page 42: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/42.jpg)
make js non-blocking
But yeah does it feel so good 'Cause I get scripts when
I want them now And if you could
then you know you would 'Cause yeah it just feels so
It just feels so good ♪♪♪
keep things smart
![Page 43: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/43.jpg)
put css at the top
In your <head> In your <head>
Stylesheet, stylesheet, eet, eet, eet
♪♪♪
keep things smart
![Page 44: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/44.jpg)
put css at the top
Critical styles inlined To make this page load streamlined
♪♪♪
keep things smart
![Page 45: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/45.jpg)
How you gonna upgrade me? What's higher than one
point one? ♪♪♪
keep things smartuse http/2
![Page 46: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/46.jpg)
keep things smooth
![Page 47: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/47.jpg)
keep things smooth
You got the kind of scrollin’ That can be so ~smooth~, yeah Get rid of jank, make it real
Or else forget about it ♪♪♪
![Page 48: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/48.jpg)
how do websites, pt 2
RenderView
Scroll
Block
Block
Block
Block Block
Text Text
Cause the render’s gonna… rend, rend, rend?
♪♪♪
![Page 49: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/49.jpg)
how do websites, pt 2
RenderView
Scroll
Block
Block
Block
Block Block
Text Text
And the painter’s gonna paint, paint, paint…
♪♪♪
![Page 50: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/50.jpg)
how do websites, pt 2
Loop loop ba-doop loop ba-doop Loop ba-doop ba-doop
Ba-doop loop ba-doop loop Ba-doop loop ba-doop, ba-doop,
ba-doop ♪♪♪
![Page 51: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/51.jpg)
Here’s to never ending circles And building them on top of me And here's to another no, man
You won’t get a render You won’t get a render
♪♪♪
how do websites, pt 2
![Page 52: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/52.jpg)
use requestAnimationFrame
keep things smooth
Debounce bounce bounce bounce bounce bounce bounce bounce bounce
bounce ♪♪♪
![Page 53: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/53.jpg)
use requestAnimationFrame
keep things smooth
![Page 54: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/54.jpg)
use requestAnimationFrame
keep things smooth
Baby, I'm not always There when you call,
But I'm always on time And I gave you my all,
Now baby, be mine ♪♪♪
![Page 55: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/55.jpg)
use web workers
keep things smooth
Give it away Give it away Give it away
Give it away now ♪♪♪
![Page 56: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/56.jpg)
use web workers
keep things smooth
When what you have Will take too long
Move along, move along Like I know you do
♪♪♪
![Page 57: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/57.jpg)
animate with transform + opacity
keep things smooth
I, I, I, I, I, I Know how to transform
I transform, I transform I'm a transformer I, I, I, I, I, I
Know how to transform I transform (I can do it!)
I'll transform (I can do it!) I'm a transformer
♪♪♪
![Page 58: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/58.jpg)
animate with transform + opacity
keep things smooth
.moving-element { will-change: transform; }
![Page 59: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/59.jpg)
use a css methodology
keep things smooth
CSS, take it easy For there is something
that we can do. CSS, take it easy
BEM it on me Or BEM it on you.
♪♪♪
![Page 60: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/60.jpg)
use a css methodology
keep things smooth
.box:nth-last-child(-n+1) .title { /* styles */ }
https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations
![Page 61: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/61.jpg)
use a css methodology
keep things smooth
.Box_title--special { /* styles */ }
https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations
![Page 62: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/62.jpg)
always measure
first
![Page 63: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/63.jpg)
keep things small, keep
things smart, keep things
smooth
![Page 64: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/64.jpg)
• Front-End Performance Checklist 2018
• Optimizing the Critical Rendering Path
• Rendering Performance
• Philip Roberts: What the heck is the event loop anyway?
• window.requestAnimationFrame()
• Using Web Workers
• Server Farm to Table, Annotated
Resources
![Page 65: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/65.jpg)
Alanis Morissette – Hand in My Pocket The Supremes & The Four Tops - The Bigger You Love, The Harder You Fall Calvin Harris ft. Ellie Goulding - Outside Jimmy Eat World - Sweetness Counting Crows - Mr. Jones Imagine Dragons - Radioactive Daft Punk – Harder, Better, Faster, Stronger Taylor Swift - Blank Space Missy Elliot - Work It Blink 182 - All The Small Things Bright Eyes - The Big Picture Gotye - Somebody That I Used To Know Pitbull ft. Ke$ha - Timber Cher - Believe OutKast - Hey Ya Sia - Cheap Thrills Calvin Harris - Feel So Close
Complete Tracklist
![Page 66: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/66.jpg)
The Beatles - Come Together Jack Johnson - Better Together Drake - Started from the Bottom Beyoncé - Love on Top Miley Cyrus - We Can’t Stop Paramore - Misery Business The Cranberries - Zombie Taking Back Sunday - Cute Without the E Beyoncé - Upgrade U Santana ft. Rob Thomas - Smooth Taylor Swift - Shake it Off Salt-N-Pepa - Shoop CHVRCHES - Never Ending Circles R. Kelly - Ignition Ja Rule ft. Ashanti - On Time Red Hot Chili Peppers - Give it Away The All-American Rejects - Move Along Gnarls Barkley - Transformer Mika - Relax, Take it Easy
Complete Tracklist
*something witty about a POP server…*
![Page 67: whee! tricks and · some *fantastic* frontend performance tricks and why we do them Jenna Zeigen • RevolutionConf • 5/18/18 whee!](https://reader034.vdocument.in/reader034/viewer/2022050409/5f864c09763fad1f07081fac/html5/thumbnails/67.jpg)
Thanks!jenna.is/at-revconf-18
@zeigenvector
💙 🐳
🚀
✨
🌻🐝
⚡
😻 🔥
🌟
🍉🍕 💖
🐢
🐘