SlideShare ist ein Scribd-Unternehmen logo
1 von 29
Ensuring Success &
Avoiding Site Disruptions:
Tips for WebOps, WebDev and
Marketing
Eight WPO/APM Best Practices
for the Holiday Season
Yottaa, Inc.
101 Summer Street
Boston MA 02110
http://www.yottaa.com

© 2012 Yottaa, Inc. All Rights Reserved.
Contents

•   Introduction
•   Tip #1: Monitor performance & set up alerts
•   Tip #2: Use real browsers to monitor user experience
•   Tip #3: Monitor key pages
•   Tip #4: Trend user experience
•   Tip #5: See what your users see
•   Tip #6: Establish performance & SLA goals
•   Tip #7: Capture & diagnose site & app issues
•   Tip #8: Carry out statistically meaningful sampling
•   Appendix: Key site performance and user experience
    metrics

                              2
Introduction

• Holiday shopping is expected to rise nearly
  17% this season, and sites large and small
  want the competitive edge to capture as much
  revenue as possible.
• Is your site ready for the holiday rush? How do
  the best sites monitor and manage their site
  performance and availability?
• In this eBook, we identify the best practices to
  help you be proactive and prevent site
  problems during the holiday season.

                        3
24/7 Monitoring & Alerting

• Set up 24/7 monitoring
• Set up Email/text/SMS alerts




Get started for free here
Best Practices
• Configure issue definitions         • Customize Alert Escalations
                                        to different people
      Critical Error: Recommend             Senior Management:
      network connectivity and page         Consider text messaging
      status code>400 as critical           for critical errors not
      errors (this is the default           resolved after a certain
      setting)                              duration
      Error: Recommend                      Development Team:
      HTML content check                    Consider email alerting for
      as an error                           critical errors, errors and
                                            maybe warnings
      Warning: Recommend treat
      page asset issues, user               Operations Team: Consider
      experience issues and                 text messaging for critical
      network performance issues            errors and errors
      as warnings
Real Browser Monitoring
• Only real browser monitoring provides visibility
  into your users’ experience
• With Firefox, IE and Chrome browsers from locations
  across the planet, you can capture your users’ experience
  and see exactly what your users see
Best Practices
• Select monitor agent                    • Monitoring           • Select the
        Agent:                              frequency:             locations your
        • Use HTTP agent for APIs
 HTTP     and HTTP services                 – For availability     users are from
        • Use HTTP agent if you               monitoring, try
          are only interested in              5 min or less      • To monitor
          service availability and          – For Operations       logged in pages,
          network performance
                                              Team, try 5 min
        • Use browser agents
                                              or less
                                                                   use Yottaa’s
          if you are interested
          in front end as well as           – For Development      “Advanced” tab
          backend performance
          and availability, including
                                              Team, try 10 min     (more later)
                                              to 30 min
          monitoring third party
          assets/widgets
        Browser Agent
        Choice:
        • Pick the most popular
          browser for your site
        • IE9 is still the most popular
          browser in general, but
          your site may differ
Monitor Pages Key for Your Business
Monitor:
• App pages
• Pages behind a log-in
• Customer sites
(specific examples on next page)




                                  Using cookies and other methods,
                                     monitor pages behind log-in,
                               user sessions such as shopping cart, etc.
Best Practices: Which Pages to Monitor
 Web Sites &                                                 User
 Mobile Apps                                                SaaS
                                                          Registration


Web Sites &                                             SaaS Apps:
Mobile Apps:                                            • User dashboard page
• Home page                                             • Key pages behind
• Key landing pages                                       user login
  (e.g., User registration
  page)
• Pages using different          e-Commerce
  technologies (e.g., User
  forum, knowledge base)
• Dynamically-generated      e-Commerce Sites:
  pages                      •    Product catalog page
• Pages from different       •    Product detail page
  origin servers
                             •    Customer shopping cart page
                             •    Customer checkout page
