Web Performance Watch

Guidelines for 3-screen Performance Management

Recently, the web performance team at Walmart joined us for a webcast on site performance in a 3-screen world. The emergence of both smartphones and now tablets as primary vehicles for driving online interaction including e-commerce is well documented. What’s still not as well understood are the implications to site design that impact performance across the desktop, smartphone and tablet environments.

While I encourage you to watch the webcast, here are a few launch-pad performance benchmarks and tips to think about for your Web and mobile sites:

1. 3-screen is more than 3-screen
   On the desktop, multiple browsers add some complexity to understanding performance. But the multiple permutations of OS/hardware/versions representing today’s smartphone and tablet environments exacerbate the complexity of the user experience online.
2. You can’t take it with you
   Performance management concepts for one screen do not translate to the others. A study by Yankee Group found that Apple’s website ran nearly 200% faster on desktop than Amazon’s site, but ran 3% slower on tablet.
3. Starting-point benchmarks
   
   
   
4. Minimize, and gracefully enhance
   Develop with the 3G connection in mind first, and add to the experience from there. For smartphone and tablets, consider the following practices:
   

   >> Limit element count to 10 or fewer new HTTP requests/page

   >> Avoid redirects

   >> Reduce the number of DNS lookups/page

   >> Always use HTTP Keep Alive

   >> Audit image content for appropriate resolution, quality settings and compression

5. One size does not fit all!
   Commit to accurately and consistently measure performance and optimize based on where you have issues/latency and within your technical constraints. Your unique situation will impact how you approach improvement, e.g.: front end versus back end, CDN versus network, 3^rd party versus CMS, etc. The benchmarks above are only as good as what is normal for you, your industry and your competitors. Find other benchmarks, and network with your peers.

KITE 5: Introducing New User Experience Metrics

KITE has always provided a rich set of information about the network performance of web sites and applications. Now KITE 5 gives you further insight into web performance by reporting a class of User Experience metrics based on the W3C Navigation Timing specification. These new metrics reflect the user experience of your web site or application by reporting what is happening in Internet Explorer 9 during script playback.

When you play back Transaction Perspective (TxP) scripts in IE9, KITE automatically captures key browser events that allow you to answer questions about users’ experience of your web site or application, such as:

• When does a user actually see something other than a blank browser window?
• When can a user click, swipe or scroll on a page?
• How fast is the page for real users?

You can find these metrics reported as “Browser Events” in the Transaction Performance Details tab:

Time to Full Screen

Time to Full Screen is a special user experience metric that indicates when a page has loaded to a specified point. For example, this could be the time it takes to display a “full screen” of the page until the user has to scroll to see more content, sometimes known as “above the fold”. KITE let's you define this by identifying a specific page element, and measuring the elapsed time up to when that object starts downloading.

The Time to Full Screen is reported in milliseconds as a page level component on the Transaction Performance Summary when the script is run.

Read the full release notes for more detail on these, and all of KITE 5's new features.

 

Deconstructing the Target.com “Fail Doggie”: A Keynote Perspective

Have you met the Target.com “fail doggie?”

He’s cute, but if you are a Target customer, you don’t really want to encounter him in a browser.  I met the “fail doggie” while using the MyKeynote portal to research the nature and extent of the major outage that occurred on Tuesday, September 13^th 2011.  That was the day that Target began allowing online purchases of “Missoni by Target” items.

A lot at stake

According to one source, the Target site re-build from scratch, launched just weeks before this incident, drew on the talents of over 20 vendors, including many of the biggest names in the e-commerce technology space.

Imagine spending millions of dollars and two years of time to “create a more user-friendly, reliable experience” and then have this happen.  Not fun.  When a major event like this outage happens, it can be difficult to get complete details from any one participant.

Passions are high when a crisis like this occurs.  Where can you go to get an objective vantage point from which to make accurate assessments and analysis?  At Keynote Systems, we’ve long been looked to as a neutral third-party with accurate and actionable Internet and mobile performance data, and that day proved to be no exception.

In this blog post, I’ll explain how I used the tools that every Keynote customer has in MyKeynote along with measurements being run for two of our public web performance indices to determine what users were seeing that day and the following morning and to determine just how extensive the outage was.

Target.com appears in a number of our public index measurements, so I had several to pick from – note that we never publish insights based on a customers’ private data, but only based on publicly available data that we collected without payment by any company. Two were particularly useful for figuring out what was going on and capturing screenshots as the day went on. The first measurement visited their home page only, while the second arrived at the home page and then performed a multiple step transaction, just as a customer would when shopping, placing items in a cart and checking out. 

First a brief bit of background: both scripts were written in the Keynote Internet Testing Environment, known as KITE and both measurements were being run with our real browser product, Keynote Transaction Perspective. I point that out so you’ll know that none of what you will see here was retrieved by a “bot” or other emulation system; we were getting the experience of a user launching an actual Internet Explorer browser to go visit Target.com.

How things went down that day

As word of the outage quickly spread, we started taking calls from various news media companies asking if we had data.  We took a look at the home page monitoring scatter plot below and saw what looked like a brief spike in response times followed by a restoration of reasonable response times shortly thereafter. 

(click image to view full size)

At first glance, it was tempting to say that the outage had been brief and thus was relatively uneventful.  But a deeper look at the chart revealed telltale signs that something was not right.  Notice the distribution of the dots before and after the spike?  See how they are randomly distributed somewhere between two and six seconds before the spike (time on the network is on the left scale) but then they are all tightly packed down below the one-second mark afterword?

Each of those dots represents a full visit with a real browser, so I could click down on any of them to see a listing of what was on each of those pages and how long it took to get to the browser.  I did that eventually, but much like an operations team technician would be at such a moment, I was in triage mode at this point.  The first thing I wanted to do was to look for clues as to why those dots were organized as they were.

