Application Performance Engineering Blog – Shunra Software

What happens when a web development company wants to build a website that is also mobile friendly? Unleashed Technologies is a web design, development and information technology services firm dedicated to bringing “best of breed” marketing technology solutions and IT infrastructure to businesses looking for sustainable growth. Although Unleashed Technologies has created many high-quality websites with impressive design and user-experience, when it came to mobile, additional challenges needed to be overcome. In order to address these challenges and ensure a positive mobile user experience, they kicked off a recent mobile-access website by defining performance targets, to ensure that sufficient time would be devoted to developing and testing mobile performance. With their client, they defined the following performance-based Service Level Objectives (SLOs):

• 100% global availability
• 3 second page load (first view) in the US and the UK (their main customer base)
• Best effort page load time in the Rest of the World

Challenge

The client, an innovative software firm in a highly technical sphere, had specific ideas about design, content and user experience. Their website was based on several systems, technologies, and information that needed to be centrally accessed. This structure included advanced form technologies for tracking, internal software platforms, CRM and content aggregation from external informational sites. Content included podcasts, blog posts, RSS feeds, white papers, case studies, streaming video, and traditional online content. A flexible design was required to accommodate large amounts of information and pages, while providing a targeted impact to the visitor. The long-term goal included a self-sustainable website that the client could maintain independently.

Project scopes and timelines were defined, and development began. As the project progressed, the developers shared iterative builds of the site with the client. Unleashed Technologies had informally spot-checked the site using smartphones their developers owned. However, that approach to testing was not comprehensive or reliable enough for the client:

• The network performance was not controllable. The speed and reliability of the network was dependent on the operator and volume of other subscribers using the network at the same time. This meant that worst, typical and best case comparison testing wasn’t possible. Also, when issues were found, they were very difficult to reproduce.
• Using phones with a live network prohibited developers from using most of their testing tools to identify and fix problems.

As a best practice, Unleashed Technologies had been using ySlow* throughout their development process. But the data was limited – by simply using a phone on the live network, the developers didn’t have access to the packet traces and therefore had no capability to analyze data directly from the mobile connection. It was impossible to know if changes they were making were helping or hurting performance.

To gain additional insight into performance, Unleashed Technologies leveraged Shunra’s Mobile Performance Test on the development site and shortly afterwards were examining concrete results and recommendations. The report compared performance on various types of mobile networks to a baseline WiFi connection. From the results it was obvious that improvements were required and precisely which improvements should be considered first.

Here’s one example of how the application performance improvements were addressed based on the Mobile Application Report. For an initial round of optimizations, the theory was that reducing the amount of data transferred and the number of requests needed would improve the application performance. This was validated using:

• Compression, partially using the Smush.it application to reduce size of other images by 58% (on average)
• CSS sprites: Combined the background images into a single image and used the CSS background-image and background-position properties to display the image segment
• CSS/JavaScript optimizations: The CSS and JavaScript were already being combined into a single file, so they focused on shrinking the size of that file. Then they minified some of the JavaScript using Crockford’s jsmin algorithm and confirmed that all CSS was being properly compressed.
• Delay-loaded the three banner images by using a temporary blank placeholder loaded inline using the data scheme, so that other files could load first.
• Offload theme images to the Content Delivery Network (CDN) to increase the number of parallel downloads.

Additional best practices can be found in Shunra’s blog Mobile performance engineering rules for the iPhone.

Although valuable gains in performance had been obtained using Shunra’s Mobile Performance Test, Unleashed Technologies knew they could deliver additional value and meet their SLOs by working with Shunra to leverage Shunra vCat* for demographic testing of the sessions that a user would experience. vCat’s Timing Transaction demonstrated a typical flow for a user browsing through the mobile site, and vCat’s mobile profiles, such as 3G, 4G, etc. to check performance using the client’s typical locations and metrics. Then vCat Analyt Mobile Performance Testics provided packet capture and detailed analysis.

Shunra’s vCat network virtualization capabilities were utilized between the third and fourth site iterations to provide insight into the critical metrics. Two profiles compared application performance differences when accessed over a “HSDPA 3G Weak” and a “HSDPA 3G Strong” connection. Then Shunra’s Analytics provided detailed breakdown of the statistics. When running with an optimistic mobile network (HSDPA Strong, an enhanced mobile 3G protocol), the home page still averaged about 20 seconds to fully load. Some images appeared after 5-6 seconds, but they weren’t functional for a few more seconds. However, after the recommendations from Shunra’s HTTP Analysis were implemented for the next iteration, the mobile home page load times were dramatically reduced:

The results on the weak connection were even more dramatic, where the home page load time improved from 70 to 20 seconds. This screen shot shows the data from the mobile site’s home page loading over a strong link, indicating how many resources are downloaded simultaneously:

Solution

Shunra’s Mobile Performance Test* reports delivered initial data and suggestions that were quickly implemented. Then Shunra’s vCat emulation and analytics were utilized to provide comprehensive in-depth testing, analysis and customized proposals. Using Shunra’s reports both parties were able to have quick, constructive conversations on performance-related topics that would not have been exposed unless there was a failure in production. In some cases, the optimization reports gave suggestions that had been intentionally ignored for design or business requirements. In other cases, the reports highlighted issues that had not been considered. And the report was used to validate and optimize quick course corrections at minimal cost.

The Bottom Line

By integrating application performance objectives early in the development of the mobile site, Unleashed Technologies took a proactive approach to ensuring its client’s success. With Shunra’s capabilities and a sound strategy to ensure performance, Unleashed Technologies positioned site performance as a top priority and was able to provide detailed measurements to validate their efforts. Using the results of Shunra’s in-depth analysis and optimizations, the mobile site development team shortened the project timeline and achieved performance level goals.

Shunra’s Mobile Application Performance Engineering methodology provides a proactive approach to mobile application performance that incorporates planning, testing and optimizing performance. This methodology demonstrates the winning combination of how Shunra technology can help any company deploy mobile applications in a unique and measurable way.

A Special thanks to Marty Brandwin, VP of Marketing at Shunra, Dave Berg, Senior Director of Product Management at Shunra, and to Unleashed Technologies for their help with this article.