Best Practice: Performance Dashboard
Track User Experience Trending




                   Pages behind login can be
                    really slow, and perform
                          inconsistently
Best Practices: What Trends to Look For?
• Look at the Summary Section for Average Values
   – If the average values are way out of the range, consider
     you have problems
• Look at the Trending Curves:
   – Trending curves should be as flat as possible (consistent)
   – If there are sudden spikes, these spikes are typically problems
       • Click into them to look at the data samples to see what happened
   – If the trending curve goes up and down too much, you may have
     a consistency issue
       • A consistent experience means
         confidence and reliability
• Trending Curves to look into:
   – Time to Interact
   – Time to Start Render
   – Time to Last Byte
   (see appendix for definitions)
See What Your Users See

• Capture user
  experience as video
  and screenshot
  filmstrips
• Correlate with user
  experience & site
  performance metrics
Best Practices
• See What Your              • Analyze the                  • Stats to Think
  Users See                    Page Load                      About:
 – Look at the film strip,     Waterfall                      – How many requests
   would you be happy                                           are there? Too many
   as a user?                  – Are there any                  requests can mean
                                 particularly slow              a slow experience
 – Play the film strip           loading assets?
   as a video to get                                          – How many third party
   a realistic replay          – Are there any HTTP             assets? Too many
   of the actual user            status code errors?            of them can mean
   experience                  – Are their obvious              an unreliable user
                                 gaps in the waterfall?         experience
                                  • Which typically means
                                    heavy client side
                                    JavaScript execution
                                    blocking the entire
                                    browser



                                           HTTP
Ensure Performance & SLA Objectives




Get started for free here
Capture & Diagnose Site & App Issues
• Define and monitor the issues that matter
  to your business
• Gain 360 visibility into all factors impacting your site:
   –   Server issues
   –   Page errors
   –   Network problems
   –   3rd-party asset issues
Capture & Diagnose Site & App Issues
Best Practices: Dealing with Issues
• Configure issue definitions         • If you are only interested
                                        in monitoring
                                        certain domains,
      Critical Error: Recommend
      network connectivity and page     you can do so
      status code>400 as critical       (simply configure it)
      errors (this is the default
      setting)                        • Check the Issue
                                        Listing Page to
      Error: Recommend
      HTML content check                see how many
      as an error                       events each
      Warning: Recommend treat          issue has
      page asset issues, user           generated
      experience issues and
                                        – The more events, the higher
      network performance issues
      as warnings                         priority to tackle the issue
Statistically Meaningful Testing

• Eliminate random noise
• Schedule tests across geographies,
  browsers, last mile connectivities




Get started for free here
Best Practices
• Monitoring & Testing             • Operations Team:
                                      – Use WebsiteTest.com
         Site Monitor:
                                        to diagnose
         Is good for continuous
         monitoring and issue           issues
         alerting

         WebSite Test: Is great
         for on-demand testing     • Development Team:
         and diagnosis                – Use WebsiteTest.com
          • Statistically               to analyze & improve site
            Meaningful Testing:
            Collect enough
            number of samples
            to improve signal to
            noise ratio
Improve Web & Mobile Experience
• Explore every asset’s impact on performance
• Identify bottlenecks using waterfall chart
  (In this example – the Facebook widget is slowing down the page load!)
Best Practices
• Analyze                      • Check Data                • Analyze Individual
  Trending First                 Samples Related             Data Samples
  – Use “Edit Filter”            to “Odd” Trending           – Does the page loading
    to compare key                                             filmstrip look ok?
                                 – To determine the root
    metrics such as Time                                     – What does the page
                                   cause for “odd”
    to Last Byte, Time to                                      load waterfall show?
    Start Render and             – Any error or warning?
                                                               Any particular slow
    Time to Interact                                           assets, HTTP errors?
  – Identify “Odd”
    data points from
    trending lines
  – Identify if any issue is
    a consistent issue or
    only temporary