First, I hovered my mouse over a datapoint from before the spike in performance.   This would be my “normal” baseline to compare to.  Notice that the page contained 147 elements (separate downloaded objects) and a total size of about 2 MB.  The time on the network to download the page and all elements was 5.156 seconds. 

Next, I took a look at the two red triangles, which represent pages where we know there was an error of some sort or another:

In this case, the element count and page size were lower than the baseline but the time to download was skyrocketing to a number eight times higher. The lower object count and page size were due to timeouts being hit… we couldn’t get all of the objects into the browser before time was up, so the agent running the browser quit trying and reported the error.

What was really interesting was the object count from the very next green dot after the red triangles.

That data point showed only one page element and a very small download size of 640 bytes. 

One element?  I knew that if we had downloaded only one element, that it must be the base page of html, but a page with only 640 bytes couldn’t possibly have much to say.  That was my first clue that visitors were probably getting raw error messages.

I quickly scanned over the remaining “spiky” datapoints after the incident began and found more of the same: just one page element and a size of 639 or 640 bytes.   Here’s the last point caught during that initial spike:

So that was all fairly consistent with a site failure; something went very wrong around 8:00am EDT and the server took a long time to send out a very small page that was probably just an error message. 

What about all of those green dots hugging the bottom line after the spike had subsided?   I hovered over a few and got the same thing each time: 5 page elements and a page size of 31550 bytes. 

This wasn’t some random subset of the real page and no error was being recorded, so clearly these speedy responses were something altogether different. 

Now it was finally time to start drilling in for some details.  I clicked one of those data points and made my way to the page detail waterfall graph:

 

(click image to view full size)

Welcome to our waiting room

I hovered over each of the bars and noticed that each object came from a folder called “spawaitingroom.” The image files consisted of a red stripe, a Target logo and a photo of the Target dog posing next to a tool box.  I had met the “fail doggie” for the first time:

 

(click image to view full size)

So let’s recap what I had learned so far:

1. Initial data points have no page objects… just the base page, and that base page was TINY (640 bytes) in comparison to the pages that preceded it, but the amount of time the server took to return that page was HUGE.
2. The datapoints following the big spike downloaded much faster and had larger base pages but only had five page elements instead of the 140+ found in the normal pages.
3. Drilling in on the five-element page datapoints, I found that all five of the objects came from a folder called “spawaitingroom” – the “fail doggie” was part of a “waiting room” feature that was being served in lieu of the real home page. 

Getting the whole picture: what were people actually seeing?

I was making good progress, but I still had a lot of questions to answer.  I could guess that a Target dog next to a toolbox was probably some variation of an “under construction” page, but I didn’t have the text of the page yet.  I really wanted to know what those pages looked like but all I had were some pieces to the puzzle.

The thing that was complicating my sleuthing was that neither the original 640-byte server error pages nor the fail doggie pages were being sent as an “error” (http status of 4xx or 5xx) – they were being sent as successful pages (http status 200).  That prevented me from getting as much diagnostic information as I otherwise might have.  I could poke around at each scatterplot and piece together what I was seeing, but without an error, I wasn’t going to have the html from the page or any screenshots, both of which MyKeynote stores on a fatal error. Fortunately, all was not lost.  There's a benefit in more than 400,000,000 objects per day stored away inside MyKeynote.

Web Content Trending to the rescue

Here’s where the other measurement that was scripted to go five steps deep into the target.com site came in very handy.  The second monitoring script was set up to do the following:

1. Go to the target.com home page.
2. Perform a search for “lil wayne”
3. Filter the search results to the “music” category.
4. Click on the first album in the resulting list to view the details.
5. Click the “add to cart.” button on the details page and then confirm that “1 item added to cart.” appears on the screen.

Without the real site being served up, there was no way the script could complete the search for an album.  When the Keynote agent piloting the Internet Explorer browser went to find the search box and type “lil wayne” into it, there was no search box. The resulting error provided a steady stream of screenshots of the home page throughout the day.

Let me explain a little more about why I got the screenshots.  With Keynote’s Web Content Trending option turned on, every screen is proactively captured and if an error is detected in subsequent steps, all captured screenshots are saved to the MyKeynote portal to support troubleshooting by our customers.  If there is no error, the proactive screenshots are discarded before ever being sent to the database.  Every time the second step failed, (which was on EVERY visit at this point), the screenshot of the home page taken on arrival was stored.

To get those screenshots, I simply had to drill into the scatterplot chart and I saw this:

(click image to view full size)

I clicked on that “E” which is the error recorded for the second step and saw the page details screen below. I have added callouts so you can see where the links to the screenshot and html are:

(click image to view full size)

Things were about to get a lot clearer in a hurry. 

The wrong kind of "direct communication"

I clicked on the thumbnail of the screen snapshot and sighed as I saw what visitors had seen in the moments when the site became unusable around 7:58-8:00am:

We captured the above screenshot at 8:01am.  It shows what the 640 and 639 byte html pages with no images looked like in the browser.  This is a raw server error that was passed through all the way to users’ browsers (something developers and operations teams work very hard to avoid).

In the minutes that followed, the target.com team took rapid action to replace the cryptic server error with something more friendly.

By 8:14 am, we had captured the first of those friendlier images; the “fail doggie” page made its debut. About 17 minutes later we captured a new version of the page.  We saw additional changes again at 11:30 and 12:38.  It should be noted that these are times when we visited with the transaction-based measurement and that particular measurement was only set to visit ten times per hour.  The point is that these times are when we observed the pages and made captures, not necessarily the exact times that they changed.

Here, then, is the full gallery of “fail doggie” pages we recorded:

8:14 am EDT – “Oh no”

This page requested the user to “please try again” and provided a single link to “Target help”

(click image to view full size)

8:31am EDT – “Hello”

This page let folks know the team was “hard at work making the site better” and dropped the “please try again” in favor of “Sorry for the inconvenience – we’ll be back up and running shortly.  It also featured links to three services that were still online: redcard, weekly ad, and find a store.

