The hidden cost of performance marketing

Transcript

1. The hidden cost of Performance Marketing @stefanjudis
2. Frontend Developer 3 years e-commerce Single Page Apps for 2 years
3. http://perf-tooling.today
4. https://github.com/stefanjudis
5. http://www.meetup.com/de/Berlin-Web-Performance-Group/
6. Drama!
8. Brave AdBlocking in Opera AdBlocking in iOS
9. AMP ( Accelerated Mobile Pages ) Instant articles
10. The web today is too slow!
11. made responses ~20KB smaller `Explore Photos` impressions increased over 3% http://engineering.instagram.com/posts/193415561023919/performance-&-usage-at-Instagram
12. https://wpostats.com
13. How does this relate to Performance Marketing?
14. 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 […]. “ ”
15. SEM | SEO Display-Adverts E-Mail Marketing Affiliate-Marketing Cooperation Co-Registration
16. Common services ¯\_(ϑ)_/¯ 3rd Parties
17. <script src=“https://some-thirdparty.com”></script> - or -
18. Let`s take the journey of WebDev 101
19. Avoid global variables
20. Global variables : Range 61 - 875 Median: 147 Included 3rd Party domains : Range 4 - 69 Median: 31
21. 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!
22. Serve secure websites
26. Implement warning mechanisms
27. Think of security issues
28. 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!
29. If you run the site using them [3rd parties], you´re responsible for them when they go wrong! “ ” Troy Hunt Developer Security, Microsoft
30. Serve less and quickly
31. Make fewer requests Usual setup App-Server API CDN Browser
33. Build all the things
34. 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 minification - 47% Talk to your vendors
35. Critical render path Get something meaningful on the screen as quickly as possible Network Server Response Time Frontend
36. 80-90% of the end-user response time is spent on the frontend. Steve Souders Performance Engineer at Google, Yahoo & Fastly “ ”
37. <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>
38. <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
39. Without blocking script Start render 2.2s With blocking script Start render 3.1s Evaluate ROI of render blocking resources
40. 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 -
41. Without blocking script With blackboxed script
44. <script type=“text/javascript" src="https://seal.websecurity.norton.com/getseal? host_name=www.thehiddencost.de&amp;lang=de"></script>
45. <script type=“text/javascript" src=“https://seal.websecurity.norton.com/getseal? host_name=www.thehiddencost.de&amp;lang=de" async></script>
47. http://caniuse.com/#feat=serviceworkers
48. https://chrome.google.com/webstore/detail/spof-o-matic/plikhggfbplemddobondkeogomgoodeg
51. (ಠ_ಠ) But Page Load Time does not tell anything about user experience!
52. http://www.stevesouders.com/blog/2015/05/12/hero-image-custom-metrics/ https://github.com/perfs/audits/issues/1
56. 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 “ ”
57. Guarantee a smooth experience
58. http://www.webpagetest.org/video/view.php?id=150209_e46843cf0dc768ccc6641e944d3551d05175dd9f
59. Avoid reflows
60. global variables XSS page weight number of requests page load time SPOF start render avoidable reflows Sum up
61. 3rd Parties can have impact on security performance user experience Development is hard &
62. Marketing Development
63. Thanks for listening! @stefanjudis http://bit.ly/the-hidden-cost