The hidden cost of performance marketing

The hidden cost of Performance Marketing @stefanjudis

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

http://perf-tooling.today

https://github.com/stefanjudis

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

Drama!

Brave AdBlocking in Opera AdBlocking in iOS

AMP ( Accelerated Mobile Pages ) Instant articles

The web today is too slow!

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

https://wpostats.com

How does this relate to Performance Marketing?

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 […]. “ ”

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

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

Let`s take the journey of WebDev 101

Avoid global variables

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

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!

Serve secure websites

Implement warning mechanisms

Think of security issues

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!

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

Serve less and quickly

Make fewer requests Usual setup App-Server API CDN Browser

Build all the things

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

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

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

<html> <head> <meta charset="utf-8"> <script src=“https://error-track.com”></script> <title>The hidden cost</title> <link
rel="stylesheet" href="style.css"> <script src=“https://3rd.com/script.js”></script> <link rel="stylesheet" href=“https://3rd.com/style.css“> <meta name="description" content=“Foo Bar Baz”> <script src=“https://ab-testing.com/script.js”></script> </head> <body>  </body> </html>

<html> <head> <meta charset="utf-8"> <script src=“https://error-track.com”></script> <title>The hidden cost</title> <link
rel="stylesheet" href="style.css"> <script src=“https://3rd.com/script.js”></script> <link rel="stylesheet" href=“https://3rd.com/style.css“> <meta name="description" content=“Foo Bar Baz”> <script src=“https://ab-testing.com/script.js”></script> </head> <body> <!-- our content here —> </body> </html> Critical blocking resources

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

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 -

Without blocking script With blackboxed script

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

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

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

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

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 “ ”

Guarantee a smooth experience

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

Avoid reflows

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

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

Marketing Development

Thanks for listening! @stefanjudis http://bit.ly/the-hidden-cost

The hidden cost of performance marketing

The hidden cost of performance marketing

More Decks by stefan judis

Other Decks in Technology

Featured

Transcript