(click image to view full size)

11:30 – “Woof” #1

Around 11:30 the message changed to “We are suddenly extremely popular.”  Visitors were also asked to “Please stay here and we’ll try to get you in as soon as we can!”  Finally, this version also explained what the three links that began appearing in the previous version were, saying “We are up and running here” just above the links.

(click image to view full size)

12:38pm EDT – “Woof” #2

This version added a plea to not keep hitting refresh, something that can make bringing a site back up very difficult when a large group is all doing it at the same time: “Please know that there is no need to refresh your browser.  Your request will automatically retry in 30 seconds.”  This was the most well organized page, broken into four separate paragraphs, and adding back in an apology with the sentence, “Thank you and our apologies for the inconvenience.”

(click image to view full size)

Sizing up the impact: just how bad was it, and for how long?

I was starting to put it all together.  Now I knew what the raw server error looked like and I had a play-by-play set of screen captures showing how the “waiting room” page evolved over time that morning. 

What I still wanted to know was just how “unavailable” the site had been.  Were any users getting through to the real home page at any point?  The fail doggie page said it would auto-refresh in 30 seconds and implied that perhaps one might eventually get through.  Was the real home page ever turning up, and if so how often? 

I waited until the next morning to size up the duration and intensity of the outage.  My goal was to confidently establish an “end point” for the incident and then do the numbers.

How can you measure “availability” when the site is displaying “OK” pages, but not the right ones?

The home page only measurement had the highest frequency (about 40 per hour) so I wanted to use that to calculate availability.  There are many different reports and graphs in the MyKeynote portal, and most of them will tell you at a glance what your “availability” is – that is, what percentage of the measurements succeeded versus failed in some way.  The catch here was that server error and “fail doggie” pages were sent to the browser as “OK” (http status 200) pages, not errors. 

Scripts can be easily enhanced with validations that look either for required text that should be there or error text that should not be there.  Either validation option would have marked the server message or fail doggie pages as errors and impacted the built-in availability calculation, but the index measurement I was using didn’t have that validation in place.  In practice, validation is usually used at the end of a multi-page script to be sure the right final page had been reached.  Fortunately the information we needed to answer the questions was readily available anyway (more on that below). We just had to step back and consider the available tools to size it up.

The tool I chose to use was MyKeynote’s Object Trending report.  This report is available for any measurement that has been configured with our Web Content Trending (WCT) option.  WCT stores performance information for every object in the page, not just a roll-up for the page as a whole. Once again, storing all those details day and night was about to become very handy.

The Object Trending report has several options, all of which provide ways to view the performance of page elements over time.  To display it, I chose the Target measurement, selected Object Trending and set the date range to the 24 hour period after the incident had begun:

(click image to view full size)

Here’s what that report looks like by default, which is a separate line for each domain that objects originated from:

(click image to view full size)

The above default view is great for determining if one or more domains are particularly slow or unavailable, but I needed even more detail than that, so I dropped down the menu at the bottom of the graph and changed it to “Object data by object without parameters:”

This option would give me each separate element in the page, ignoring any query-string data that might be appended to the object name.  Think of the home page as a stage with a cast of characters.  The object trending report was about to show me who had appeared in what number of performances. 

I clicked “Generate Graph Now” and scrolled down to the table below the graph. Now I had a listing of the frequency of every object that had appeared on the home page from 8:00am EDT onward:

(click image to view full size)

What I was particularly interested in was the object name on the left and the “Included datapoints” on the right.   Every visit always had retrieved at least the base page (www.target.com). By comparing the count of base pages observed to the count of all the other objects, I could make some meaningful conclusions about how often the “fail doggie” had been turning up. 

I needed to do a little math, so I pulled the results into an Excel spreadsheet with a simple copy and paste, sorted by the datapoints column and added a new column to compare the count of each element to the count of the base page.  I did this a number of times, varying the time period a bit to narrow in on useful takeaways.

For starters, I re-ran the report to look just at the objects observed in the first hour between 8:00am EDT and 9:00am EDT.  The cast of characters is quite small; we either got just the base page of html, or the base page plus the elements of the fail doggie page.  Remember, these aren’t observations of all user traffic, they are the results observed by the visits of our real browser agents. While we were just a drop in the bucket of actual visitors, we did make it through to the site 31 times in that first hour.  Here’s what we saw: The “fail doggie” appeared just 55% of the time and we got nothing but the base page in the remaining 45% of visits.  The hundreds of thousands (or millions) of users attempting to visit during that same period likely saw a similar mix.

(click image to view full size)

So I could see that things had been pretty “messy” during the initial confusion of the incident.  An hour of outage is worth a lot of money to a site like target.com, and cryptic errors couldn’t have been good for inspiring confidence, but an hour is just an hour and perhaps many people hadn’t even tried to visit the site yet. 

The next question I wanted to answer was, “What percentage of Target.com’s traffic was able to make it to the home page throughout the rest of the day?”

Here’s a view of my spreadsheet based on running the Object Trending report for the period starting one hour after the incident (9:00am EDT) and ending at midnight that evening:

(click image to view full size)

So taking the big view of that entire day up to midnight EDT (which is 9pm Pacific time), I determined that 93% got the fail doggie and no more than 7% got through to the real home page.

Not pretty no matter how you slice it

I re-ran the report with various time windows, and the results varied only slightly.  Most surprisingly, even pushing the end time all the way to 9am the following day, the stats still showed that 85% of all visits got the fail doggie page elements.  Focusing on Midnight 9/14/11 to 9:00am 9/14/11 the number was still high at 75%.  Was this all cleared up by the start of business on 9/14/11?  Looking at just the hour between 8:00am and 9:00am that second day 9/14/11, the number was still an amazing 50%.

