Welcome!

Microservices Expo Authors: Zakia Bouachraoui, Liz McMillan, Jason Bloomberg, Elizabeth White, Pat Romanski

Related Topics: Agile Computing, Java IoT, Mobile IoT, Microservices Expo, Microsoft Cloud, @DXWorldExpo

Agile Computing: Article

Engaging the Mobile Visitor

Combining responsive design with performance optimization to deliver exceptional user experiences

In today's hyper-connected world, Web and mobile application performance is playing a more critical role than ever in driving user adoption and engagement. End-users have high expectations - they expect pages to load faster than ever before and they expect richer and more engaging Web experiences and applications.

At the same time, mobile is a fast-growing, global phenomenon that is changing the way we all interact with content, whether for business, information or entertainment. As such, the ability to engage mobile users with fast, quality Web experiences has become a business requirement and a prerequisite for success. Ignore the needs of mobile users, and risk losing a large and growing portion of the business.

Responsive Web Design Adoption Is Growing Fast
Yet, delivering fast, quality experiences in this brave new world isn't exactly easy due to the challenges in optimizing performance across different browsers, screen sizes, networks and devices. Therefore, businesses are looking for techniques that will work equally well on every device. This process is referred to as Responsive Web Design (RWD).

Responsive Web Design[1] is a Web development approach that suggests Web pages should respond to the context in which they're loaded (primarily screen size) and change their user interface accordingly. This technique consists of a mix of flexible grids and layouts, images and an intelligent use of CSS3 media queries. RWD pages contain the HTML required to display all versions of a Web site, including both mobile and desktop views. CSS and JavaScript run in the browser and hide or modify the content to fit the screen size.

The trend of using RWD is growing and growing fast. One of the reasons is that RWD effectively eliminates the need to re-enter the design and development phase each time a new mobile device category comes to market.

As stated, undertaking a RWD strategy sounds like the ideal solution. However, it shouldn't be thought of as a silver bullet for improving the mobile user experience. The reality of successfully engaging mobile users with RWD sites is not always easy. As mobile devices have grown more powerful and networks have become faster and more consistent, the expectations of mobile end-users have also grown.

Delivering Fast and Quality Web Experiences Is Not Easy
If RWD isn't a panacea, what are some of the challenges associated with delivering this type of web site? According to recent research[2] on the composition of RWD sites and the impact on Web performance, 347 RWD[3] sites were tested across different screen resolutions and compared the number of bytes required to download each page across each resolution. The results revealed that 72 percent of RWD sites tested were roughly the same size across different screen resolutions and 22 percent were only slightly smaller.

As important, not only do most pages deliver the same payload across different devices, but also that same payload aligns to the general trend of pages becoming heavier[4] with the average page size close to 1.2 megabytes.

One of the challenges associated with larger, more complex RWD-developed pages is that they need to be delivered to end-users' browsers, which then need to process and render them. On underpowered mobile devices with limited computing power and on constrained wireless and cellular networks this can adversely affect the user experience.

What does delivering large, complex pages on mobile devices mean from an end-user's perspective? Here's a snapshot of the experience of an end-user visiting a US retailer's RWD site's home page on a variety of different best of breed devices/networks. Performance metrics were captured with an empty browser cache using Safari's remote debugging capability. Ten tests for each device/network were run with the median page load time (onLoad event) displayed below. The conclusion is obvious. The delivery of a relatively small 700KB site to a mobile device, over wireless networks, has resulted in serious performance shortcomings.

Figure 1: Example RWD site does not meet end-users' performance expectations

Fundamentally, end users don't care about the underlying technological challenges required to deliver fast, quality experiences to constrained devices over wireless and cellular networks. They just want sites to load fast and work as expected. And end-user expectations just keep getting higher and higher, corresponding to a desire for Web applications that keep getting faster, richer and more engaging.

Steps for Delivering Fast, Quality Responsive Web Design Sites
How do you deliver fast, quality RWD sites? As explained earlier, RWD pages contain the HTML required to display all versions of a website, including both mobile and desktop views. CSS and JavaScript run in the browser and hide or modify the content to fit the screen size. On smartphones, this often means the browser downloads the entire content needed to display the desktop site, only to have CSS/JS hide the vast majority of it.

