*fantastic* frontend whee! performance tricks and why we Jenna - - PowerPoint PPT Presentation

▶
fantastic frontend
SMART_READER_LITE
LIVE PREVIEW

*fantastic* frontend whee! performance tricks and why we Jenna - - PowerPoint PPT Presentation

Oct 09, 2022 313 likes •1.13k views

*fantastic* frontend whee! performance tricks and why we Jenna Zeigen do them QCon SF 11/5/18 jenna.is/at-qconsf @zeigenvector Senior Frontend Engineer at Slack Organizer of EmpireJS Organizer of BrooklynJS Whatchu know 'bout FE?

slide-1
SLIDE 1

*fantastic* frontend performance tricks and why we do them

Jenna Zeigen QCon SF 11/5/18

whee!

slide-2
SLIDE 2

jenna.is/at-qconsf @zeigenvector

slide-3
SLIDE 3

Senior Frontend Engineer at Slack Organizer of EmpireJS Organizer of BrooklynJS

slide-4
SLIDE 4

Whatchu know 'bout FE? Whatchu, whatchu know 'bout FE? Whatchu know 'bout FE? Whatchu, whatchu know? ♪♪♪

slide-5
SLIDE 5
slide-6
SLIDE 6

loading + rendering

slide-7
SLIDE 7

loading + rendering

(keep things small)

slide-8
SLIDE 8

loading + rendering

(keep things small) (keep things smart)

slide-9
SLIDE 9

loading + rendering

(keep things small)

(keep things smooth)

(keep things smart)

slide-10
SLIDE 10

but wait how do websites?

slide-11
SLIDE 11

'Cause I’m on the network getting packets Server’s sending me three- hundred and five ♪♪♪

how do websites?

slide-12
SLIDE 12

The bigger you send, The harder you fall Take it from me, girl, You gotta start small ♪♪♪

how do websites?

slide-13
SLIDE 13

We did everything right, Bytes are on the client side ♪♪♪

how do websites?

slide-14
SLIDE 14

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?

slide-15
SLIDE 15

how do websites?

document html head body div title h1 p “Kitties!” “Cats!”
slide-16
SLIDE 16

how do websites?

document html head body div title 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
slide-17
SLIDE 17

how do websites?

+

document html head body div title 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
slide-18
SLIDE 18

The page was still young When I first saw you ♪♪♪

slide-19
SLIDE 19

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 ♪♪♪

slide-20
SLIDE 20

Whoa, oh, oh, oh, oh Whoa, oh, oh, oh, DOM’s interactive DOM’s interactive ♪♪♪

slide-21
SLIDE 21

keep things small

slide-22
SLIDE 22

Harder, Better, Faster, Smaller ♪♪♪

keep things small

slide-23
SLIDE 23

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

slide-24
SLIDE 24

var array = []; for (var i = 0; i < 20; i++) { array[i] = i; }

https://en.wikipedia.org/wiki/Minification_(programming)

keep things small

minify your html, css, and js

slide-25
SLIDE 25

for(var a=[i=0];++i<20;a[i]=i);

https://en.wikipedia.org/wiki/Minification_(programming)

keep things small

minify your html, css, and js

slide-26
SLIDE 26

compress your html, css, and js

Shrink it down, gzip it (Don’t reverse it…) ♪♪♪

keep things small

slide-27
SLIDE 27
  • ptimize your images

All the small things What speed this brings! ♪♪♪

keep things small

slide-28
SLIDE 28
  • ptimize your images

The picture is far too big to look at kid Your screen’s just not wide enough ♪♪♪

keep things small

slide-29
SLIDE 29
  • ptimize 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">

slide-30
SLIDE 30
  • ptimize 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, a big red cat"> </picture>

slide-31
SLIDE 31

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

slide-32
SLIDE 32

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

slide-33
SLIDE 33
  • nly 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

slide-34
SLIDE 34
  • nly 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

slide-35
SLIDE 35
  • ptimize fonts

Baby I don't need fancy glyphs To have a good site (Yay system fonts!) ♪♪♪

keep things small

slide-36
SLIDE 36

put your assets in a cdn

keep things small

I feel so close to you right now ♪♪♪

slide-37
SLIDE 37

keep things smart

slide-38
SLIDE 38

concatenate your css and js

Come together, right now Up the speed ♪♪♪

keep things smart

slide-39
SLIDE 39

use image sprites and icon fonts

Yeah, it's always better When they’re together ♪♪♪

keep things smart

slide-40
SLIDE 40

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

slide-41
SLIDE 41

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

slide-42
SLIDE 42

keep things smart