By this time my boss was wondering why I was spending so much time with all those spreadsheets and charts, so I stopped my investigation there and moved on to share updated results with all the folks that had been asking for data.  I annotated a screenshot of a scatterplot graph and wrote a narrative to go with it, sharing the details with several media outlets and even conducting a radio interview with Wall Street Journal Radio.  Here are a couple of links to places the results showed up, along with a copy of that annotated scatter-plot graph.

Investor’s Business Daily: Target Website Crash Offers Lessons

Retail Online Integration: What You Can Learn From Target's Site Crash

(click image to view full size)

Epilog:

The one question I left unanswered was just how many truly useful pages there had been in the 7% that were not “fail doggie” pages.  I’m curious how many would have actually allowed a customer to purchase.  Given the size of Target.com’s typical traffic this time of year (reported as 29.5 million for the month of the prior October by Investor’s Business Daily), I was pretty content to stop with the work I had done over those two days, observing with a long sigh that the folks at Target, who are no amateurs at online retail, had missed out on a LOT of potential transactions by turning away something north of 93% of all visitor attempts that first day.

Filtering Out Web Performance Monitoring Traffic From Google Analytics

If you're a webmaster, site owner, or e-commerce business manager, picture this scenario. You open your Google Analytics dashboard and you see a big spike in traffic. At first, you're really excited - wow, look at all those site visitors! You run off to tell your boss that she can give you that bonus she promised if you got that online marketing campaign to work. And then... you learn that someone in the Site Ops team added web performance monitors, and so it's all so-called robots - synthetic traffic generated for the purpose of keeping tabs on your site's response time and availability. 



You think, no problem, I could filter that out from Google Analytics, and then you learn you can't. It's always going to be there, like, forever. You go crazy, emailing the GA team, posting on forums, and then slowly resign yourself to forever dealing with that spike. It will disappear from your default view, maybe after a month, but that's a long month to wait. And heaven forbid if your execs ask you for a site traffic report for the past year, try explaining why you can't filter out that spike - what, you weren't thinking ahead? What kind of guy did we hire to run our online business, anyway?

Don't let this happen to your career. Plan ahead and learn how to use Google Analytics to filter out all web performance monitors from your site analytics reports. Here's the recipe:

STEP 1: Find Out the User Agent String for your Web Performance Monitors

Keynote's monitors, like all other web performance monitors, insert a special marker in the browser, called an user agent string. An Advanced Segment in Google Analytics allows you to filter out all traffic that contains this marker. So all you have to know are the user agent strings that Keynote adds to the browser. Keynote has several performance monitors - using real IE and Firefox browsers, or mobile browsers. Each performance monitor comes with its own special marker, so you have to construct a regular expression to filter all of these out.

Here are the browser markers that you have to use to filter out web performance monitors:

Keynote - Use "KHTE" (for Application Perspective monitors), "KTXN" (for the real browser Transaction Perspective monitors). Other companies whose user agent strings I know of are: "AlertSite" (AlertSite), "GomezAgent" (Gomez), "Pingdom.com_bot_version_1.4_(http://www.pingdom.com/)" (Pingdom), "YottaMonitor" (Yottaa). 

If you are using a web performance monitor not listed above, Google "<insert your monitoring vendor> user agent string" and you will definitely find the user agent string you need to know.

Next, we will create an Advanced Segment in Google Analytics to filter out this synthetic traffic.

STEP 2: Create An Advanced Segment to Filter Out the Web Performance Monitors

Make sure you are using the new Google Analytics version, by clicking on the "New Version" link at the top of your GA page. You should now see the word "beta" right below "Google Analytics". Ensuring that you are in the MySite tab, click on Advanced Segments.

In the bottom right area of the Advanced Segments dialog box, click on this button:    and name it "Real People". We will now create a segment that filters out the synthetic traffic from web performance monitors. Here's the Advanced Segments dialog box:

Now, here's the tricky part - writing the regular expression that the Advanced Segment requires. Here is the regexp that filters out both the Keynote and Gomez monitors. Be careful to use the string exactly as shown, with the periods and asterisks: .*(KHTE|KTXN|GomezAgent).*

It's critical that you use a regular expression correctly, and getting it wrong is why I suspect many people believe that Google Analytics can't filter out this traffic. Once an advanced segment is created, then all traffic AFTER today will be filtered in the reports, but this will not apply to traffic that was generated prior to your creating this advanced segment. That's what I believe, from trial and error, though Google Analytics help says that you can filter out historical traffic. In any case, it's important you setup these monitors anyway, because you have no control over someone else setting up web performance monitors - even if your company didn't create performance monitors, your competitors could be monitoring your site's performance and creating all this traffic to your site - it is the world wide web, after all.

STEP 3: Select the Real People Advanced Segment When Viewing Data

Drop down the Advanced Segments dialog box, and select "All Visits" on the left hand side, and the advanced segment that you created, "Real People" on the right hand side.

Click on Apply, and view your data:

Now, it would be nice if I could choose "Real People" as the default segment to apply to all my reports, but I can't do that in Google Analytics yet. Nevertheless, you now have a handy way to view all the traffic and exclude web performance monitors, including Keynote.

Script and Monitor RESTful APIs in Public and Private Clouds

By Ian Withrow

In the 4.1 release of KITE we believe that we’ve significantly improved the ease and power with which users can create scripts to monitor APIs. Web APIs, aka Web Services, are an important way for companies to integrate 3^rd party data and service providers both in the browser and in the data center. Web API’s that need to be monitored tend to fall into one of three categories.

• First, all the widgets and mash-ups from companies with Facebook, Google, and Twitter are built upon web APIs.  However, even traditional companies like Best Buy, Hoovers, and the New York Times offer APIs.
• Second, most companies talk to one or more 3^rd parties directly from their data centers.  Examples from this category might include payment vendors like Zuora and PayPal and range to specialized service providers like Quova (IP Geolocation) and Netbiscuits (Mobile site delivery).
• Third, many companies are starting to build their applications using a Web Oriented Architecture, which calls for modularizing different components of the application and exposing them via a Web API. 

