The hidden cost of performance marketing

Slide 1

Slide 1 text

The hidden cost of Performance Marketing @stefanjudis

Slide 2

Slide 2 text

Frontend Developer 3 years e-commerce Single Page Apps for 2 years

Slide 3

Slide 3 text

http://perf-tooling.today

Slide 4

Slide 4 text

https://github.com/stefanjudis

Slide 5

Slide 5 text

http://www.meetup.com/de/Berlin-Web-Performance-Group/

Slide 6

Slide 6 text

Drama!

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Brave AdBlocking in Opera AdBlocking in iOS

Slide 9

Slide 9 text

AMP ( Accelerated Mobile Pages ) Instant articles

Slide 10

Slide 10 text

The web today is too slow!

Slide 11

Slide 11 text

made responses ~20KB smaller `Explore Photos` impressions increased over 3% http://engineering.instagram.com/posts/193415561023919/performance-&-usage-at-Instagram

Slide 12

Slide 12 text

https://wpostats.com

Slide 13

Slide 13 text

How does this relate to Performance Marketing?

Slide 14

Slide 14 text

Performance Marketing / Digital Marketing Digital marketing is an umbrella term for the targeted, measurable, and interactive marketing of products or services using digital technologies to reach and convert leads into customers […]. “ ”

Slide 15

Slide 15 text

SEM | SEO Display-Adverts E-Mail Marketing Affiliate-Marketing Cooperation Co-Registration

Slide 16

Slide 16 text

Common services ¯\_(ϑ)_/¯ 3rd Parties

Slide 17

Slide 17 text

- or -

Slide 18

Slide 18 text

Let`s take the journey of WebDev 101

Slide 19

Slide 19 text

Avoid global variables

Slide 20

Slide 20 text

Global variables : Range 61 - 875 Median: 147 Included 3rd Party domains : Range 4 - 69 Median: 31

Slide 21

Slide 21 text

window.axel // “0.8424808841664344” window.setCookie // undefined window.setCookieTwo // undefined window.setCookieThree // undefined window.setCookieFour // undefined window.zufallsZahl // 0 window.FS, window.ga, window.fa, window.i, window.FB, window.at, window.tmp, window.wt, ... Be aware of collisions!

Slide 22

Slide 22 text

Serve secure websites

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Implement warning mechanisms

Slide 27

Slide 27 text

Think of security issues

Slide 28

Slide 28 text

https://randywestergren.com/widespread-xss-vulnerabilities-ad-network-code-affecting-top-tier-publishers-retailers/ http://www.troyhunt.com/2015/07/how-i-got-xssd-by-my-ad-network.html Be aware that bad things can happen!

Slide 29

Slide 29 text

If you run the site using them [3rd parties], you´re responsible for them when they go wrong! “ ” Troy Hunt Developer Security, Microsoft

Slide 30

Slide 30 text

Serve less and quickly

Slide 31

Slide 31 text

Make fewer requests Usual setup App-Server API CDN Browser

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Build all the things

Slide 34

Slide 34 text

Make everything as small as possible https://docs.google.com/spreadsheets/d/1zAVk6EMfFD39m8SRhqarOjbBlVqDRdDuTpSw3GihP3M/edit?usp=sharing Average Page Weight 1560 KB 365 KB Sites with 3rd Parties failing on GZIP compression 26% No GZIP compression - 74% Sites with 3rd Parties failing on JS minification 53% No JS miniﬁcation - 47% Talk to your vendors

Slide 35

Slide 35 text

Critical render path Get something meaningful on the screen as quickly as possible Network Server Response Time Frontend

Slide 36

Slide 36 text

80-90% of the end-user response time is spent on the frontend. Steve Souders Performance Engineer at Google, Yahoo & Fastly “ ”

Slide 37

Slide 37 text

The hidden cost

Slide 38

Slide 38 text

The hidden cost

Slide 39

Slide 39 text

Without blocking script Start render 2.2s With blocking script Start render 3.1s Evaluate ROI of render blocking resources

Slide 40

Slide 40 text

1-second page delay equals a 7% loss in conversions The Performance of Web Applications Customers are Won or Lost in One Second - Aberdeen Group -

Slide 41

Slide 41 text

Without blocking script With blackboxed script

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

http://caniuse.com/#feat=serviceworkers

Slide 48

Slide 48 text

https://chrome.google.com/webstore/detail/spof-o-matic/plikhggfbplemddobondkeogomgoodeg

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

(ಠ_ಠ) But Page Load Time does not tell anything about user experience!

Slide 52

Slide 52 text

http://www.stevesouders.com/blog/2015/05/12/hero-image-custom-metrics/ https://github.com/perfs/audits/issues/1

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

If you try to convince somebody that contents are worth their time you don`t want a loading bar to get in their way. Anand Varma Photographer, National Geographic “ ”

Slide 57

Slide 57 text

Guarantee a smooth experience

Slide 58

Slide 58 text

http://www.webpagetest.org/video/view.php?id=150209_e46843cf0dc768ccc6641e944d3551d05175dd9f

Slide 59

Slide 59 text

Avoid reflows

Slide 60

Slide 60 text

global variables XSS page weight number of requests page load time SPOF start render avoidable reflows Sum up

Slide 61

Slide 61 text

3rd Parties can have impact on security performance user experience Development is hard &