Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LDNWebPerf April 2016 - Andrew Neilson

LDNWebPerf April 2016 - Andrew Neilson

How PerfOps revolutionized performance at Marks & Spencer

More Decks by London Web Performance Group

Other Decks in Technology

Transcript

  1. How PerfOps is revolutionising
    Performance at M&S
    Andrew Neilson
    ( [email protected] / @andyjneilson73)

    View Slide

  2. Feb 2014:
    M&S.com launches on new in-house platform
    M&S.com
    launches
    Feb 2014

    View Slide

  3. March 2014:
    M&S.com begins transition to agile
    M&S.com
    launches
    Feb 2014 Mar 2014
    Agile
    transition
    commences

    View Slide

  4. March 2014:
    M&S.com begins transition to agile
    M&S.com
    launches
    Feb 2014 Mar 2014
    Good news… DevOps key to enabling
    success for continuous integration
    Agile
    transition
    commences

    View Slide

  5. April 2014:
    Head up Performance Engineering
    M&S.com
    launches
    Feb 2014 Mar 2014 Apr 2014
    Move to
    Performance
    Engineering
    Agile
    transition
    commences

    View Slide

  6. April 2014:
    Head up Performance Engineering
    M&S.com
    launches
    Feb 2014 Mar 2014 Apr 2014
    Move to
    Performance
    Engineering
    Shape
    performance
    for .com
    Agile
    transition
    commences

    View Slide

  7. Summer 2014:
    Performance Engineering as-is
    M&S.com
    launches
    Feb 2014 Mar 2014 Apr 2014 May - Sep 2014
    Move to
    Performance
    Engineering
    Prepare for
    Peak 2014
    Agile
    transition
    commences
    Ready for
    Peak 2014

    View Slide

  8. End of September 2014:
    Performance Engineering ensures M&S.com
    website should be stable for Peak!
    M&S.com
    launches
    Feb 2014 Mar 2014 Apr 2014 May - Sep 2014
    Move to
    Performance
    Engineering
    Prepare for
    Peak 2014
    Agile
    transition
    commences
    Go for
    Peak 2014

    View Slide

  9. End of September 2014:
    Performance Engineering ensures M&S.com
    website should be stable for Peak!
    M&S.com
    launches
    Feb 2014 Mar 2014 Apr 2014 May - Sep 2014
    Move to
    Performance
    Engineering
    Prepare for
    Peak 2014
    Agile
    transition
    commences
    Go for
    Peak 2014
    but…

    View Slide

  10. Transition to agile performance capability
    pending
    A full end to end view of web performance was
    required
    Need more insight into speeds our customer
    was experiencing?

    View Slide

  11. 1. What does performance mean for
    a .com business?
    Research
    Oct 2014

    View Slide

  12. 1. What does performance mean for
    a .com business?
    2. How does traditional performance
    engineering become agile?
    Research
    Oct 2014

    View Slide

  13. November 2014
    Looking for inspiration…

    View Slide

  14. November 2014

    View Slide

  15. January 2015
    PerfOps
    A Performance Framework
    for Agile Delivery

    View Slide

  16. Speed is key to meet customer
    expectations and therefore…

    View Slide

  17. Speed is key to meet customer
    expectations and therefore…
    Speed is key to generating revenue
    opportunities

    View Slide

  18. PerfOps
    Provides a performance test capability
    throughout agile delivery

    View Slide

  19. PerfOps
    Provides insight to the customer
    experience of speed

    View Slide

  20. PerfOps
    Flags impact to customer experience of
    speed caused by change

    View Slide

  21. PerfOps
    Drives optimisation and standards
    across both Business and Delivery
    teams

    View Slide

  22. What are we measuring?

    View Slide

  23. Non Functional Requirements
    (NFR)
    What are we measuring?

    View Slide

  24. Non Functional Requirements
    What are we measuring?

    View Slide

  25. Non Functional Requirements
    What are we measuring?
    Performance Transactions

    View Slide

  26. A

    View Slide

  27. A
    B

    View Slide

  28. Browser
    Content
    Delivery
    Network
    Request
    Response
    Generate
    Response
    Render
    Page
    A
    B

    View Slide

  29. Browser CDN
    Request
    Render
    Page
    A
    B
    Web
    Server
    Web
    Application
    Order
    Management
    Response
    Generate
    Response

    View Slide

  30. Browser CDN
    Request
    Render
    Page
    A
    B
    Web
    Server
    Web
    Application
    Order
    Management
    Response
    Generate
    Response
    NFR
    NFR

    View Slide

  31. Browser CDN
    Request
    Render
    Page
    A
    B
    Web
    Server
    Web
    Application
    Order
    Management
    Response
    Generate
    Response
    Parent Transaction
    Child Transaction

    View Slide

  32. What is the definition of B?

    View Slide

  33. Start Render
    or
    First Paint?
    How quickly do we
    engage our customers?
    What is the definition of B?

    View Slide

  34. What is the definition of B?
    Speed Index?
    How efficient to visually
    complete?

    View Slide

  35. What is the definition of B?
    Page Load?
    Aligned to customer
    satisfaction?

    View Slide

  36. What is the definition of B?
    Something
    bespoke?
    User timing & custom
    metrics!
    Steve Souders: https://speedcurve.com/blog/user-timing-and-custom-metrics/

    View Slide

  37. How do we measure B?

    View Slide

  38. Browser CDN
    Request
    Response
    Generate
    Response
    Render
    Page
    A
    B

    View Slide

  39. Browser CDN
    Request
    Response
    Generate
    Response
    Render
    Page
    A
    B
    ~90%
    of pages
    are
    offloaded

    View Slide

  40. Browser CDN
    Request
    Response
    Generate
    Response
    Render
    Page
    A
    B
    ~90%
    offload
    Real User Measurements
    Synthetic Measurements

    View Slide

  41. Browser CDN
    Request
    Response
    Generate
    Response
    Render
    Page
    A
    B
    ~90%
    offload

    View Slide

  42. Browser CDN
    Request
    Render
    Page
    A
    B
    Web
    Server
    Web
    Application
    Order
    Management
    Response
    Generate
    Response
    ~10% calls to origin

    View Slide

  43. Browser CDN
    Request
    Render
    Page
    A
    B
    Web
    Server
    Web
    Application
    Order
    Management
    Response
    Generate
    Response
    APM
    ~10% calls to origin

    View Slide

  44. Browser CDN
    Request
    Render
    Page
    A
    B
    Web
    Server
    Web
    Application
    Order
    Management
    Response
    Generate
    Response
    ~10% calls to origin

    View Slide

  45. Store Device Integration
    Request
    Process
    Response
    A
    B
    Backend
    System 1
    Not just a .com opportunity!

    View Slide

  46. Store Device Integration
    Request
    Process
    Response
    A
    B
    Backend
    System 1
    Not just a .com opportunity!
    Backend
    System 1
    Backend
    System 2
    Message
    Process
    Message
    A
    B

    View Slide

  47. Speed is an aspiration not an NFR

    View Slide

  48. Enforce one basic rule: never get slower!
    Speed is an aspiration not an NFR

    View Slide

  49. We must test A to B through delivery

    View Slide

  50. We must test A to B through delivery
    DevOps tools / processes enable
    us to validate build on build
    release on release

    View Slide

  51. We must test A to B through delivery
    DevOps tools / processes enable
    us to validate build on build
    release on release
    Enforce one basic DoD: never get slower!

    View Slide

  52. How do we test performance when
    delivery is agile?

    View Slide

  53. Design
    Build
    Test
    Analysis
    Product Idea V&P Test

    View Slide

  54. Design
    Build
    Test
    Analysis
    Product Idea V&P Test
    Piggy-back on DevOps capability

    View Slide

  55. Design
    Build
    Test
    Analysis
    Product Idea V&P Test
    Optimisation
    recommendations from
    PerfOps back-log
    (analysis & diagnostics)

    View Slide

  56. Design
    Build
    Test
    Analysis
    Automated performance
    test capability
    Product Idea V&P Test
    Optimisation
    recommendations from
    PerfOps back-log
    (analysis & diagnostics)

    View Slide

  57. Design
    Build
    Test
    Analysis
    Product Idea V&P Test
    Automated page
    speed test capability
    Automated performance
    test capability Automated performance
    budget test capability
    Optimisation
    recommendations from
    PerfOps back-log
    (analysis & diagnostics)

    View Slide

  58. Design
    Build
    Test
    Analysis
    Product Idea V&P Test
    Future plans…
    Performance by Design
    including UX guidelines
    Automated page
    speed test capability
    Automated performance
    test capability Automated performance
    budget test capability
    Optimisation
    recommendations from
    PerfOps back-log
    (analysis & diagnostics)

    View Slide

  59. Design
    Build
    Test
    Analysis
    Product Idea V&P Test
    Automated page
    speed test capability
    Automated performance
    test capability Automated performance
    budget test capability
    ?
    Future plans…
    Performance by Design
    including UX guidelines
    Optimisation
    recommendations from
    PerfOps back-log
    (analysis & diagnostics)

    View Slide

  60. Checkpoint:
     What to measure

    View Slide

  61. Checkpoint:
     What to measure
     How to monitor what we measure

    View Slide

  62. Checkpoint:
     What to measure
     How to monitor what we measure
     How to test what we measure

    View Slide

  63. Our next challenges…

    View Slide

  64. How do we action what we measure?
    Our next challenges…

    View Slide

  65. How do we action what we measure?
    Our next challenges…
    We have insight, who else needs it?

    View Slide

  66. Our next challenges…
    What will they do with this insight?
    We have insight, who else needs it?
    How do we action what we measure?

    View Slide

  67. Start basic…
    don’t drown in data!

    View Slide

  68. Effective communication
    with
    simple & powerful of visualisation

    View Slide

  69. Build a performance mind-set

    View Slide

  70. Let’s look at RUM / Synthetic
    Monitoring
    and Analysis & Diagnostics

    View Slide

  71. Real-time impact caused by…

    View Slide

  72. Real-time impact caused by…
    third party tags

    View Slide

  73. Real-time impact caused by…

    View Slide

  74. Real-time impact caused by…

    View Slide

  75. Real-time impact caused by…
    a solar eclipse!

    View Slide

  76. Real-time impact caused by…

    View Slide

  77. Real-time impact caused by…
    In this case, no impact.
    marketing / email campaigns

    View Slide

  78. Benefits of planned optimisations

    View Slide

  79. Benefits of planned optimisations
    Step changes can be seen immediately

    View Slide

  80. Insight to device speeds & trends
    Desktop
    Tablet
    Mobile

    View Slide

  81. Insight to device speeds & trends
    Tablet is slowest
    Tablet is popular

    View Slide

  82. Use of waterfalls to
    identify optimisations

    View Slide

  83. Basic diagnostics can
    identify plenty of low
    hanging fruit
    Use of waterfalls to
    identify optimisations

    View Slide

  84. Simple but powerful ways to
    communicate how good we are (or not)

    View Slide

  85. Video comparisons
    Simple but powerful ways to
    communicate how good we are (or not)

    View Slide

  86. Simple but powerful ways to
    communicate how good we are (or not)
    Filmstrips

    View Slide

  87. Simple but powerful ways to
    communicate how good we are (or not)
    Competitor
    benchmarking &
    analysis

    View Slide

  88. Lots of insight but how do we get
    everyone to buy into it?

    View Slide

  89. Lots of insight but how do we get
    everyone to buy into it?
    We had a breakthrough!

    View Slide

  90. Site speed trends reporting that degradation over time

    View Slide

  91. PerfOps contacted to see if we could help
    Majority of feedback called out “site is slow”

    View Slide

  92. Problem identified via SpeedCurve…

    View Slide

  93. Request maps by Simon Hearne: http://requestmap.webperf.tools/
    Request map of our homepage as part of a speed review with NCC
    Group

    View Slide

  94. If we turned off third party content we be 50%
    faster
    This does not help the business
    Third party content must be and can be controlled

    View Slide

  95. Request maps by Simon Hearne: http://requestmap.webperf.tools/
    Request map visualisation brings to life the impact…

    View Slide

  96. Request map visualisation brings to life the impact… and improvements!
    Request maps by Simon Hearne: http://requestmap.webperf.tools/

    View Slide

  97. Problem identified via powerful visualisation in SpeedCurve…

    View Slide

  98. Customer satisfaction correlation with site speed

    View Slide

  99. Speed must be a priority
    Impact to speed must be monitored
    Optimisations can also be made by
    Business not just IT

    View Slide

  100. Maturing Site Speed Analytics
    There are a lot of studies available that highlight why
    speed is important to retailers in particular.
    Doing your own study is much more interesting!

    View Slide

  101. • Correlation to single page visits and customer satisfaction
    • How speeds influence SEO and Marketing
    • Impact v benefit of personalisation and third party tags
    • Identifying what we cannot control
    Site Speed Analytics

    View Slide

  102. Site Speed Analytics
    Studies do not always align to all!

    View Slide

  103. Site Speed Analytics
    Breakdown via page
    types and devices
    as well

    View Slide

  104. Site Speed Analytics

    View Slide

  105. Site Speed Analytics
    Product List
    Product List
    The colour of the boxes denotes the relative
    page load whilst the size denotes the weight of
    the page.
    M&S has decreased in size and page load,
    whilst competitors show no improvement
    A
    B
    C
    D
    D
    C
    A
    B

    View Slide

  106. Site Speed Analytics

    View Slide

  107. Site Speed Analytics

    View Slide

  108. Site Speed Analytics

    View Slide

  109. Optimisations based on metric driven decisions
    Business focused metrics ensure optimisation priority
    Site Speed Analytics

    View Slide

  110. Optimisations based on metric driven decisions
    Business focused metrics ensure optimisation priority
    M&S.com is now 37% faster than it was 8 months ago
    Site Speed Analytics

    View Slide

  111. VP Testing
    Back-end
    monitoring
    Optimisation
    Back logs
    Back-end
    diagnostics
    The PerfOps Journey…

    View Slide

  112. VP Testing
    Back-end
    monitoring
    Optimisation
    Back logs
    Back-end
    diagnostics
    Automated
    VP
    The PerfOps Journey…

    View Slide

  113. VP Testing
    Back-end
    monitoring
    Optimisation
    Back logs
    Back-end
    diagnostics
    Automated
    VP
    Automated
    Budget Tests
    The PerfOps Journey…

    View Slide

  114. VP Testing
    Back-end
    monitoring
    Optimisation
    Back logs
    Back-end
    diagnostics
    Automated
    VP
    Automated
    Speed Tests
    Automated
    Budget Tests
    The PerfOps Journey…

    View Slide

  115. VP Testing
    Back-end
    monitoring
    Optimisation
    Back logs
    Back-end
    diagnostics
    Automated
    VP
    Automated
    Speed Tests
    Automated
    Budget Tests
    More
    Optimisation
    Back log
    The PerfOps Journey…

    View Slide

  116. VP Testing
    Back-end
    monitoring
    Optimisation
    Back logs
    Back-end
    diagnostics
    Automated
    VP
    Automated
    Speed Tests
    Automated
    Budget Tests
    More
    Optimisation
    Back log
    Real User
    Measurement
    The PerfOps Journey…

    View Slide

  117. VP Testing
    Back-end
    monitoring
    Optimisation
    Back logs
    Back-end
    diagnostics
    Automated
    VP
    Automated
    Speed Tests
    Automated
    Budget Tests
    More
    Optimisation
    Back log
    Real User
    Measurement
    Synthetic
    Measurement
    The PerfOps Journey…

    View Slide

  118. VP Testing
    Back-end
    monitoring
    Optimisation
    Back logs
    Back-end
    diagnostics
    Automated
    VP
    Automated
    Speed Tests
    Automated
    Budget Tests
    More
    Optimisation
    Back log
    Real User
    Measurement
    Synthetic
    Measurement
    Front-end
    diagnostics
    The PerfOps Journey…

    View Slide

  119. VP Testing
    Back-end
    monitoring
    Optimisation
    Back logs
    Back-end
    diagnostics
    Automated
    VP
    Automated
    Speed Tests
    Automated
    Budget Tests
    More
    Optimisation
    Back log
    Real User
    Measurement
    Synthetic
    Measurement
    Front-end
    diagnostics
    More
    Optimisation
    Back log
    The PerfOps Journey…

    View Slide

  120. VP Testing
    Back-end
    monitoring
    Optimisation
    Back logs
    Back-end
    diagnostics
    Automated
    VP
    Automated
    Speed Tests
    Automated
    Budget Tests
    More
    Optimisation
    Back log
    Real User
    Measurement
    Synthetic
    Measurement
    Front-end
    diagnostics
    More
    Optimisation
    Back log
    Site Speed
    Dashboards
    The PerfOps Journey…

    View Slide

  121. VP Testing
    Back-end
    monitoring
    Optimisation
    Back logs
    Back-end
    diagnostics
    Automated
    VP
    Automated
    Speed Tests
    Automated
    Budget Tests
    More
    Optimisation
    Back log
    Real User
    Measurement
    Synthetic
    Measurement
    Front-end
    diagnostics
    More
    Optimisation
    Back log
    Site Speed
    Dashboards
    Third party
    Governance
    The PerfOps Journey…

    View Slide

  122. VP Testing
    Back-end
    monitoring
    Optimisation
    Back logs
    Back-end
    diagnostics
    Automated
    VP
    Automated
    Speed Tests
    Automated
    Budget Tests
    More
    Optimisation
    Back log
    Real User
    Measurement
    Synthetic
    Measurement
    Front-end
    diagnostics Third party
    Governance
    More
    Optimisation
    Back log
    Site Speed
    Dashboards
    Site Speed
    Consultancy
    The PerfOps Journey…

    View Slide

  123. VP Testing
    Back-end
    monitoring
    Optimisation
    Back logs
    Back-end
    diagnostics
    Automated
    VP
    Automated
    Speed Tests
    Automated
    Budget Tests
    More
    Optimisation
    Back log
    Real User
    Measurement
    Synthetic
    Measurement
    Front-end
    diagnostics Third party
    Governance
    More
    Optimisation
    Back log
    Site Speed
    Dashboards
    Site Speed
    Consultancy
    Speed
    Forums
    The PerfOps Journey…

    View Slide

  124. VP Testing
    Back-end
    monitoring
    Optimisation
    Back logs
    Back-end
    diagnostics
    Automated
    VP
    Automated
    Speed Tests
    Automated
    Budget Tests
    More
    Optimisation
    Back log
    Real User
    Measurement
    Synthetic
    Measurement
    Front-end
    diagnostics Third party
    Governance
    More
    Optimisation
    Back log
    Site Speed
    Dashboards
    Site Speed
    Consultancy
    Performance
    Transactions
    Speed
    Forums
    The PerfOps Journey…

    View Slide

  125. What next…

    View Slide

  126. What next…
    Site Speed
    Analytics

    View Slide

  127. What next…
    Site Speed
    Analytics
    Mature
    Capability

    View Slide

  128. What next…
    Site Speed
    Analytics
    Mature
    Capability
    Performance
    Budgets

    View Slide

  129. What next…
    Business
    Guidelines
    Site Speed
    Analytics
    Mature
    Capability
    Performance
    Budgets

    View Slide

  130. What next…
    Performance
    by Design
    Business
    Guidelines
    Site Speed
    Analytics
    Mature
    Capability
    Performance
    Budgets

    View Slide

  131. What next…
    Performance
    by Design
    Business
    Guidelines
    Site Speed
    Analytics
    Mature
    Capability
    Performance
    Budgets
    Performance must be everywhere

    View Slide

  132. One rule…

    View Slide

  133. One rule…
    Never get slower!

    View Slide

  134. Thank you
    www.mandsdigital.com / @mandsdigital

    View Slide