Regardless of the scenario, the reason for monitoring these APIs is the same. API performance can have a significant impact on user experience especially when it drives critical transactions like checkout or the delivery of customized content. Unlike other monitoring solutions Keynote actually interacts with the underlying API, enabling you to test not only performance but to ensure responses conform to specific parameters, e.g. number of widgets in inventory is a number between 1 and 100. In this way you can reproduce the logic found in the actual application that consumes the API.

In this two part blog series I’ll walk you through exactly how to script and monitor APIs with Keynote both inside and outside of your cloud. This post will cover RESTful APIs. The second post will cover SOAP APIs. This article is long and in depth so below I’ve listed the major sections and the associated topics:

• Step 1: Create a basic web services script
• Step 2: Techniques for iterative development
• Step 3: Advanced script editing
• Selecting a Keynote monitoring product for your script

 

Step 1: Create a basic web services script

For the purposes of this demonstration we need an API, I’ve chosen the Active.com API because it’s a real, working API that has rich features like developer keys and multiple format responses.

To get started you’ll need KITE 4.1 or newer. If you don’t have KITE a copy can be obtained for free here. Launch KITE, and in the top left corner there should be a button that looks like a big red record button. Click the bottom half of this button which opens a drop down menu and then select ‘Create Web Service Script’ as shown below.

You will be asked to select a service type, go ahead and select REST.

Upon doing this you’ll be presented with a wizard, as shown below, that will gather input from you in order to construct an advanced script. First, you enter the base URL for the RESTful API function you wish to access. Next you specify the response format type you will receive, such as JSON, XML, or unstructured text. Then you can proceed to fill in all the URL query parameters that will be passed with the request. The Wizard supports all standard HTTP request such as POST and DELETE. You can also enter any special headers at the bottom; standard headers will be created for you. In this API, the license key is added as a parameter but other APIs may call for a header.

Don’t worry if you don’t have everything perfect just yet. You can manually edit the script later or simply recreate the Web Services action and the Wizard will remember the last inputs you gave it. When you are ready, click ok and you’ll see a new action added for you in the Script Viewer. 

 

The best practice suggests that at this time you should rename the action something logical by clicking on ‘Call method’ and edit the Script Property shown below. My API call retrieves events in the San Diego area.

 

Now we are ready to view our completed script, you can do this by clicking on ‘REST Script’ on the left, note that this too can be renamed. When you do you’ll get a new window, called Advanced Scripting. Please note if you have a lot of windows open in your KITE instance you may need to close or resize some to get the expansive view that I have below. We’ll explore the different elements of this script later but for now the key portion is boxed in red, this is the RESTful query that you’ve just created. You can now double check and edit it manually using JavaScript.

 

Once done, you click the ‘run’ button as normal to test out the script and see what results you get.  If everything works you’ll get a screen like the below shaded in green.

 

For comparison here is what failure looks like, in this case I deliberately mistyped my license key resulting in a 403 error.

Step 2: Iterative Development

In addition to the Wizard we’ve added three great tools for iterative development, which we’ll examine in turn within this section:

1. Advanced script log
2. HTTP request/response header payload viewer
3. Using saved variables in subsequent actions

Advanced Script Log

After you run a script, the Advanced Script Log will be automatically updated and added to your screen as shown below. The log displays the request made as well as any error response details received. If the response was a successful, then the results are store into variables. For example, 0.42716 is saved in the variable [searchTime], more on how to use this later.

 

HTTP Request/Response Header Payload Viewer

Sometimes I find it helps to see the exact request and response payloads. Now there is an easy way to do this. In the Transaction Performance Details window, which is typically right below the Advanced Script Log, right click the step or object that you are interested in and select View HTTP Payload from the context menu.

Back on top you’ll get the below screen which shows you the exact headers and payloads, up to a character limit.

 

Using Variables in Subsequent Steps

The real power of this tool is to create a sequence of API calls that utilize results received in prior steps, just like a real program would. Let’s say that after our query of local events in San Diego we now want to get the event details for one of the results returned. A quick review of the API’s developer documentation shows that this is possible via the ‘assets’ API method which uses the variable assetId in its base URL. Let’s add that step using a saved variable from our first step. First we should copy and save the variable we want to use, the assetId of the first event in the list. We can find our quarry in the Advanced Script Log as shown below; we want everything inside and including the brackets.

 

Next we need to add a new step. This is done, as normal in KITE, by right clicking the script name in the Script Viewer window and selecting a new REST action as shown below.

Now we are back at the Web Services Wizard. We again start by entering the base URL, but this time we need to append an assetId at the end of the base URL. As you can see below, we can paste the bracketed saved variable directly into the wizard. Next we need to set the Results Format, let’s try XML this time. Finally we need to input our developer key and any other relevant parameters.

Now when we check the results of our new script we see that the code generated is retrieving our saved variable. This could also be done manually, as sharp readers will no doubt guess, but this way saves a lot of time and effort.

We can now run this two-step script and check the HTTP Payload of the second object to confirm we got the results we expected, in this case by double checking the assetId.  As we’ll explore in the next section, it is possible to extend the script to add your own custom validation logic on elements like this and throw errors depending on the results.

The script is now done so we can save and upload it to Keynote for deployment to a monitoring agent.

Step 3: Advanced Script Editing

As I alluded to earlier, it’s entirely possible to manually rewrite the script created by the wizard and even modify the template itself. First though let me explain the organization of the built-in script template. Each script, both REST and SOAP, is organized into three logical sections as shown below. The red section is the parser which takes the results and saves them in variables. By default the script will usually only save one version of a variable, i.e. if you have multiple assetID’s it will save only one, the last. This is fine in most cases, however there may be times when you want to enhance this behavior and that can be done here. The blue section is where the actual query is built, this code block will obviously be pretty different between REST and SOAP but the organization is the same. Finally, the purple section is where error handling is done. The built in error handling can catch HTTP as well as API errors; however you may wish to extend this functionality further. As mentioned previously, all of this is done in JavaScript.