The first step is to focus on the actual page and the associated objects delivered to the end user. There are also a variety of options available to developers looking to overcome the challenges associated with delivering heavy RWD sites. To start with, move content as close to the end user as possible (i.e., use a Content Delivery Network [CDN]) and leverage optimal delivery mechanisms such as SPDY, an open networking protocol for transporting Web content, that are particularly relevant for wireless networks.

Next focus on the components of the Responsive Web Design application, the HTML, images, JavaScript and CSS objects. To deliver faster pages, focus on:

  • Reducing the number of requests
  • Reducing the number of bytes
  • Accelerating rendering

Let's explore these factors in more details.

Reducing the Number of Requests
The fastest request is the one that isn't made. Each client HTTP request and server response combination represents at least one round-trip on the network. Depending on the end-user's situation and proximity to the origin server, a single round-trip request can take seconds to complete. A single Web page can require dozens of HTTP requests before it can render content, with requests often delaying one another due to the number of connections limited by the specific browser. To reduce round-trips use several techniques to eliminate unnecessary requests such as consolidating multiple CSS and JavaScript files, in-lining small images and leveraging new caching features in HTML5.

Figure 2: A simple optimization to reduce requests is to consolidate multiple CSS or JavaScript files into one

Reducing the Number of Bytes
The math is simple: the larger a web page (measured by bytes), the longer it will take to deliver over a constrained network, and the longer it will take a browser to process and render the content. Images in particular are an issue for RWD sites. Keep file size in check by adjusting image formats, improving cache management, compressing files, and removing data such as comments, whitespaces and image metadata. Automated solutions exist to help deliver the right image resolution to the right device and avoid excessively large images, maintaining image quality at the edge of what the user can perceive, for both small and large screens. For example, a page can be optimized to only load the images that are visible within the current viewport. As the user scrolls down, new images are loaded on demand. Loading images on demand helps improve page load time and also reduces bandwidth for cases where a user doesn't actually scroll down a page. For RWD sites in particular this keeps pages from downloading hidden images, meant for other display sizes or conditions.

Accelerating Rendering
Processing a web page is a complicated process. Browsers employ complex logic during load time, making decisions such as which files to download serially vs. in parallel, which resource types block rendering, and how to manage their connections. At the same time, they need to parse and execute complicated HTML, CSS and JavaScript code, which is often not well defined. Unfortunately, the browser doesn't know sites in advance and is forced to employ generic logic when processing a page. This logic changes between old and new browsers, is limited by backward compatibility and is not customized to a site. Techniques like deferring print style sheets, keeping social buttons from blocking rendering and prefetching the next page are ways to guide the browser into doing the right thing. As a result, users can get a truly fast user experience, attuned to their needs.

Figure 3: The optimized RWD site is significantly faster due to a reduction in bytes, requests and faster rendering

Conclusion
Delivering fast RWD sites is not necessarily easy and requires considerable expertise and resources. Few organizations have developers or expertise in-house to take this on. As RWD evolves new models for delivering fast, quality Web experiences to all users are coming to light. In particular an approach called RESS (Responsive Web Design + Server Side Components)[5] seems to combine the best of current mobile delivery techniques while keeping performance in the forefront. In addition, as mentioned earlier, there are a variety of options available to help developers looking to overcome the challenges associated with delivering heavy RWD sites, such as moving content to a Content Delivery Network (CDN), that has technologies to help accelerate Web performance or leverage optimal delivery mechanisms such as SPDY. The techniques we highlighted here are also helpful, and when followed, can dramatically improve your ability to deliver fast, quality Web experiences while engaging your mobile users.

References

  1. http://alistapart.com/article/responsive-web-design
  2. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
  3. http://mediaqueri.es/
  4. http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/
  5. http://www.lukew.com/ff/entry.asp?1392

More Stories By Lorenz Jakober

