Welcome!

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.


Latest Stories
Business professionals no longer wonder if they'll migrate to the cloud; it's now a matter of when. The cloud environment has proved to be a major force in transitioning to an agile business model that enables quick decisions and fast implementation that solidify customer relationships. And when the cloud is combined with the power of cognitive computing, it drives innovation and transformation that achieves astounding competitive advantage.
SYS-CON Events announced today that Silicon India has been named “Media Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Published in Silicon Valley, Silicon India magazine is the premiere platform for CIOs to discuss their innovative enterprise solutions and allows IT vendors to learn about new solutions that can help grow their business.
DXWorldEXPO LLC announced today that "IoT Now" was named media sponsor of CloudEXPO | DXWorldEXPO 2018 New York, which will take place on November 11-13, 2018 in New York City, NY. IoT Now explores the evolving opportunities and challenges facing CSPs, and it passes on some lessons learned from those who have taken the first steps in next-gen IoT services.
In this presentation, you will learn first hand what works and what doesn't while architecting and deploying OpenStack. Some of the topics will include:- best practices for creating repeatable deployments of OpenStack- multi-site considerations- how to customize OpenStack to integrate with your existing systems and security best practices.
SYS-CON Events announced today that CrowdReviews.com has been named “Media Sponsor” of SYS-CON's 22nd International Cloud Expo, which will take place on June 5–7, 2018, at the Javits Center in New York City, NY. CrowdReviews.com is a transparent online platform for determining which products and services are the best based on the opinion of the crowd. The crowd consists of Internet users that have experienced products and services first-hand and have an interest in letting other potential buye...
You want to start your DevOps journey but where do you begin? Do you say DevOps loudly 5 times while looking in the mirror and it suddenly appears? Do you hire someone? Do you upskill your existing team? Here are some tips to help support your DevOps transformation. Conor Delanbanque has been involved with building & scaling teams in the DevOps space globally. He is the Head of DevOps Practice at MThree Consulting, a global technology consultancy. Conor founded the Future of DevOps Thought Leade...
Everyone wants the rainbow - reduced IT costs, scalability, continuity, flexibility, manageability, and innovation. But in order to get to that collaboration rainbow, you need the cloud! In this presentation, we'll cover three areas: First - the rainbow of benefits from cloud collaboration. There are many different reasons why more and more companies and institutions are moving to the cloud. Benefits include: cost savings (reducing on-prem infrastructure, reducing data center foot print, redu...
Jo Peterson is VP of Cloud Services for Clarify360, a boutique sourcing and benchmarking consultancy focused on transforming technology into business advantage. Clarify360 provides custom, end-to-end solutions from a portfolio of more than 170 suppliers globally. As an engineer, Jo sources net new technology footprints, and is an expert at optimizing and benchmarking existing environments focusing on Cloud Enablement and Optimization. She and her team work with clients on Cloud Discovery, Cloud ...
Founded in 2000, Chetu Inc. is a global provider of customized software development solutions and IT staff augmentation services for software technology providers. By providing clients with unparalleled niche technology expertise and industry experience, Chetu has become the premiere long-term, back-end software development partner for start-ups, SMBs, and Fortune 500 companies. Chetu is headquartered in Plantation, Florida, with thirteen offices throughout the U.S. and abroad.
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.
The technologies behind big data and cloud computing are converging quickly, offering businesses new capabilities for fast, easy, wide-ranging access to data. However, to capitalize on the cost-efficiencies and time-to-value opportunities of analytics in the cloud, big data and cloud technologies must be integrated and managed properly. Pythian's Director of Big Data and Data Science, Danil Zburivsky will explore: The main technology components and best practices being deployed to take advantage...
DXWorldEXPO LLC announced today that All in Mobile, a mobile app development company from Poland, will exhibit at the 22nd International CloudEXPO | DXWorldEXPO. All In Mobile is a mobile app development company from Poland. Since 2014, they maintain passion for developing mobile applications for enterprises and startups worldwide.
Nicolas Fierro is CEO of MIMIR Blockchain Solutions. He is a programmer, technologist, and operations dev who has worked with Ethereum and blockchain since 2014. His knowledge in blockchain dates to when he performed dev ops services to the Ethereum Foundation as one the privileged few developers to work with the original core team in Switzerland.
Most DevOps journeys involve several phases of maturity. Research shows that the inflection point where organizations begin to see maximum value is when they implement tight integration deploying their code to their infrastructure. Success at this level is the last barrier to at-will deployment. Storage, for instance, is more capable than where we read and write data. In his session at @DevOpsSummit at 20th Cloud Expo, Josh Atwell, a Developer Advocate for NetApp, will discuss the role and value...
"When you think about the data center today, there's constant evolution, The evolution of the data center and the needs of the consumer of technology change, and they change constantly," stated Matt Kalmenson, VP of Sales, Service and Cloud Providers at Veeam Software, in this SYS-CON.tv interview at 18th Cloud Expo, held June 7-9, 2016, at the Javits Center in New York City, NY.