Appendix: A Primer on
User Experience &
Site Performance Metrics




      23
Characterizing User Experience




Get started for free here
Time to Title



 • Time at which the browser is able to display
   the title of the site in the title bar.
 • The first visual indicator to the user that the
   loading process is working.
 • Typically, ~1 sec.


Get started for free here
Time to Start Render

 • (Also know as “Time to First Paint”)
 • The time at which browser draws the first
   visual element of a web page.
 • Up to that point, a blank screen  high risk
   of abandonment if takes too long.
 • Typically, ~2 sec.




Get started for free here
Time to Display

• time at which browser has finished parsing the
  HTML web page, constructed the Document
  Object Model (DOM) and displayed the HTML
  document.
• (However, the assets in the document such as
  images may not have been loaded yet.)
• Typically, ~5 sec.



Get started for free here
Time to Interact

• The length of time it took before a user could
  interact with the page (type into a field, click on a
  link, etc.).
• Typically, ~6 sec.
Yottaa Site Monitor

• 24/7 Site Monitoring is always on alert & ready
  to help
• Count on Yottaa to monitor user experience &
  identify problems
• Multivariate testing & web performance
  troubleshooting with real-browsers
• See what your users see from any device, any
  location, & any browser

Get started for free here

                            29

Weitere ähnliche Inhalte

Mehr von Yottaa

Image-ine That: Image Optimization for Conversion Maximization
Image-ine That: Image Optimization for Conversion MaximizationImage-ine That: Image Optimization for Conversion Maximization
Image-ine That: Image Optimization for Conversion MaximizationYottaa
 
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...Yottaa
 
Mobile Optimization Tips from Yottaa - MEGMeetup #1
Mobile Optimization Tips from Yottaa - MEGMeetup #1Mobile Optimization Tips from Yottaa - MEGMeetup #1
Mobile Optimization Tips from Yottaa - MEGMeetup #1Yottaa
 
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]Yottaa
 
Managing a Website Performance Optimization (WPO) Project
Managing a Website Performance Optimization (WPO) ProjectManaging a Website Performance Optimization (WPO) Project
Managing a Website Performance Optimization (WPO) ProjectYottaa
 
How GoDaddy Brought Down Millions of Sites – and How to Avoid Being a DNS Out...
How GoDaddy Brought Down Millions of Sites – and How to Avoid Being a DNS Out...How GoDaddy Brought Down Millions of Sites – and How to Avoid Being a DNS Out...
How GoDaddy Brought Down Millions of Sites – and How to Avoid Being a DNS Out...Yottaa
 
An Expert's Guide to Making a Website Slow - Chicago Webmasters Meetup 6/5/2012
An Expert's Guide to Making a Website Slow - Chicago Webmasters Meetup 6/5/2012An Expert's Guide to Making a Website Slow - Chicago Webmasters Meetup 6/5/2012
An Expert's Guide to Making a Website Slow - Chicago Webmasters Meetup 6/5/2012Yottaa
 
Cdn-Summit-2012-mocospace-and-yottaa
Cdn-Summit-2012-mocospace-and-yottaaCdn-Summit-2012-mocospace-and-yottaa
Cdn-Summit-2012-mocospace-and-yottaaYottaa
 
Your customer your asset seminar ecommerce and website speed yottaa
Your customer your asset seminar ecommerce and website speed   yottaaYour customer your asset seminar ecommerce and website speed   yottaa
Your customer your asset seminar ecommerce and website speed yottaaYottaa
 
Anti design patterns - an experts guide to making a slow website - yottaa sit...
Anti design patterns - an experts guide to making a slow website - yottaa sit...Anti design patterns - an experts guide to making a slow website - yottaa sit...
Anti design patterns - an experts guide to making a slow website - yottaa sit...Yottaa
 