Lorenz Jakober is a senior product marketing manager at Akamai Technologies and has extensive experience in the areas of web and mobile application design, performance optimization, usability, and delivery. Prior to joining Akamai Technologies he drove mobile product marketing strategy and the complexity at the edge theme for Compuware Gomez. He is an avid spokesperson and blogger on the topic of mobile and web performance

Comments (1)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Microservices Articles
The explosion of new web/cloud/IoT-based applications and the data they generate are transforming our world right before our eyes. In this rush to adopt these new technologies, organizations are often ignoring fundamental questions concerning who owns the data and failing to ask for permission to conduct invasive surveillance of their customers. Organizations that are not transparent about how their systems gather data telemetry without offering shared data ownership risk product rejection, regu...
Containers and Kubernetes allow for code portability across on-premise VMs, bare metal, or multiple cloud provider environments. Yet, despite this portability promise, developers may include configuration and application definitions that constrain or even eliminate application portability. In this session we'll describe best practices for "configuration as code" in a Kubernetes environment. We will demonstrate how a properly constructed containerized app can be deployed to both Amazon and Azure ...
DevOps is often described as a combination of technology and culture. Without both, DevOps isn't complete. However, applying the culture to outdated technology is a recipe for disaster; as response times grow and connections between teams are delayed by technology, the culture will die. A Nutanix Enterprise Cloud has many benefits that provide the needed base for a true DevOps paradigm. In their Day 3 Keynote at 20th Cloud Expo, Chris Brown, a Solutions Marketing Manager at Nutanix, and Mark Lav...
The now mainstream platform changes stemming from the first Internet boom brought many changes but didn’t really change the basic relationship between servers and the applications running on them. In fact, that was sort of the point. In his session at 18th Cloud Expo, Gordon Haff, senior cloud strategy marketing and evangelism manager at Red Hat, will discuss how today’s workloads require a new model and a new platform for development and execution. The platform must handle a wide range of rec...
The Internet of Things is clearly many things: data collection and analytics, wearables, Smart Grids and Smart Cities, the Industrial Internet, and more. Cool platforms like Arduino, Raspberry Pi, Intel's Galileo and Edison, and a diverse world of sensors are making the IoT a great toy box for developers in all these areas. In this Power Panel at @ThingsExpo, moderated by Conference Chair Roger Strukhoff, panelists discussed what things are the most important, which will have the most profound e...
If your cloud deployment is on AWS with predictable workloads, Reserved Instances (RIs) can provide your business substantial savings compared to pay-as-you-go, on-demand services alone. Continuous monitoring of cloud usage and active management of Elastic Compute Cloud (EC2), Relational Database Service (RDS) and ElastiCache through RIs will optimize performance. Learn how you can purchase and apply the right Reserved Instances for optimum utilization and increased ROI.
TCP (Transmission Control Protocol) is a common and reliable transmission protocol on the Internet. TCP was introduced in the 70s by Stanford University for US Defense to establish connectivity between distributed systems to maintain a backup of defense information. At the time, TCP was introduced to communicate amongst a selected set of devices for a smaller dataset over shorter distances. As the Internet evolved, however, the number of applications and users, and the types of data accessed and...
Consumer-driven contracts are an essential part of a mature microservice testing portfolio enabling independent service deployments. In this presentation we'll provide an overview of the tools, patterns and pain points we've seen when implementing contract testing in large development organizations.
In his session at 19th Cloud Expo, Claude Remillard, Principal Program Manager in Developer Division at Microsoft, contrasted how his team used config as code and immutable patterns for continuous delivery of microservices and apps to the cloud. He showed how the immutable patterns helps developers do away with most of the complexity of config as code-enabling scenarios such as rollback, zero downtime upgrades with far greater simplicity. He also demoed building immutable pipelines in the cloud ...
You have great SaaS business app ideas. You want to turn your idea quickly into a functional and engaging proof of concept. You need to be able to modify it to meet customers' needs, and you need to deliver a complete and secure SaaS application. How could you achieve all the above and yet avoid unforeseen IT requirements that add unnecessary cost and complexity? You also want your app to be responsive in any device at any time. In his session at 19th Cloud Expo, Mark Allen, General Manager of...