Let’s say you find yourself frequently updating the built in script functionality and want to make a global change. This can be done by modifying the files named wsdl.template and rest.template. These files are found in your application data folder under …/Keynote/Record/Config/. So for example in Windows 7 this would be username/AppData/Roaming/Keynote/Recorder/Config/. I encourage you to back up the originals before experimenting with this though.

Selecting a Keynote Monitoring Agent for Your Script

Now that you have created a brand new Web API monitoring script you’ll need to select some agents to run it. You have two choices, our Application Perspective (ApP) and Cloud Application Perspective (CApP) products. ApP is a collection of globally distributed monitoring agents that are ideal for monitoring your own APIs that are accessed by a broad range of consumers and those 3^rd party APIs integrated at the client or browser. However, for APIs and partners that your own applications require direct access too you can deploy your own CApP agent. CApP is your very own Keynote agent software which you can install in your own private cloud or even within an important business partner’s cloud. The short rule of thumb is you want to monitor the API from where it will actually be used.  If it’s consumed by end users around the world go with ApP. If it’s consumed by applications within a private cloud or network then deploy your own CApP agent there.

 

Script and Monitor SOAP APIs inside Your Private Cloud

By Ian Withrow

SOAP APIs, or Web Services, frequently form the backbone of private enterprise to enterprise communication.  Companies use these APIs to integrate value chains, share information, and integrate applications that depend on partners. While RESTful APIs may be taking the technology world by storm, SOAP still has an established place in private enterprise communications. Even as organizations migrate from dedicated physical resources to private and public clouds, SOAP APIs are likely to continue to play a role for now. As a result, web applications often depend on the information delivered by a SOAP API. As such if the API is slow then so too shall the application be. Thus it makes sense for businesses serious about performance to monitor their partner APIs, whether they are SOAP or otherwise.

In this post I will show you how to easily create an advanced SOAP script using the new enhanced functionality available in KITE 4.1, topics covered here include:

• Step 1: Create a basic web services script
• Step 2: Techniques for iterative development
• Step 3: Advanced script editing
• Putting your script to work with a Keynote monitoring agent

Note that I discuss how to script RESTful APIs in another post.

Step 1: Create a basic web services script

Public SOAP APIs are rare these days, most are private and require authorization.  For the purposes of this demonstration I will utilize the free, public Holiday Web Service API which supplies holiday dates for a small selection of countries.

To get started you’ll need KITE 4.1 or newer. If you don’t have KITE a copy can be obtained for free here. Launch KITE, and in the top left corner there should be a button that looks like a big red record button. Click the bottom half of this button which opens a drop down menu and then select ‘Create Web Service Script’ as shown below.

You will be asked to select a service type, go ahead and select SOAP.

After clicking ok a Wizard will pop-up on your screen. This wizard will automatically generate an advanced script for you that will make a properly formatted SOAP request, parse the results into a log, and capture errors. First, load the WSDL file for your API. Next you select the function you want to call; in this case I want a list of supported countries. A sharp eye might to detect what seems to be a duplicate list of functions. In fact there are multiple versions of SOAP and you will see duplicates when the WSDL specifies the same method for multiple versions. For Keynote monitoring purposes they work the same.

When you are ready, click ok and you’ll see a new action added for you in the Script Viewer. 

The best practice suggests that at this time you should rename the action something logical by clicking on [Action] and editing the Script Property shown below. 

Now we are ready to view our completed script, you can do this by clicking on ‘SOAP Script’ on the left, note that this too can be renamed. When you do you’ll get a new window, called Advanced Scripting. Please note if you have a lot of windows open in your KITE instance you may need to close or resize some to get the expansive view that I have below. We’ll explore the different elements of this script later but for now the key portion is shown below from row 36 to 53, this is the SOAP query that you’ve just created.  You can now double check and edit it manually using JavaScript. Note that the RequestXML variable contains just the SOAP envelope body if you are comparing it to a reference example.  If you needed to add login and authentication information this is the section of the code to do so, either be adding an additional KNWeb.AddHeader command or by including it in the RequestXML string.

Once done, you click the ‘run’ button as normal to test out the script and see what results you get.  If everything works you’ll get a screen like the below shaded in green.

For comparison here is what failure looks like, in this case I deliberately messed up the envelope by deleting a tag.

Step 2: Iterative Development

In addition to the Wizard we’ve added three great tools for iterative development, which we’ll examine in turn within this section:

1. Advanced script log
2. HTTP request/response header payload viewer
3. Using saved variables in subsequent actions

Advanced Script Log

After you run a script, the Advanced Script Log will be automatically updated and added to your screen as shown below. The log displays the request made as well as any error response details received. If the response was a successful, then the results are store into variables. For example, country code GBSCT is saved in the variable:

[GetCountriesAvailableResponse.GetCountriesAvailableResult.diffgr:diffgram.NewDataSet.Countries.Code]

I’ll show you more on how to use this in a second.

HTTP Request/Response Header Payload Viewer

Sometimes I find it helps to see the exact request and response payloads. Now there is an easy way to do this. In the Transaction Performance Details window, which is typically right below the Advanced Script Log, right click the step or object that you are interested in and select View HTTP Payload from the context menu.

Back on top you’ll get the below screen which shows you the exact headers and payloads, up to a character limit.

Using Variables in Subsequent Steps

Retrieving the list of supported countries is nice, but next let’s try to get some real information like a list of holiday’s for one of those countries. In this way our script can behave much like a real program on whose behalf we are monitoring performance. We know, from the parsing of the WSDL, that there is a GetHolidaysAvailable function. Let’s add a step using that method together with a saved variable from our first step. This would require the country code shown in the previous section from the Advanced Script Log: GBSCT.