make js non-blocking

We can’t stop… ♪♪♪

slide-43
SLIDE 43

make js non-blocking

And we won’t stop… ♪♪♪

keep things smart

slide-44
SLIDE 44

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

slide-45
SLIDE 45

put css at the top

In your <head> In your <head> Stylesheet, stylesheet, eet, eet, eet ♪♪♪

keep things smart

slide-46
SLIDE 46

put css at the top

Critical styles inlined To make this page load streamlined ♪♪♪

keep things smart

slide-47
SLIDE 47

How you gonna upgrade me? What's higher than One point one? ♪♪♪

keep things smart

use http/2

slide-48
SLIDE 48

Want you to make me feel Like I'm the only TCP connection in the world ♪♪♪

keep things smart

use http/2

slide-49
SLIDE 49

These are my compressions ♪♪♪

keep things smart

use http/2

slide-50
SLIDE 50

Ah, push it Push it good Ah, push it Push it real good ♪♪♪

keep things smart

use http/2

slide-51
SLIDE 51

keep things smooth

slide-52
SLIDE 52

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 ♪♪♪

slide-53
SLIDE 53

how do websites, pt 2

+

document html head body div title 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
slide-54
SLIDE 54

how do websites, pt 2

RenderView Scroll Block Block Block Block Block Text Text

Cause the render’s gonna… rend, rend, rend? ♪♪♪

slide-55
SLIDE 55

how do websites, pt 2

RenderView Scroll Block Block Block Block Block Text Text

And the painter’s gonna paint, paint, paint… ♪♪♪

slide-56
SLIDE 56

how do websites, pt 2

RenderView Scroll Block Block Block Block Block Text Text

And the compositor’s gonna composite, composite, composite… ♪♪♪

slide-57
SLIDE 57

how do websites, pt 2

Do it alllll agaaaain ♪♪♪

slide-58
SLIDE 58

how do websites, pt 2

Layout Painting Compositing

  • this. sick. feat.

♪♪♪

slide-59
SLIDE 59

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 ♪♪♪

slide-60
SLIDE 60

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

slide-61
SLIDE 61

use requestAnimationFrame

keep things smooth

Debounce bounce bounce bounce bounce bounce bounce bounce bounce bounce ♪♪♪

slide-62
SLIDE 62

use requestAnimationFrame

keep things smooth

slide-63
SLIDE 63

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 ♪♪♪

slide-64
SLIDE 64

use web workers

keep things smooth

Give it away Give it away Give it away Give it away now ♪♪♪

slide-65
SLIDE 65

use web workers

keep things smooth

When what you have Will take too long Move along, move along Like I know you do ♪♪♪

slide-66
SLIDE 66

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 ♪♪♪

slide-67
SLIDE 67

animate with transform + opacity

keep things smooth

Layout Painting Compositing

slide-68
SLIDE 68

animate with transform + opacity

keep things smooth

.moving-element { will-change: transform; }

slide-69
SLIDE 69

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. ♪♪♪

slide-70
SLIDE 70

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

slide-71
SLIDE 71

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

slide-72
SLIDE 72

always measure first

slide-73
SLIDE 73

always measure first

synthetic measurements

Is someone getting the test, the test, the test, the test of you? ♪♪♪

slide-74
SLIDE 74

always measure first

real user measurements

Ain’t it fun Timing in the real world Ain’t it good Testing in their Chrome ♪♪♪

slide-75
SLIDE 75

seriously, always measure first

slide-76
SLIDE 76

keep things small, keep things smart, keep things smooth

slide-77
SLIDE 77
  • 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
  • Assessing Loading Performance in Real Life with

Navigation and Resource Timing

  • High Performance Browser Networking
  • Server Farm to Table, Annotated

Resources

slide-78
SLIDE 78 Lil' Mama - Lip Gloss 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 Taylor Swift - Love Story 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 The Beatles - Come Together Jack Johnson - Better Together Drake - Started from the Bottom

Complete Tracklist

slide-79
SLIDE 79 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 Rihanna - Only Girl in the World Usher - Confessions Part II Salt-N-Pepa - Push It Santana ft. Rob Thomas - Smooth Taylor Swift - Shake it Off Katy Perry - Last Friday Night (T.G.I.F) 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 Foo Fighters - The Best of You Paramore - Ain't it Fun

Complete Tracklist

*something witty about a POP server…*

slide-80
SLIDE 80

Thanks!

jenna.is/at-qconsf @zeigenvector

💚 🐴 🚁 ✨ 🌼 🐞 ⚡ 😼 🔦 🌠 🍊 🍖 💗 🐣 🐙