10 KB or Bust - Speaker Deck

Slide 1

Slide 1 text

! 1 0 K B O R B U S T ! T H E D E L I C AT E P O W E R O F W E B PA C K A N D B A B E L B R I A N H O LT — M I C R O S O F T — @ H O LT B T

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

W E ’ R E T RY I N G O U R B E S T, D A M M I T

Slide 10

Slide 10 text

Most companies just need to survive

Slide 11

Slide 11 text

N O T E V E RY A P P N E E D S T O W O R K O N 2 G O N A L O W - P O W E R P H O N E K N O W Y O U R A U D I E N C E

Slide 12

Slide 12 text

T H AT S A I D , T O D AY W E ’ R E TA L K I N G A B O U T 2 G O N L O W - P O W E R D E V I C E S

Slide 13

Slide 13 text

T E C H S P E E D 2 G 1 4 K b p s 3 G C D M A 1 4 4 K b p s 4 G LT E 1 0 0 , 0 0 0 K b p s G I G A B I T F I B E R 1 , 0 0 0 , 0 0 0 K b p s

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

R E M E M B E R B R O W S I N G T H E N E T O N T H I S ? 2 G I S S L O W E R

Slide 16

Slide 16 text

PA R T I C U L A R LY B E C A U S E T H E W E B C A N B E S O B L O AT E D N O W

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

I F T H I S I S A C O M P E T I T I O N , A S I A A N D A F R I C A A R E K I C K I N G S I L I C O N VA L L E Y ’ S

Slide 20

Slide 20 text

O K AY, I F E E L S U F F I C I E N T LY B A D W H AT D O I D O ?

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Q U E S T I O N Y O U R F R A M E W O R K N A M E S I Z E ( K B ) 2 G T I M E ( S E C ) P R E A C T 3 . 5 0 . 1 1 7 V U E 2 1 . 4 0 . 7 1 R E A C T ( + D O M ) 3 1 . 4 1 . 0 4 7 A N G U L A R 6 1 . 9 2 . 0 6

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

C O M P I L E Y O U R C O D E T W I C E W I T H B A B E L • With modules • target: { esmodules: true } • • Without modules • target: { esmodules: false } • <script src="./compiled-with-all-the—transformations.js">

Slide 25

Slide 25 text

L E T ’ S T R E E S H A K E

Slide 26

Slide 26 text

Theme: aka.ms/night-owl Font: dank.sh

Slide 27

Slide 27 text

Theme: aka.ms/night-owl Font: dank.sh

Slide 28

Slide 28 text

Theme: aka.ms/night-owl Font: dank.sh

Slide 29

Slide 29 text

Theme: aka.ms/night-owl Font: dank.sh

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

T R E E S H A K I N G I S N O • (silver bullet, lol)

Slide 33

Slide 33 text

U S E B U I LT I N S

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

L O O S E M O D E

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

B U I L D U S I N G N O D E _ E N V = “ P R O D U C T I O N ”

Slide 38

Slide 38 text

C O D E S P L I T T I N G

Slide 39

Slide 39 text

S O U R C E M A P S

Slide 40

Slide 40 text

S C O P E H O I S T I N G

Slide 41

Slide 41 text

M O D U L E C O N C AT E N AT I O N P L U G I N

Slide 42

Slide 42 text

not scope hoisted scope hoisted Via Jeremias Menichelli at https://medium.com/webpack/brief-introduction-to-scope-hoisting-in-webpack-8435084c171f

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

I M A G E S K E L E T O N S

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Source: https://codepen.io/jmperez/pen/oogqdp

Slide 48

Slide 48 text

Source: https://medium.freecodecamp.org/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c

Slide 49

Slide 49 text

You can cut out a lot of page weight with loading placeholders

Slide 50

Slide 50 text

1 0 K B O R B U S T • Initial payload should be under 10KB • Invest time and effort into tuning your build. Many of these wins are free • Load no scripts and only the bare styles to get above the fold visuals • Using a script, load the rest in background • Use image skeletons, load real images later • Use code splitting to only get the code you need up front, delay the rest until later

Slide 51

Slide 51 text

aka.ms/concatenate

Slide 52

Slide 52 text

R E D U C E T T F B ( T I M E - T O - F I R S T- B Y T E )

Slide 53

Slide 53 text

S E R V E R T I M I N G S A P I Image credit: Paul Irish

Slide 54

Slide 54 text

C O M P R E S S Y O U R R E S P O N S E S

Slide 55

Slide 55 text

B R O T L I

Slide 56

Slide 56 text

L I N K E D I N ’ S P E R F O R M A N C E I N C R E A S E W I T H B R O T L I

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

C O L D S TA R T By Adam majewski (Based on the answer by Joachim Breitner on SO) [CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0)], via Wikimedia Commons

Slide 59

Slide 59 text

A Z U R E - F U N C T I O N - PA C K

Slide 60

Slide 60 text

T H E F U T U R E

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

A O T ( A H E A D - O F - T I M E C O M P I L AT I O N )

Slide 64

Slide 64 text

PA R T I A L E VA L U AT I O N

Slide 65

Slide 65 text

P R E PA C K

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

“ D I S A P P E A R I N G ” F R A M E W O R K S

Slide 68

Slide 68 text

Ivy

Slide 69

Slide 69 text

B I N A RY B Y T E C O D E

Slide 70

Slide 70 text

H A C K E R N E W S C L O N E N A M E 3 G T T I ( S E C ) 2 G T T I ( S E C ) P R E A C T 1 . 5 1 . 9 2 S V E LT E 2 . 2 2 . 5 R E A C T ( + D O M ) 2 . 0 9 2 . 5 7 G L I M M E R 2 . 8 1 4 . 1 2 A N G U L A R 3 . 2 4 . 3

Slide 71

Slide 71 text

T H A N K Y O U B R I A N H O LT — M I C R O S O F T — @ H O LT B T Functions: aka.ms/concatenate Theme: aka.ms/night-owl Font: dank.sh