Next we need to add a new step. This is done, as normal in KITE, by right clicking the script name in the Script Viewer window and selecting a new SOAP action as shown below.

We are at the Web Services Wizard again. This time we click on the ‘GetHolidaysAvailable’ function and a second popup is displayed asking us for input parameters. In this screen we will use the saved parameter as the input variable as shown below. Be sure to include the brackets then proceed as before by clicking ok.

Now when we check the results of our new script we see that the code generated is retrieving our saved variable.  This could also be done manually, as sharp readers will no doubt guess, but this way saves a lot of time and effort.

We can now run this two-step script and check the HTTP Payload of the second object to confirm we got the results we expected, in this case by double checking the countryCode.  As we’ll explore in in the next section, it is possible to extend the script to add your own custom validation logic on elements like this and throw errors depending on the results.

The script is now done so we can save and upload it to Keynote for deployment to a monitoring agent.

Step 3: Advanced Script Editing

As I alluded to earlier, it’s entirely possible to manually rewrite the script created by the wizard and even modify the template itself. First though let me explain the organization of the built-in script template. Each script, both REST and SOAP, is organized into three logical sections as shown below. The red section is the parser which takes the results and saves them in variables. By default the script will usually only save one version of a variable, i.e. if you have multiple countryCode’s it will save only one, the last. This is fine in most cases, however there may be times when you want to enhance this behavior and that can be done here. The blue section is where the actual query is built, this code block will obviously be pretty different between REST and SOAP but the organization is the same. Finally, the purple section is where error handling is done. The built in error handling can catch HTTP as well as API errors; however you may wish to extend this functionality further. As mentioned previously, all of this is done in JavaScript.

Let’s say you find yourself frequently updating the built in script functionality and want to make a global change. This can be done by modifying the files named wsdl.template and rest.template. These files are found in your application data folder under …/Keynote/Record/Config/. So for example in Windows 7 this would be username/AppData/Roaming/Keynote/Recorder/Config/. I encourage you to back up the originals before experimenting with this though.

Putting Your Script to Work with a Keynote Monitoring Agent

Now that you have created a brand new SOAP script you’ll need to setup some agents to run it. Since most SOAP APIs involve private application to application communication, Keynote’s Cloud Application Perspective (CApP) product is the ideal tool for the job. CApP is your very own Keynote agent which you can deploy in your own private or public cloud and even within an important business partner’s network. In this way you can monitor the SOAP API from where it is actually queried in order to get an accurate picture of performance.

 

New MyKeynote Version: Hot Fun In The Summertime!

Keynote's crack Engineering and Operations teams released version 10.4 of the MyKeynote portal on Wednesday night.  We've made some great improvements in the user-friendliness of our graphs, bringing all the controls you need to tweak your visualization directly to the forefront.

 
We've also added the option to include only error datapoints in scatter plot graphs, clustered 3D bar graphs, page-level trending in long-term graphs, and much, much more!

Useful Paranoia

 

The recent Sony and RSA hacks likely threw the IT leaders at those companies into a state of panic. Unanticipated events like breaches and outages stress the organization fabric of IT teams, and can result in pain. It’s almost like tearing a muscle. But pain, like many things, is an experience to be viewed in context and can be rationalized beyond the difficulty it imposes.

For example, if you’re an athlete, pain is expected. Athletes train hard, repetitively breaking down muscle in order to build it. The best athletes are training and workout fanatics. They throw themselves intentionally into stressful situations. No pain, no gain!

Some IT organizations do this too. They contract with outside firms to attempt breaches of their systems. They throw their teams into chaos drills where resources and assets become unavailable. The adage “people, process and technology” applies supremely here, with heavy emphasis on “people.” For example, we’ve seen that the best load testing projects on which we’ve worked are those that involve extended teams and intentionally simulate situations for which they were unprepared.

If you’re feeling comfortable today, tomorrow’s the day to throw a wrench in the system. A little paranoia is healthy. How are you stressing your people, process and technology?

IE No Longer #1 - Are You Keeping Pace?

Today the pace of change in how your customers are accessing your Web site is breathtaking.  The massive rate of change in the past 12 months in browser market share is staggering. Most notably, Firefox 3.5 is now used in Europe more than any other single browser version, and usage of Internet Explorer worldwide is dropping faster than Middle East autocracies.

Why is this important? Browsers matter when it comes to web performance. Different browsers display different behaviors, especially with regard to the AJAX and Flash applications used to create rich Internet experiences. These applications are dependent on client side scripting and the initialization of plug-ins which requires understanding how the browser behaves as it interacts with a Web site, not just the performance of the Web site itself. And although application behavior can be tested across browsers within your development and QA environment, performance issues often manifest once these applications are moved into production. Additionally, network latency and third-party content interactions at the “last mile” can contribute to an unacceptable user experience.

Keynote customer LinkedIn recognizes this and monitors its performance across both IE and Firefox using Keynote Transaction Perspective. Keeping a vigilant watch on the performance of their services from the end user’s perspective is a priority so they can quickly identify and resolve issues.

Is it also yours? I’d love to know if and how you are monitoring your rich Internet applications across multiple browsers.

The Website Sausage Factory and Impact on Performance – a TechCrunch Case Study

By Ian Withrow

As we’ve discussed in various blog posts, websites are like a sausage.  Ok maybe not so directly, but like a sausage they are made of ingredients than come from many sources even though they are presented in one tidy package to the user.  Today I’m going to break apart the sausage that is the TechCrunch blog, show how this can be easily done for any website using KITE, and as a special bonus show how a sausage maker can monitor all the pieces of their links using a Keynote technology called Virtual Pages. 

TechCrunch Composition

First a fair warning: just like with sausage making, finding out what is inside your favorite website is not always pretty.  If you feel you are of a squeamish disposition then you have been warned.  Second, note that all details in the post are from the time of writing and the balance of ingredients is likely to change overtime.

