Welcome!

Microservices Expo Authors: Zakia Bouachraoui, Elizabeth White, Pat Romanski, Liz McMillan, Yeshim Deniz

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
When building large, cloud-based applications that operate at a high scale, it’s important to maintain a high availability and resilience to failures. In order to do that, you must be tolerant of failures, even in light of failures in other areas of your application. “Fly two mistakes high” is an old adage in the radio control airplane hobby. It means, fly high enough so that if you make a mistake, you can continue flying with room to still make mistakes. In his session at 18th Cloud Expo, Lee A...
In his general session at 19th Cloud Expo, Manish Dixit, VP of Product and Engineering at Dice, discussed how Dice leverages data insights and tools to help both tech professionals and recruiters better understand how skills relate to each other and which skills are in high demand using interactive visualizations and salary indicator tools to maximize earning potential. Manish Dixit is VP of Product and Engineering at Dice. As the leader of the Product, Engineering and Data Sciences team at D...
Lori MacVittie is a subject matter expert on emerging technology responsible for outbound evangelism across F5's entire product suite. MacVittie has extensive development and technical architecture experience in both high-tech and enterprise organizations, in addition to network and systems administration expertise. Prior to joining F5, MacVittie was an award-winning technology editor at Network Computing Magazine where she evaluated and tested application-focused technologies including app secu...
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 ...
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...
Using new techniques of information modeling, indexing, and processing, new cloud-based systems can support cloud-based workloads previously not possible for high-throughput insurance, banking, and case-based applications. In his session at 18th Cloud Expo, John Newton, CTO, Founder and Chairman of Alfresco, described how to scale cloud-based content management repositories to store, manage, and retrieve billions of documents and related information with fast and linear scalability. He addresse...
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...
SYS-CON Events announced today that DatacenterDynamics has been named “Media Sponsor” of SYS-CON's 18th International Cloud Expo, which will take place on June 7–9, 2016, at the Javits Center in New York City, NY. DatacenterDynamics is a brand of DCD Group, a global B2B media and publishing company that develops products to help senior professionals in the world's most ICT dependent organizations make risk-based infrastructure and capacity decisions.
Discussions of cloud computing have evolved in recent years from a focus on specific types of cloud, to a world of hybrid cloud, and to a world dominated by the APIs that make today's multi-cloud environments and hybrid clouds possible. In this Power Panel at 17th Cloud Expo, moderated by Conference Chair Roger Strukhoff, panelists addressed the importance of customers being able to use the specific technologies they need, through environments and ecosystems that expose their APIs to make true ...
In his keynote at 19th Cloud Expo, Sheng Liang, co-founder and CEO of Rancher Labs, discussed the technological advances and new business opportunities created by the rapid adoption of containers. With the success of Amazon Web Services (AWS) and various open source technologies used to build private clouds, cloud computing has become an essential component of IT strategy. However, users continue to face challenges in implementing clouds, as older technologies evolve and newer ones like Docker c...