The hidden cost of performance marketing

The hidden cost of performance marketing

22725c2d3eb331146549bf0d5d3c050c?s=128

stefan judis

April 20, 2016
Tweet

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!

  7. None
  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

  23. None
  24. None
  25. None
  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

  32. None
  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

  42. None
  43. None
  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>

  46. None
  47. http://caniuse.com/#feat=serviceworkers

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

  49. None
  50. None
  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

  53. None
  54. None
  55. None
  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