Yottaa site speed optimizer presentation at mass innovation nights part of fu...
Yottaa site speed optimizer presentation at mass innovation nights part of fu...Yottaa site speed optimizer presentation at mass innovation nights part of fu...
Yottaa site speed optimizer presentation at mass innovation nights part of fu...Yottaa
 
Yottaa website-performance-services-overview-hostingcon-2011-
Yottaa website-performance-services-overview-hostingcon-2011-Yottaa website-performance-services-overview-hostingcon-2011-
Yottaa website-performance-services-overview-hostingcon-2011-Yottaa
 
Mongodb beijingconf yottaa_3.3
Mongodb beijingconf yottaa_3.3Mongodb beijingconf yottaa_3.3
Mongodb beijingconf yottaa_3.3Yottaa
 

Mehr von Yottaa (13)

Image-ine That: Image Optimization for Conversion Maximization
Image-ine That: Image Optimization for Conversion MaximizationImage-ine That: Image Optimization for Conversion Maximization
Image-ine That: Image Optimization for Conversion Maximization
 
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...
 
Mobile Optimization Tips from Yottaa - MEGMeetup #1
Mobile Optimization Tips from Yottaa - MEGMeetup #1Mobile Optimization Tips from Yottaa - MEGMeetup #1
Mobile Optimization Tips from Yottaa - MEGMeetup #1
 
Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]Best practices to optimize commerce site performance [webinar slides]
Best practices to optimize commerce site performance [webinar slides]
 
Managing a Website Performance Optimization (WPO) Project
Managing a Website Performance Optimization (WPO) ProjectManaging a Website Performance Optimization (WPO) Project
Managing a Website Performance Optimization (WPO) Project
 
How GoDaddy Brought Down Millions of Sites – and How to Avoid Being a DNS Out...
How GoDaddy Brought Down Millions of Sites – and How to Avoid Being a DNS Out...How GoDaddy Brought Down Millions of Sites – and How to Avoid Being a DNS Out...
How GoDaddy Brought Down Millions of Sites – and How to Avoid Being a DNS Out...
 
An Expert's Guide to Making a Website Slow - Chicago Webmasters Meetup 6/5/2012
An Expert's Guide to Making a Website Slow - Chicago Webmasters Meetup 6/5/2012An Expert's Guide to Making a Website Slow - Chicago Webmasters Meetup 6/5/2012
An Expert's Guide to Making a Website Slow - Chicago Webmasters Meetup 6/5/2012
 
Cdn-Summit-2012-mocospace-and-yottaa
Cdn-Summit-2012-mocospace-and-yottaaCdn-Summit-2012-mocospace-and-yottaa
Cdn-Summit-2012-mocospace-and-yottaa
 
Your customer your asset seminar ecommerce and website speed yottaa
Your customer your asset seminar ecommerce and website speed   yottaaYour customer your asset seminar ecommerce and website speed   yottaa
Your customer your asset seminar ecommerce and website speed yottaa
 
Anti design patterns - an experts guide to making a slow website - yottaa sit...
Anti design patterns - an experts guide to making a slow website - yottaa sit...Anti design patterns - an experts guide to making a slow website - yottaa sit...
Anti design patterns - an experts guide to making a slow website - yottaa sit...
 
Yottaa site speed optimizer presentation at mass innovation nights part of fu...
Yottaa site speed optimizer presentation at mass innovation nights part of fu...Yottaa site speed optimizer presentation at mass innovation nights part of fu...
Yottaa site speed optimizer presentation at mass innovation nights part of fu...
 
Yottaa website-performance-services-overview-hostingcon-2011-
Yottaa website-performance-services-overview-hostingcon-2011-Yottaa website-performance-services-overview-hostingcon-2011-
Yottaa website-performance-services-overview-hostingcon-2011-
 
Mongodb beijingconf yottaa_3.3
Mongodb beijingconf yottaa_3.3Mongodb beijingconf yottaa_3.3
Mongodb beijingconf yottaa_3.3
 

