Pushing Pixels

A presentation at Performance.now() in November 2023 in Amsterdam, Netherlands by Mark Zeman

Slide 1

Slide 1

Pushing Pixels

Slide 2

Slide 2

Hopeful Idealist

Slide 3

Slide 3

Slide 4

Slide 4

Pages

Slide 5

Slide 5

Buttery Smooth

Slide 6

Slide 6

Thinking in pages has fostered a monolithic approach to the web experience

Slide 7

Slide 7

Let’s bust up that monolith

Slide 8

Slide 8

Let’s burn those pages

Slide 9

Slide 9

Let’s burn those pages an ape wearing a spacesuit burning pages in a book surrounded by hundreds of other burning books

Slide 10

Slide 10

Not every pixel has the same value

Slide 11

Slide 11

Slide 12

Slide 12

Nav Cart Hero Ad Content

Slide 13

Slide 13

Slide 14

Slide 14

Design an island

Slide 15

Slide 15

Don’t throw pages over the wall from design to development

Slide 16

Slide 16

Collaborate and prototype early in small interdisciplinary teams

Slide 17

Slide 17

Kumara Incident

Slide 18

Slide 18

Approach the UX as time based

Slide 19

Slide 19

Slide 20

Slide 20

Nav Cart Hero Ad Content

Slide 21

Slide 21

Static App Static Third Party Static

Slide 22

Slide 22

Design Dev Marketing Agency Content

Slide 23

Slide 23

Build an island

Slide 24

Slide 24

patterns.dev

Slide 25

Slide 25

Islands Architecture Katie Sylor-Miller

Slide 26

Slide 26

astro.build

Slide 27

Slide 27

Multi Page App Content Focused BYO JS Components astro.build

Slide 28

Slide 28

astro.build

Slide 29

Slide 29

astro.build

Slide 30

Slide 30

astro.build

Slide 31

Slide 31

Critical Rendering Path web.dev

Slide 32

Slide 32

Slide 33

Slide 33

Static vs SPA 1.7s 10.5s

Slide 34

Slide 34

Slide 35

Slide 35

Measure an island

Slide 36

Slide 36

Slide 37

Slide 37

Slide 38

Slide 38

Slide 39

Slide 39

Slide 40

Slide 40

Hero Times

Slide 41

Slide 41

Hero Times 1.7s

Slide 42

Slide 42

Paul Irish

Slide 43

Slide 43

Largest Contentful Paint

Slide 44

Slide 44

Largest Contentful Paint Cumulative Layout Shift First Input Delay

Slide 45

Slide 45

Largest Contentful Paint Cumulative Layout Shift First Input Delay Interaction to Next Paint

Slide 46

Slide 46

First Meaningful Paint

Slide 47

Slide 47

Cumulative Layout Shift Windows

Slide 48

Slide 48

Unexpected LCP

Slide 49

Slide 49

Unexpected LCP

Slide 50

Slide 50

Unexpected LCP

Slide 51

Slide 51

WC3 Web Performance Working Group

Slide 52

Slide 52

Element Timing <img src=”/images/logo.png” elementtiming=”logo-shown” /> Chromium only img and text nodes RUM & Synthetic

Slide 53

Slide 53

Time to first tweet

Slide 54

Slide 54

Slide 55

Slide 55

Slide 56

Slide 56

Think in smaller islands of content and stream them into the browser (islands architecture)

Slide 57

Slide 57

Slide 58

Slide 58

Don’t prioritise developer experience over user experience (everything has a cost, especially SPAs)

Slide 59

Slide 59

Slide 60

Slide 60

Keep measurement simple and easy for everyone to understand and improve (build a performance culture)

Slide 61

Slide 61

Pushing Code

Slide 62

Slide 62

Pushing Pixels