Fostering a Web Performance Culture

A presentation at pitercss_conf in June 2018 in St Petersburg, Russia by José M. Pérez

Slide 1

Slide 1

Fostering a Web Performance Culture José Pérez @jmperezperez

Slide 2

Slide 2

hi! I’m Jose Software Engineer at Spotify

Slide 3

Slide 3

Slide 4

Slide 4

Steve Souders’ Rules (2007)

Slide 5

Slide 5

Lighthouse 3.0 (2018)

Slide 6

Slide 6

Lighthouse 3.0 (2018)

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Not a talk about why web performance is important

Slide 10

Slide 10

But a talk about culture

Slide 11

Slide 11

Who are we?

Slide 12

Slide 12

Meanwhile in our teams...

Slide 13

Slide 13

Slide 14

Slide 14

Trade-offs We don’t have time for everything

Slide 15

Slide 15

Features Marketing Campaigns CI/CD Security Test UX UI A11y Performance

Slide 16

Slide 16

Better done than perfect performance

Slide 17

Slide 17

6 steps to start a web performance culture

Slide 18

Slide 18

1 Your dev environment != your user’s environment

Slide 19

Slide 19

Slide 20

Slide 20

“World-Wide Web, not Wealthy Western Web” Bruce Lawson - Fronteers 2016

Slide 21

Slide 21

Device?

Slide 22

Slide 22

Network?

Slide 23

Slide 23

Browser?

Slide 24

Slide 24

Deprecating browsers

Slide 25

Slide 25

Do they use because the site is unusable on other browsers?

Slide 26

Slide 26

Optimization can lead to higher page load time (and it’s alright!)

Slide 27

Slide 27

Dan Luu’s “Web Bloat”

Slide 28

Slide 28

Gather devices (by market share) Deliver a good experience on those Deprecate when needed Powerful devices get a good experience automagically. Profit.

Slide 29

Slide 29

2 te s k Know the library

Slide 30

Slide 30

“if all you have is a hammer, everything looks like a nail”

Slide 31

Slide 31

Challenge your company (or someone else will do)

Slide 32

Slide 32

Tech changes

Slide 33

Slide 33

3 Experiment and validate

Slide 34

Slide 34

“ <library/browser API/shiny That new thing> sounds cool ”

Slide 35

Slide 35

“ <library/browser API/shiny That new thing> sounds cool ”

Slide 36

Slide 36

“ <library/browser API/shiny This is how thing> will improve our project ”

Slide 37

Slide 37

Slide 38

Slide 38

Slide 39

Slide 39

4 Share and celebrate success stories

Slide 40

Slide 40

4 Share and celebrate success stories

Slide 41

Slide 41

Slide 42

Slide 42

Slide 43

Slide 43

Slide 44

Slide 44

max growth Vox Media “Declaring performance bankruptcy” May 2015

Slide 45

Slide 45

Slide 46

Slide 46

5 Educate your colleagues

Slide 47

Slide 47

The Bus Factor Source: https://medium.com/tech-tajawal/the-bus-factor-6ea1a3ede6bd

Slide 48

Slide 48

Slide 49

Slide 49

6 Make performance part of your workflow

Slide 50

Slide 50

WebPagetest

Slide 51

Slide 51

GTmetrix

Slide 52

Slide 52

GTmetrix

Slide 53

Slide 53

Calibre

Slide 54

Slide 54

Calibre (Slack integration)

Slide 55

Slide 55

Wrap-up

Slide 56

Slide 56

Dev env != user’s env Share and celebrate Know the tech stack Educate your colleagues Experiment and validate Performance part of your workflow

Slide 57

Slide 57

Article on bit.do/perf-culture

Slide 58

Slide 58

thanks! @jmperezperez Article on https://bit.do/perf-culture