Eight wpo apm best practices for the holiday season

  • 1. Ensuring Success & Avoiding Site Disruptions: Tips for WebOps, WebDev and Marketing Eight WPO/APM Best Practices for the Holiday Season Yottaa, Inc. 101 Summer Street Boston MA 02110 http://www.yottaa.com © 2012 Yottaa, Inc. All Rights Reserved.
  • 2. Contents • Introduction • Tip #1: Monitor performance & set up alerts • Tip #2: Use real browsers to monitor user experience • Tip #3: Monitor key pages • Tip #4: Trend user experience • Tip #5: See what your users see • Tip #6: Establish performance & SLA goals • Tip #7: Capture & diagnose site & app issues • Tip #8: Carry out statistically meaningful sampling • Appendix: Key site performance and user experience metrics 2
  • 3. Introduction • Holiday shopping is expected to rise nearly 17% this season, and sites large and small want the competitive edge to capture as much revenue as possible. • Is your site ready for the holiday rush? How do the best sites monitor and manage their site performance and availability? • In this eBook, we identify the best practices to help you be proactive and prevent site problems during the holiday season. 3
  • 4. 24/7 Monitoring & Alerting • Set up 24/7 monitoring • Set up Email/text/SMS alerts Get started for free here
  • 5. Best Practices • Configure issue definitions • Customize Alert Escalations to different people Critical Error: Recommend Senior Management: network connectivity and page Consider text messaging status code>400 as critical for critical errors not errors (this is the default resolved after a certain setting) duration Error: Recommend Development Team: HTML content check Consider email alerting for as an error critical errors, errors and maybe warnings Warning: Recommend treat page asset issues, user Operations Team: Consider experience issues and text messaging for critical network performance issues errors and errors as warnings
  • 6. Real Browser Monitoring • Only real browser monitoring provides visibility into your users’ experience • With Firefox, IE and Chrome browsers from locations across the planet, you can capture your users’ experience and see exactly what your users see
  • 7. Best Practices • Select monitor agent • Monitoring • Select the Agent: frequency: locations your • Use HTTP agent for APIs HTTP and HTTP services – For availability users are from • Use HTTP agent if you monitoring, try are only interested in 5 min or less • To monitor service availability and – For Operations logged in pages, network performance Team, try 5 min • Use browser agents or less use Yottaa’s if you are interested in front end as well as – For Development “Advanced” tab backend performance and availability, including Team, try 10 min (more later) to 30 min monitoring third party assets/widgets Browser Agent Choice: • Pick the most popular browser for your site • IE9 is still the most popular browser in general, but your site may differ
  • 8. Monitor Pages Key for Your Business Monitor: • App pages • Pages behind a log-in • Customer sites (specific examples on next page) Using cookies and other methods, monitor pages behind log-in, user sessions such as shopping cart, etc.
  • 9. Best Practices: Which Pages to Monitor Web Sites & User Mobile Apps SaaS Registration Web Sites & SaaS Apps: Mobile Apps: • User dashboard page • Home page • Key pages behind • Key landing pages user login (e.g., User registration page) • Pages using different e-Commerce technologies (e.g., User forum, knowledge base) • Dynamically-generated e-Commerce Sites: pages • Product catalog page • Pages from different • Product detail page origin servers • Customer shopping cart page • Customer checkout page
  • 11. Track User Experience Trending Pages behind login can be really slow, and perform inconsistently
  • 12. Best Practices: What Trends to Look For? • Look at the Summary Section for Average Values – If the average values are way out of the range, consider you have problems • Look at the Trending Curves: – Trending curves should be as flat as possible (consistent) – If there are sudden spikes, these spikes are typically problems • Click into them to look at the data samples to see what happened – If the trending curve goes up and down too much, you may have a consistency issue • A consistent experience means confidence and reliability • Trending Curves to look into: – Time to Interact – Time to Start Render – Time to Last Byte (see appendix for definitions)
  • 13. See What Your Users See • Capture user experience as video and screenshot filmstrips • Correlate with user experience & site performance metrics
  • 14. Best Practices • See What Your • Analyze the • Stats to Think Users See Page Load About: – Look at the film strip, Waterfall – How many requests would you be happy are there? Too many as a user? – Are there any requests can mean particularly slow a slow experience – Play the film strip loading assets? as a video to get – How many third party a realistic replay – Are there any HTTP assets? Too many of the actual user status code errors? of them can mean experience – Are their obvious an unreliable user gaps in the waterfall? experience • Which typically means heavy client side JavaScript execution blocking the entire browser HTTP
  • 15. Ensure Performance & SLA Objectives Get started for free here
  • 16. Capture & Diagnose Site & App Issues • Define and monitor the issues that matter to your business • Gain 360 visibility into all factors impacting your site: – Server issues – Page errors – Network problems – 3rd-party asset issues
  • 17. Capture & Diagnose Site & App Issues
  • 18. Best Practices: Dealing with Issues • Configure issue definitions • If you are only interested in monitoring certain domains, Critical Error: Recommend network connectivity and page you can do so status code>400 as critical (simply configure it) errors (this is the default setting) • Check the Issue Listing Page to Error: Recommend HTML content check see how many as an error events each Warning: Recommend treat issue has page asset issues, user generated experience issues and – The more events, the higher network performance issues as warnings priority to tackle the issue
  • 19. Statistically Meaningful Testing • Eliminate random noise • Schedule tests across geographies, browsers, last mile connectivities Get started for free here
  • 20. Best Practices • Monitoring & Testing • Operations Team: – Use WebsiteTest.com Site Monitor: to diagnose Is good for continuous monitoring and issue issues alerting WebSite Test: Is great for on-demand testing • Development Team: and diagnosis – Use WebsiteTest.com • Statistically to analyze & improve site Meaningful Testing: Collect enough number of samples to improve signal to noise ratio
  • 21. Improve Web & Mobile Experience • Explore every asset’s impact on performance • Identify bottlenecks using waterfall chart (In this example – the Facebook widget is slowing down the page load!)
  • 22. Best Practices • Analyze • Check Data • Analyze Individual Trending First Samples Related Data Samples – Use “Edit Filter” to “Odd” Trending – Does the page loading to compare key filmstrip look ok? – To determine the root metrics such as Time – What does the page cause for “odd” to Last Byte, Time to load waterfall show? Start Render and – Any error or warning? Any particular slow Time to Interact assets, HTTP errors? – Identify “Odd” data points from trending lines – Identify if any issue is a consistent issue or only temporary
  • 23. Appendix: A Primer on User Experience & Site Performance Metrics 23
  • 24. Characterizing User Experience Get started for free here
  • 25. Time to Title • Time at which the browser is able to display the title of the site in the title bar. • The first visual indicator to the user that the loading process is working. • Typically, ~1 sec. Get started for free here
  • 26. Time to Start Render • (Also know as “Time to First Paint”) • The time at which browser draws the first visual element of a web page. • Up to that point, a blank screen  high risk of abandonment if takes too long. • Typically, ~2 sec. Get started for free here
  • 27. Time to Display • time at which browser has finished parsing the HTML web page, constructed the Document Object Model (DOM) and displayed the HTML document. • (However, the assets in the document such as images may not have been loaded yet.) • Typically, ~5 sec. Get started for free here
  • 28. Time to Interact • The length of time it took before a user could interact with the page (type into a field, click on a link, etc.). • Typically, ~6 sec.
  • 29. Yottaa Site Monitor • 24/7 Site Monitoring is always on alert & ready to help • Count on Yottaa to monitor user experience & identify problems • Multivariate testing & web performance troubleshooting with real-browsers • See what your users see from any device, any location, & any browser Get started for free here 29