Performance

8 Monitoring Tips to Keep Your Site Up & Performing Well

Post date 11/21/2012

Author Jeremy Martin

Holiday traffic is expected to rise dramatically (>20%) this season, and sites large and small seek the competitive edge to capture as much revenue as possible. So if you’re like many WebOps, WebDev and Marketing teams, you might be asking yourself questions like these:

Is my site ready for the holiday rush?

My site visitors from NYC on IE9 browsers are complaining about site problems, but everything looks fine to my developers?What can I do?

What are easy ways to keep track of site issues ? user experience problems, third party tags, browser rendering slowness, network latency, server errors?

How do the best websites monitor and manage their site performance and availability?

What are the steps I can take to make my site fast and reliable, without lots of development time and money?

In this blog post, we summarize 8 best practices to help you be proactive and prevent site problems during the holiday season. And, these are also captured in our new eBook below (download it here).

</p> <h2>Tip #1: Set up monitoring for key pages</h2> <p><img decoding="async" id="img-1353526723699" src="/wp-content/uploads/2015/12/optimize-1.jpgt1448449396727" border="0" alt="describe the image" class="alignRight" style="float: right;" />Set up monitoring for the pages that matter to your business. For example:</p> <h3>Web Site & Mobile Apps:</h3> <blockquote> <ul> <li>Home page</li> <li>Key landing pages (e.g., User registration page)</li> <li>Pages using different technologies (e.g., User forum, knowledge base)</li> <li>Dynamically-generated pages</li> <li>Pages from differentorigin servers</li> </ul> </blockquote> <h3>eCommerce Sites:</h3> <blockquote> <ul> <li>Product catalog page(s)</li> <li>Product detail page(s)</li> <li>Customer shopping cart page</li> <li>Customer checkout page</li> </ul> </blockquote> <h3>SaaS Apps:</h3> <blockquote> <ul> <li>User dashboard page</li> <li>Key pages behind user login</li> </ul> </blockquote> <h2 style="margin-bottom: 5px;">Tip #2: Monitor performance & set up alerts</h2> <p><img decoding="async" loading="lazy" id="img-1353526391144" src="/wp-content/uploads/2015/12/alert-451-1.jpgt1448449396727ampwidth200ampheight100" border="0" alt="alert 451" width="200" height="100" class="alignRight" style="float: right;" />For the key pages outlined above, set up 24/7 monitoring and configure Email/text/SMS alerts. Here’s some common issues to watch for, and which teams may care about what:</p> <h3>Configuring issue definitions:</h3> <blockquote> <ul> <li><strong>Critical Error</strong>: Recommend network connectivity and page status code>400 as critical errors (this is the default setting)</li> <li><strong>Error</strong>: We recommend treating HTML content check as an error</li> <li><strong>Warning</strong>: We recommend treating page asset issues, user experience issues and network performance issues as warnings</li> </ul> </blockquote> <h3>Customizing Alert Escalations to different teams:</h3> <blockquote> <ul> <li><strong>Senior Management</strong>: Consider text messaging for critical errors not resolved after a certain duration</li> <li><strong>Development Team</strong>: Consider email alerting for critical errors, errors and maybe warnings</li> <li><strong>Operations Team</strong>: Consider text messaging for critical errors and errors</li> </ul> </blockquote> <h2>Tip #3: Use real browsers to monitor user experience</h2> <p><img decoding="async" loading="lazy" id="img-1353526473123" src="/wp-content/uploads/2015/12/map-451-1.jpgt1448449396727ampwidth200ampheight82" border="0" alt="map 451" width="200" height="82" class="alignRight" style="height: 82px; width: 200px; float: right;" />Only real browser monitoring provides visibilityinto 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. (Product plug: Yottaa’s <a href="/site-monitor-signup/" title="Site Monitoring" target="_self" rel="noopener noreferrer">Site Monitoring</a> service does this!)</p> <h3>Selecting your monitor agent:</h3> <blockquote> <ul> <li style="padding-left: 30px;">Use HTTP agent for APIs and HTTP services</li> <li style="padding-left: 30px;">Use HTTP agent if you are only interested in service availability and network performance</li> <li style="padding-left: 30px;">Use browser agentsif you are interestedin front end as well as backend performance and availability, including monitoring third party assets/widgets</li> <li style="padding-left: 30px;">Pick the most popular browser for your site</li> <li style="padding-left: 30px;">IE9 is still the most popular browser in general, but your site may differ</li> </ul> </blockquote> <h3>Monitoring frequency:</h3> <blockquote> <ul> <li style="padding-left: 30px;">For availability monitoring, try5 min or less</li> <li style="padding-left: 30px;">For Operations Team, try 5 minor less</li> <li style="padding-left: 30px;">For Development Team, try 10 min to 30 min</li> </ul> </blockquote> <p><span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span></p> <h2>Tip #4: Trend user experience</h2> <p><img decoding="async" src="/wp-content/uploads/2015/12/chart_with_problem-1.pngt1448449396727" border="0" alt="chart with problem" class="alignRight" style="float: right;" />Some suggestions for what to measure, and what to look for.</p> <h3>Key Metrics:</h3> <p>Though there are <a href="/blog/bid/232993/Metrics-A-snapshot-of-performance-and-content-metrics-across-the-web" title="literally a couple dozen metrics" target="_blank" rel="noopener noreferrer">literally a couple dozen metrics</a> that provide a great deal of insights into user experience and site performance, three key ones are:</p> <blockquote> <ul> <li>Time to Interact</li> <li>Time to Start Render</li> <li>Time to Last Byte</li> </ul> </blockquote> <h3>Recommended Approach:</h3> <blockquote> <ol> <li><img decoding="async" loading="lazy" id="img-1353528289213" src="/wp-content/uploads/2015/12/front_end-1.pngt1448449396727ampwidth350ampheight132" border="0" alt="describe the image" width="350" height="132" class="alignRight" style="float: right;" />Look at the <strong>Summary</strong> for <strong>Average Values</strong></li> <li>If the average values are way out of the range, you may have problems – in which case…look at the trend data</li> <li>Trending curves should be as flat as possible (consistent)</li> <li>If there are sudden spikes, these spikes are typically problems</li> <li>Explore them – look at the data samples to see what happened</li> <li>A consistent, reliable user experience delivers confidence</li> <li>If the trending curve fluctuates, you may have a problem</li> </ol> </blockquote> <h2>Tip #5: See what your users see</h2> <p><img decoding="async" loading="lazy" id="img-1353527354927" src="/wp-content/uploads/2015/12/amazon-screen1-1.pngt1448449396727ampwidth199ampheight93" border="0" alt="amazon screen1" width="199" height="93" class="alignRight" style="float: right;" />In addition to measuring the various user experience metrics, it’s invaluable to actually SEE what the users see, using screenshots and videos of actual browser sessions. (Product plug: Yottaa’s Site Monitoring service does this!)</p> <p><span style="text-decoration: underline;">This is key for two reasons:</span></p> <blockquote> <ol> <li>Viewing the video and screenshot filmstrips gives you a more accurate sense of the actual user experience;</li> <li>This technique allows you to correlate the visual capture with the user experience & site performance metrics</li> </ol> </blockquote> <p>So check out the film strip, and consider: <strong>would you be happy as a site visitor?</strong> And, play the film stripas a video to geta realistic replay of the actual user experience.</p> <p><img decoding="async" id="img-1353527499124" src="/wp-content/uploads/2015/12/victoria_screenshots.pngt1448449396727" border="0" alt="victoria screenshots" /><br /> To get insights into where in the page loading sequence there may lurk problems, it can be particularly helpful to review the waterfall chart (more on that <a href="/blog/bid/215397/2012/05/new-feature-expanded-website-waterfall-chart" title="here" target="_blank" rel="noopener noreferrer">here</a> and <a href="../..//product-news/New-Feature-Expanded-Website-Waterfall-Chart-Part-II.html" title="here" target="_self" rel="noopener noreferrer">here</a>).</p> <p><img decoding="async" id="img-1353527674370" src="/wp-content/uploads/2015/12/01-waterfall-1.pngt1448449396727" border="0" alt="describe the image" /></p> <h3>Analyzing the Page Load Waterfall:</h3> <blockquote> <ul> <li>Are there any particularly slow loading assets?</li> <li>Are there any HTTP status code errors?</li> <li>Are their obvious gaps in the waterfall? (Which typically means that there’s heavy client side JavaScript execution blocking the entire browser)</li> <li>Stats to Think About: How many requests are there? (Too many requests can mean a slow experience) How many third party assets? (Too many of them can mean an unreliable user experience)</li> </ul> </blockquote> <h2>Tip #6: Establish performance & SLA goals</h2> <p><img decoding="async" id="img-1353528794550" src="https://cdn2.hubspot.net/hub/156417/images/uptime.png?t=1448449396727" border="0" alt="uptime" class="alignRight" style="float: right;" />It’s been said that, “You can’t manage what you can’t measure.” So one best practices is to explicitly define your performance goals, and/or establish the service level agreement (SLA) with your (internal or external) stakeholders.</p> <p><img decoding="async" id="img-1353528928874" src="/wp-content/uploads/2015/12/yottaa_dashboard-1.pngt1448449396727" border="0" alt="describe the image" /></p> <h2>Tip #7: Capture & diagnose site & app issues</h2> <p>As part of your performance management strategy, you’ll want to define and monitor the issues that matter to your business – with a scope that’ll give you 360� visibility into all factors impacting your site’s or app’s performance:</p> <blockquote> <ul> <li>Server issues</li> <li>Page errors</li> <li>Network problems</li> <li>3rd-party asset issues</li> </ul> </blockquote> <p><img decoding="async" id="img-1353529325342" src="/wp-content/uploads/2015/12/issue_definitions-1.pngt1448449396727" border="0" alt="issue definitions" /></p> <h3>Some tips on dealing with issues:</h3> <p>First, you’ll want to configure issue definitions. For example, here’s one common approach:</p> <ul> <li><strong>Critical Error</strong>: Recommend network connectivity and page status code>400 as critical errors (this is the default setting)</li> <li><strong>Error</strong>: Recommend HTML content checkas an error</li> <li><strong>Warning</strong>: Recommend treat page asset issues, user experience issues and network performance issues as warnings</li> </ul> <p>Periodically, check the Issues summary to see how many events each issue has generated. The more events, the higher priority to tackle the issue.</p> <h2>Tip #8: Carry out statistically meaningful sampling</h2> <p>If you want confidence in your decisions, you’ll need confidence in the measurements that drive those decisions. Statistically meaningful testing lets you eliminate random noise. And in addition to collecting a large enough sample size, another important dimensino is to schedule tests across the full range of geographies, browsers, and last mile connectivities that matter.</p> <p><img decoding="async" id="img-1353529916074" src="/wp-content/uploads/2015/12/samples-1.pngt1448449396727" border="0" alt="samples" /></p> <p><em>So – get started today, for free!</em></p> <p> </p> <p> </p> <p> </p> <p>

8 Monitoring Tips to Keep Your Site Up & Performing Well

Latest Posts