TechCrunch is a behemoth of a site, weighing in at just over 4 MB of data, 329 page elements, and a whopping 65 domains.  About half of this comes from them directly or really via Wordpress who is evidently the platform they use to power their blog.  The rest comes from over 20 3^rd parties.  You read that correctly, 65 domains in total and half the content originates from someone else.  After direct content the next biggest category is from social sites; Facebook, Twitter, and tools related to these properties total about 1 MB.  Google is about a 500 KB and the ‘Misc.’ category of various 3^rd party tools that TechCrunch uses to improve user experience is about 200 KB.  Ads and ad related content are about 180 KB.  Below is a snapshot from KITE breaking it out for you.  (Note you need to complete the process in the next section to actually get this view)

Now it’s time for a few fun observations.  The amount of content from Facebook and Twitter is huge!  Each alone is bigger than most websites are in total.  Digging into this is unfortunately off topic for this post but it is definitely something on my radar screen for the future.  Another interesting area is the level of user tracking that goes on.  I could identify at least 6 different 3^rd parties that were tracking TechCrunch visitors, not including Google and Facebook.  TechCrunch knows what you are, if not who.

Finally, while these stats make it seem like TechCrunch is hardly advertising, understand that TechCrunch is a very, very, very long page (vertically) and all the ad content is at the top where the user is most likely to see it.  They aren’t dummies giving away their yummy sausage for free.

Scripting Sites for 3^rd Party Monitoring & Analysis

To make sense of this mess I used Keynote’s KITE product.  There are a lot of other great, free products out there that one can use to view all the content and domains of a page.  However, KITE has the ability to permanently parcel out these domains into what we call Virtual Pages for ongoing monitoring and analysis.  Note this section won’t be a detailed how-to; I’m going to focus on highlighting what is possible with the tool.  After which you should be prepared to experiment or watch this training video depending on your learning style.

After downloading TechCrunch in KITE I organized the content by domain as shown below.

This lets me easily see the composition and breakout of a page in a manual fashion.  If I just want to see the domains I can simply collapse the domain groupings.  There are tons of options that I can add to this view like content size and various time breakouts based on my interest.  Here is a complete list:

With just this you can see that I can casually learn a lot about the page.  However, if I’m serious about how TechCrunch and its 3^rd parties perform then I need ongoing data points.  If I’m going to gather a lot of data then I don’t want to do this parsing and analysis manually, it just won’t scale.  The solution is to organize this content into permanent logical pieces.  For example, in a simple scenario I’d carve out a Virtual Page for my advertising so I could monitor and analyze the performance of that content separately from my content with Keynote.  As you can imagine the more complicated your site becomes, the more important this exercise is.  True you can always pick through a waterfall manually to see who did it in the event of the problem but if you want to have ongoing data about 3^rd party performance or be proactive with alerts then you’ll need something like Virtual Pages.  The nice thing is once you’ve designated content into a Virtual Page you can monitor and analyze it like a regular page.

Let’s discuss how I broke-up and organized TechCrunch.  Please note I’m not holding this up as the standard for the best or only way to use Virtual Pages.  One thing we need to keep in mind is cost.  Each page (virtual or otherwise) adds to the cost of the measurement and so in the real world we probably can’t go hog wild with these.  Given an unlimited budget I’d define a Virtual Page for each 3^rd party, possibly even one for each domain if I was especially crazy for detailed data.  My guess is you live in the real world and even if your site isn’t as complicated as this one you’ll need to create some buckets.  Most likely you’d start with prior experience, defining Virtual Pages where you knew or suspected there was a problem.  Here I simply broke the site into the following logical categories:

• TechCrunch direct content plus AOL
• Google (but not Google owned advertising)
• Facebook
• Twitter (and related tools like Postup)
• Wordpress (even though this is the core of the site, I want to evaluate my vendor here)
• Misc. Tools and Widgets for the users
• Analytics and User Tracking
• Ads and Ad related content

Why no CDN category? We certainly encounter CDN’s here but each is tied to a specific 3^rd party.  Facebook has its own CDN, the ad platforms have CDNs and so forth.  So instead I left the CDN’s with their respective masters.

Here is a brief teaser for how this is done in KITE

Step 1) Pick the URL you want to virtualize and run the page once (we did this already)

Step 2) Right click on the page in question and select ‘Insert Virtual Action’

Step 3) We now have a new Virtual Page at the bottom of your script.  Right click ‘Match Page Elements’ and select ‘Add URL Match’.  Here I’ve used the naming convention “vp:TechCrunch” to distinguish Virtual Pages from real pages.  You can name them anything you want in practice though.  There are other options that you can use to construct Virtual Pages, such as content type, that have interesting possibilities but to address 3^rd party content, URL seems ideal to me.  As you see below I’ve created a list of URL matches that should capture all the differently named TechCrunch domains.

Step 4) In the Script Properties Editor you can create the settings for each URL Match.  Note in my script I used a variety of regular expressions so that I could get away with far fewer rules than the 65 domains and still cover all of the page content.

Note that to do this I never had to write any code or do any advanced scripting.  It was all point, click, and form completion.  Hopefully by now you can see how easy it is to create Virtual Pages in KITE and have an idea of its possibilities.

How can I Benefit from Virtual Pages?

The obvious and immediate answer is you can now isolate and monitor the performance of certain 3^rd parties or subsections of you website.  If Facebook slows down you’ll know immediately and explicitly that this is case regardless of the overall impact on your performance.  Moreover, you can easily track and directly report on the performance of these guys overtime without needing to manually crunch the data and objects yourself.  Another interesting possibility is you could monitor your own additions to your site to see how they fair.  Finally, another angle might be to isolate and monitor all the Javascript that your site utilizes.  There are a countless number of ways that Virtual Pages might be used, and my list probably just scratches the surface.  Have fun with it!