Welcome!

Microservices Expo Authors: TJ Randall, Liz McMillan, Elizabeth White, Pat Romanski, AppDynamics Blog

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
At its core DevOps is all about collaboration. The lines of communication must be opened and it takes some effort to ensure that they stay that way. It’s easy to pay lip service to trends and talk about implementing new methodologies, but without action, real benefits cannot be realized. Success requires planning, advocates empowered to effect change, and, of course, the right tooling. To bring about a cultural shift it’s important to share challenges. In simple terms, ensuring that everyone k...
Is advanced scheduling in Kubernetes achievable?Yes, however, how do you properly accommodate every real-life scenario that a Kubernetes user might encounter? How do you leverage advanced scheduling techniques to shape and describe each scenario in easy-to-use rules and configurations? In his session at @DevOpsSummit at 21st Cloud Expo, Oleg Chunikhin, CTO at Kublr, answered these questions and demonstrated techniques for implementing advanced scheduling. For example, using spot instances and co...
Today most companies are adopting or evaluating container technology - Docker in particular - to speed up application deployment, drive down cost, ease management and make application delivery more flexible overall. As with most new architectures, this dream takes significant work to become a reality. Even when you do get your application componentized enough and packaged properly, there are still challenges for DevOps teams to making the shift to continuous delivery and achieving that reducti...
Skeuomorphism usually means retaining existing design cues in something new that doesn’t actually need them. However, the concept of skeuomorphism can be thought of as relating more broadly to applying existing patterns to new technologies that, in fact, cry out for new approaches. In his session at DevOps Summit, Gordon Haff, Senior Cloud Strategy Marketing and Evangelism Manager at Red Hat, discussed why containers should be paired with new architectural practices such as microservices rathe...
With the rise of Docker, Kubernetes, and other container technologies, the growth of microservices has skyrocketed among dev teams looking to innovate on a faster release cycle. This has enabled teams to finally realize their DevOps goals to ship and iterate quickly in a continuous delivery model. Why containers are growing in popularity is no surprise — they’re extremely easy to spin up or down, but come with an unforeseen issue. However, without the right foresight, DevOps and IT teams may lo...
Kubernetes is a new and revolutionary open-sourced system for managing containers across multiple hosts in a cluster. Ansible is a simple IT automation tool for just about any requirement for reproducible environments. In his session at @DevOpsSummit at 18th Cloud Expo, Patrick Galbraith, a principal engineer at HPE, will discuss how to build a fully functional Kubernetes cluster on a number of virtual machines or bare-metal hosts. Also included will be a brief demonstration of running a Galer...
DevOps is under attack because developers don’t want to mess with infrastructure. They will happily own their code into production, but want to use platforms instead of raw automation. That’s changing the landscape that we understand as DevOps with both architecture concepts (CloudNative) and process redefinition (SRE). Rob Hirschfeld’s recent work in Kubernetes operations has led to the conclusion that containers and related platforms have changed the way we should be thinking about DevOps and...
In his session at 20th Cloud Expo, Mike Johnston, an infrastructure engineer at Supergiant.io, will discuss how to use Kubernetes to setup a SaaS infrastructure for your business. Mike Johnston is an infrastructure engineer at Supergiant.io with over 12 years of experience designing, deploying, and maintaining server and workstation infrastructure at all scales. He has experience with brick and mortar data centers as well as cloud providers like Digital Ocean, Amazon Web Services, and Rackspace....
"There is a huge interest in Kubernetes. People are now starting to use Kubernetes and implement it," stated Sebastian Scheele, co-founder of Loodse, in this SYS-CON.tv interview at DevOps at 19th Cloud Expo, held November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA.
Modern software design has fundamentally changed how we manage applications, causing many to turn to containers as the new virtual machine for resource management. As container adoption grows beyond stateless applications to stateful workloads, the need for persistent storage is foundational - something customers routinely cite as a top pain point. In his session at @DevOpsSummit at 21st Cloud Expo, Bill Borsari, Head of Systems Engineering at Datera, explored how organizations can reap the bene...