Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
A FLEXIBLE PLATFORM FOR QOE-DRIVEN DELIVERY OF
IMAGE-RICH WEB APPLICATIONS
P. Ahammad, R. Gaunker, B. Kennedy, M. Reshadi,...
Fig. 2. Our system architecture for QoE-optimized image delivery.
The JavaScript library JSClient.js from the diagram is r...
visual perception of the end-user.
Our architecture (Figure 2) differs in two ways compared
to the traditional CDN archite...
It is worth contrasting our transcoding approach with ex-
isting techniques for trading-off image quality for size reduc-
...
Fig. 5. Performance improvement of our approach against our pre-
viously proposed approach [9] for QoE-driven image delive...
Fig. 7. First Panel: Total content reduction at onLoad event (in KB)
with content-aware image streaming. Second Panel: Imp...
Upcoming SlideShare
Loading in …5
×

Paper: A Flexible Platform for QOE-Driven Delivery of Image Rich Web Applications

378 views

Published on

The advent of content-rich modern web applications, unreliable network connectivity and device heterogeneity demands flexible web content delivery platforms that can handle the high variability along many dimensions - especially for the mobile web. Images account for more than 60% of the con-tent delivered by present-day webpages and have a strong influence on the perceived webpage latency and end-user experience. We present a flexible web delivery platform with a client-cloud architecture and content-aware optimizations to address the problem of delivering image-rich web applications. Our solution makes use of quantitative measures of image perceptual quality, machine learning algorithms, partial caching and opportunistic client-side choices to efficiently deliver images on the web. Using data from the WWW, we experimentally demonstrate that our approach shows significant improvement on various web performance criteria that are critical for maintaining a desirable end-user quality-of-experience (QOE) for image-rich web applications.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Paper: A Flexible Platform for QOE-Driven Delivery of Image Rich Web Applications

  1. 1. A FLEXIBLE PLATFORM FOR QOE-DRIVEN DELIVERY OF IMAGE-RICH WEB APPLICATIONS P. Ahammad, R. Gaunker, B. Kennedy, M. Reshadi, K. Kumar, A.K. Pathan, H. Kolam Instart Logic Inc., 450 Lambert Ave, Palo Alto, CA, USA. {pahammad, rgaunker, bkennedy, mreshadi, kkumar, akhan, hkolam}@instartlogic.com ABSTRACT The advent of content-rich modern web applications, unreli- able network connectivity and device heterogeneity demands flexible web content delivery platforms that can handle the high variability along many dimensions - especially for the mobile web. Images account for more than 60% of the con- tent delivered by present-day webpages and have a strong in- fluence on the perceived webpage latency and end-user ex- perience. We present a flexible web delivery platform with a client-cloud architecture and content-aware optimizations to address the problem of delivering image-rich web appli- cations. Our solution makes use of quantitative measures of image perceptual quality, machine learning algorithms, par- tial caching and opportunistic client-side choices to efficiently deliver images on the web. Using data from the WWW, we experimentally demonstrate that our approach shows signif- icant improvement on various web performance criteria that are critical for maintaining a desirable end-user quality-of- experience (QoE) for image-rich web applications. Index Terms— Web delivery service, Multimedia web applications, Quality of Experience, Content-aware perfor- mance optimization. 1. INTRODUCTION The size of internet webpages has more than doubled on av- erage from 717 KB in Jan 2011 to 1775 KB in May 2014 (see Fig 1). Moreover, a lot of web applications now serve dynamic content that is targeted to the specific user based on location, device type and user profile. Modern internet usage trends show an increasing diver- sity in mobile devices with sophisticated displays and ubiqui- tous presence of highly dynamic web applications. The con- tent delivery platforms operating in this space have to con- tend with high variability along several different dimensions, such as network bandwidth, device resolution, device plat- form, client-side browser types and so on. In order to deliver optimal web application performance in the face of these vari- ations, the web delivery platforms must be flexible and adapt to the demands at hand in an intelligent manner. Existing web delivery platforms, such as CDNs [2], typically focus on fine- tuning different aspects of web browsing with a very network- centric focus and cloud-only architecture. We contend that Fig. 1. Sharp increase in average webpage size from Jan 2011 (top panel) to May 2014 (bottom panel). Notice the share of webpage size contributed by images (higher than 60%) [1]. overall QoE is both a function of network-level optimizations as well as content-aware optimizations from the point of view of the end-user (especially in the case of image-rich web ap- plications). In this paper, we propose a flexible platform that can readily adapt to the multidimensional variability in the context of web application performance optimization without sacrificing overall QoE. This flexibility is achieved through two unique features: (A) content-aware image optimizations that maximize end-user QoE, and (B) a client-side presence in the architecture. Consider a couple of simple web usage scenarios in which someone relaxing in an airport lounge in Europe is either looking at various products from an American luxury goods manufacturer’s website or catching up on his favorite social network application on his mobile device. The data elements from the content publisher’s server typically pass through multiple stages before they are rendered onto the end-user’s mobile device screen. A web application works by referenc- ing external resources and determining their absolute or rel- ative position and presentation on the screen. This may be done statically via HTML tags and attributes, or dynamically
  2. 2. Fig. 2. Our system architecture for QoE-optimized image delivery. The JavaScript library JSClient.js from the diagram is referred to as NanoVisor throughout the paper. via JavaScript. For many web applications, the QoE is usu- ally directly correlated to the page load performance, which depends on how quickly the browser can download the exter- nal resources, process them and render them on the screen. The page load performance in turn depends on various fac- tors such as bandwidth, latency, and number of network con- nections to the server. QoE of image-rich web applications (which includes various aspects such as fidelity of displayed images, latency of loading and time to interact etc.) has a strong commercial impact on the products that the specific web application (such as a webpage) may be serving. For example, a recent analysis of mobile e-commerce traffic sug- gests that the mobile user’s choice to buy a displayed product decreases by 3.5% when the website latency increased by just 1 second [3]. This implies that improving the QoE of web ap- plications is not just a usability issue, but a profitability issue as well. Keeping in mind that images play a significant role in modern web applications, in this paper we focus our attention on demonstrating (a) how our content-aware optimizations (sections 3.3, 3.2) help improve performance while maintain- ing high QoE for images, and (b) how our client-cloud ar- chitecture (section 2) enables a delivery mechanism that opti- mizes overall web application QoE. In particular, we address the issues of minimizing overall network footprint and mak- ing it faster to load and interact with the web applications. 1.1. Related Work Let us first survey the existing classes of approaches that aim to improve the web application performance. Content deliv- ery networks (CDN) optimize the web browsing by caching the requested resources closer to the client and thus improv- ing the delivery latency between client and server [2]. While CDNs deliver excellent performance boost for wired web, they don’t necessarily address the unique challenges posed by wireless networks. CDN approaches also tend to be very one- sided (cloud and network centric) and lack the flexibility to adapt according to the end-user conditions. Automated front- end optimization (FEO) approaches manipulate the structure of the webpage on the server and tweak the way static re- sources are accessed and displayed on the screen [4]. FEO approaches are usually incapable of dealing with dynamic re- quests. Client-side optimizations (CSO) such as prefetching and local caching focus on identifying the resources that are requested often, and improve the performance by reusing a previously downloaded resource or by making a quicker re- quest [5]. It is worth noting that these client-side optimiza- tions mostly only work for static content since the tricks such as prefetching do not work for dynamic resources. A different way of categorizing the web performance op- timizations is by looking at the target of impact (such as net- work level vs. individual resource level). Network optimiza- tions that operate at socket level (such as ReverseHTTP [6]) are now implemented as part of many CDN approaches. Ob- ject level optimizations such as caching [2] and inlining [7] are implemented as part of CDN as well as FEO approaches. Along with the network level and object level optimizations described above, our system implements additional content- level (content-aware) optimizations for image delivery such as streaming and transcoding. While some CDNs currently do offer image transcoding service [8] to deal with image de- livery in congested mobile networks, such services are typi- cally restricted to trading off image file size by lowering the compression quality of the image without accounting for the loss of perceptual image quality. Without a learning mecha- nism that continuously learns from and leverages previously made image optimization decisions, such compression qual- ity tuning approaches can result in poor quality images - espe- cially for mobile internet applications on congested wireless networks. 2. QOE-DRIVEN ARCHITECTURE The main goal of traditional CDN approach to improving web performance is to optimize the delivery of individual re- sources of an application [2]. CDNs typically achieve this through extensive caching and network optimizations. How- ever, they ignore the application as a whole and how these re- sources affect the overall application performance. Most im- portantly, they passively serve each resource in the same order application requested them.Instead of simply focusing on the resources of the application, our architecture focuses on the application as a whole. The key observation here is that dif- ferent parts of a certain resource (such as images) are needed at different times in the application. Therefore, instead of de- livering the whole image at once, our approach focuses on creating content-aware partitions of the image by reordering the bytes based on their importance and usage time stamp in the application. The client presence in the architecture (Fig- ure 2) enables seamless recombination of the QoE-optimized image partitions on the client device without impacting the
  3. 3. visual perception of the end-user. Our architecture (Figure 2) differs in two ways compared to the traditional CDN architecture. The first major difference is the behavior of the cloud itself. Instead of always serving the content from the cache, our cloud launches optimization processes offline (see examples in section 3.2 and section 3.3) and starts serving the optimized content as soon as it is ready - thus delivering an improved overall QoE. The second major difference in our system is that instead of passively respond- ing to browser requests, our system has a client presence that manages the requests issued by the browser and if necessary reorders them. It may issue the request sooner speculatively, or break the request in multiple pieces or delay the request to minimize the negative impact on the other resource download and hence the performance of the application. The main goal is to avoid stalling the progress of the application for down- loading resources that are not immediately needed for optimal QoE. The implementation of the client depends on the client device technology; for example, our main implementation in the browser is called NanoVisor which is a JavaScript li- brary injected in the html for enabling these features. Our NanoVisor mechanism enables a transparent interface for in- strumenting intelligent application delivery without worrying about the specifics of which browser is used at the end-user device. Using this mechanism we can optimize any cacheable content to improve the performance. 3. QOE-DRIVEN IMAGE DELIVERY In the context of image delivery, some critical decisions such as how to parse an image to decide which bytes should be sent ahead to optimize visual perception of quality, and how many bytes should go first, cannot be performed manually at the scale of a web delivery service. To address such issues, we have implemented machine learning algorithms that can parse images and enable content-aware decisions that are optimally tuned to preserve quality of every single image that gets sent through the web delivery pipeline. For example, consider- ing how the user would see and consume the images on the screen, our system has the capability to stream images so that the lower quality partition of all images is sent first, and then the rest of the bytes are sent to make sure the full quality im- age is eventually shown to the user (section 3.3). In the sit- uations where the end-user’s environment does not support NanoVisor, our system can adaptively adjust the quality lev- els on the server-side so that total byte size is reduced without impacting visual quality of the images(section 3.2). In both these image delivery scenarios, one needs to have a mecha- nism to continuously learn from previously analyzed corpus of images and extend the best settings to the new images com- ing through the web delivery service. We adopted our pre- viously published algorithmic paradigm for delivery-oriented image categorization [9] to enable such learning mechanism Fig. 3. Our improved VoQS estimation procedure (section 3.1) for off-line delivery-oriented categorization. in our system(section 3.1). 3.1. QoE-driven Image Categorization We implemented an off-line semi-automated algorithm that performs categorization on large corpuses of images such that images that have similar quality degradation behavior are grouped together. Such categorization requires a metric to compare any given pair of images that could be potentially of different sizes, bit depths, encoding qualities or contain very different scenes. For this purpose, we adopted our recently proposed VoQS (variation of quality signature) [9], with some critical improvements to make it compatible with our large- scale web delivery system. In particular, we use the Gaussian Pyramid technique [10] to significantly speed up the VoQS calculations, without any negative impact on the overall cat- egorization accuracy (see Figure 3). For improved optimal- ity, we used K-means++ algorithm [11] in our system for delivery-oriented image clustering. These two optimizations offer a significant performance boost compared to our previ- ous proposal [9] and allow us to scale up our web delivery system (see section 4). Once clustered, one representative image from every clus- ter is used for manually selecting the delivery settings to cre- ate optimal QoE-driven partitions while maintaining the same level of visual quality as the original image. With just a few manual decisions, this procedure allows us to quickly define optimal delivery settings for the full image corpus. It is impor- tant to note that while we use a combination of visual quality measures such as PSNR [12] and SSIM [13] for categoriza- tion, our quality settings leverage the human input in a very efficient way. After the off-line categorization and parameter- setting procedure is complete, our system stores the VoQ sig- natures of the representative images from each cluster, along with the selected delivery settings, on the cloud server for fu- ture real-time usage. 3.2. Content-aware Image Transcoding Image transcoding has been a popular image optimization technique for improving web application performance [8]. Our key contribution here is the content-aware quality- assignment of our platform, and it plays a key role in ensur- ing end-user QoE. In highly congested networks where band- width is very scarce, content-aware image transcoding allows the server to reduce the image size without sacrificing the per- ceptual quality, thus preserving the end-user QoE.
  4. 4. It is worth contrasting our transcoding approach with ex- isting techniques for trading-off image quality for size reduc- tion. Our algorithmic design can work for any lossy image encoding method, not just JPEG. Chandra et.al.’s method [14] only focuses on JPEG format alone, and does not take into account the diversity of encoding qualities across images en- countered at web-scale. Coulombe et.al.’s method [15] fixes this problem (for JPEG images) by using SSIM to guide the quality-size trade-off. This method can be automated to pro- cess large corpuses of images as well - but there is no inher- ent learning mechanism in this approach. Since SSIM mea- sure is known to be very sensitive to geometric distortions that can happen in a web delivery pipeline that deals with di- verse client displays, solely relying on one perceptual quality measure is also not ideal. The decision-schemes are fixed in Coulombe et.al.’s method, and cannot automatically adapt to a changing image corpus or changing network conditions on the fly. Since our content-aware approach is informed by a delivery-oriented image categorization mechanism, it is built to get better by leveraging past history as more images pass through the system. 3.3. Content-aware Image Streaming Not all images in a page have the same size, or encoding qual- ity or importance in the page. The available bandwidth and number connections are limited and should be utilized care- fully to maximize overall QoE rather than individual image load time. In a regular webpage loading process, the browser downloads one or more images first. Only after each image from the initial set is fully downloaded, the browser starts the download of a new image. For example, if the maximum number of connections in the browser is set to 2, that means at any point of time at most 2 images may be downloaded. During page load, the browser will know the size of each im- age only after downloading it. Therefore, if for any reason it starts downloading any big image they will block the rest of images on the page. The central idea of image streaming is to first download only part of every image so that the user can start consuming the information sooner, and in the next round(s) load the rest of each image (see Figure 4).For every single image, we find the best partitions (for optimal QoE) by comparing the VoQ signature of the current image with the signatures of represen- tative clusters computed off-line in the image categorization step. This allows our system to make informed and intelligent choices about partitioning the image on hand such that the set- tings maintain the visual quality of the image using the small- est partition. Instead of 1(n) image(s) at a time, we download 1(n) partition(s) of images. Therefore, more number of im- ages will show up on the page in the same amount of time. To ensure that the full visual quality is maintained, the rest of each image is downloaded later. It is worth contrasting our image streaming approach with an alternative approach of showing a lower-quality partition Fig. 4. Flow-chart of QoE-driven image streaming in our sys- tem. Blue cylinder denotes our cloud server that interacts with ’JSClient.js’ known as NanoVisor to facilitate optimized image streaming. of the original image as a place holder and then replacing it with original image at a later point [16]. This approach is called LQIP (low-quality image placeholders). This approach requires extra round-trips and increases the overall network footprint compared to our content-aware image streaming ap- proach. Additionally, the issue of automatically finding a low-quality placeholder image with high QoE still remains in LQIP. 4. EXPERIMENTAL SETUP AND EVALUATION We demonstrate the applicability and performance of our client-cloud web delivery platform using two different datasets. Dataset-1 consists of 2000 images with various res- olutions, bit depths, encoding qualities and scene variations sampled from the Internet. Dataset-1 allows us to compare our system’s performance against other systems without a sampling bias. To account for the challenges encountered with real-world websites, we sampled image-heavy webpages from IR-500 2014 list [17] (dataset-2). We calculated the image weight as the % of total image payload as a fraction of the total web- page payload. We only considered a webpage to be image- rich if it has at least 50% image weight. 65 of the IR500 web- sites [17] qualified as image-rich websites by this measure. Since these websites contain not just images but other con- tent types as well, it allows us to study which websites bene- fit most from the QoE-driven content-aware image optimiza- tions we proposed. These are real websites which can have unoptimized pages with many potential performance bottle- necks. We used WebPageTest [18] (which implements an automated real browser) as a client for running our perfor- mance benchmarking tests. We used Firefox (version 34) and Chrome (version 39) browsers for sampling webpages. For server, we used our own cloud server proxy, and ran the per- formance tests by setting certain headers on the client for the page load. We tested the performance improvements in QoE- driven image delivery on a server with 24 CPUs, 2300 MHz CPU speed, 132 GB memory (RAM) and 2 GB total swap space. These header settings allow us to automatically enable or disable a specific optimization (example: Content-aware Image Streaming or Transcoding). Each webpage was loaded
  5. 5. Fig. 5. Performance improvement of our approach against our pre- viously proposed approach [9] for QoE-driven image delivery ser- vice. First-panel: Average CPU foot print per core (lower is bet- ter); Second-panel: Average image requests processed per second per core (higher is better). 20 different times, over 2 different network speeds, including Cable (5Mbps down; 1Mbps up; 28ms RTT) and high latency mobile (3G: 1.6Mbps down; 768Kbps up; 300ms RTT). For each such test, we carefully selected 1st party domains, and did not optimize content from the 3rd party domains. 4.1. Improving QoE-driven image delivery performance We compare the real-time throughput (image RPS - requests processed per sec) and CPU usage of the same overall image delivery service platform using our proposed VoQS estima- tion approach against our previously proposed VoQS estima- tion approach [9] while incrementally allocating 4, 6 and 8 cores (see Figure 5). The first dataset (2200 varied images from the internet) was used for testing both approaches and we average the results over multiple runs to remove bias. We chose the content-aware image transcoding as the image oper- ation of choice in these tests, since it can be enabled both with or without a client-presence. Since this is a content-aware im- age delivery operation, the quality of the delivered image is automatically set to maintain the best-possible end-user QoE. Experimental results demonstrate that, for a fixed choice of image delivery operation, the optimizations we implemented improve the web service throughput by almost an order of magnitude, while significantly lowering the CPU load on the server, thus showing improved scalability of our web deliv- Fig. 6. First Panel: Total content reduction at onLoad event (in KB) with content-aware image transcoding. Second Panel: Improvement in time to onLoad event with content-aware image transcoding. In both panels, higher y-axis values are better. ery system. We manually verified the quality of all the pro- cessed images in our experiments, and found that our mean error rates are around 0.8% for the first dataset while allow- ing a very efficient processing overall. 4.2. Content-aware Image Transcoding We measured the reduction in total content size at onLoad event for image-rich IR500 [17] websites (see Figure 6). Me- dian content reduction at onLoad event by applying content- aware image transcoding optimization was 749 KB for Cable access mode. We also measured time to onLoad event for image-rich IR500 [17] websites (see Figure 6). Median im- provement in time to onLoad event by applying content-aware image transcoding optimization was 17.83% for Cable access mode. Since we tested the content-aware image transcoding as a server-side transformation (the most common scenario in web delivery services), the content reduction numbers would be the same for 3G for a given target QoE level. Our results suggest that content-aware image transcoding offers a consis- tent reduction in network footprint, as well as improvements in onLoad time without sacrificing visual quality of images. 4.3. Results: Content-aware Image Streaming We measured the reduction in total content size at onLoad event for image-rich IR500 [17] websites (see Figure 7). Me- dian content reduction at onLoad event by applying content- aware image streaming optimization was 831 KB for Ca- ble access mode and 892 KB for 3G wireless access mode. We also measured time to onLoad event for image-rich IR500 [17] websites (see Figure 7). Median improvement in time to onLoad event by applying content-aware image streaming optimization was 16.8% for Cable access mode and 21.7% for 3G wireless access mode. The results suggest that
  6. 6. Fig. 7. First Panel: Total content reduction at onLoad event (in KB) with content-aware image streaming. Second Panel: Improvement in time to onLoad event with content-aware image streaming. In both panels, higher y-axis values are better. content-aware image streaming offers a consistent reduction in network footprint, while the improvements in onLoad time are less consistent. This could be due to non-image resources of the webpages being more important (in the critical path of web application rendering) or due to the additional round- trips incurred due to requesting multiple partitions of the same image object. 5. SUMMARY AND CONCLUSIONS In this paper, we presented a flexible web delivery platform with client-cloud architecture that enables content-aware im- age optimizations to maximize end-user QoE. Using data from the WWW, we demonstrated the performance gains of- fered by our platform in the context of image delivery. Our system works on web scale and is adaptable to variations in network congestion, device heterogeneity, browser types etc. without sacrificing the end-user quality of experience. Further research into perceptual quality will improve these image- specific optimizations. While images are a big part of an av- erage webpage, other resources (such as scripts and HTML) could be in the critical path of the web application rendering process - so it will be worth exploring the applicability of our platform for optimizing the delivery of non-image resources as well. 6. REFERENCES [1] “Http Archive,” http://httparchive.org/ interesting.php?a=All, 2014. [2] Gang Peng, “CDN: Content distribution network,” arXiv preprint, , no. cs0411069, 2004. [3] “Web Performance Today,” http://www. webperformancetoday.com/2013/06/05/ web-page-growth-2010-2013/, 2013. [4] Patrick Meenan, “Selecting and deploying automated op- timization solutions,” http://velocityconf.com/ velocity2012/public/schedule/detail/22973, 2012. [5] “Client-side optimization techniques,” http: //www.mediacurrent.com/blog/ client-side-optimization-techniques, 2009. [6] Eric Florenzano, “Reverse HTTP,” http: //eflorenzano.com/blog/2008/11/27/ reverse-http/, 2008. [7] “Inline small resources: Google pagespeed service,” https://developers.google.com/speed/ pagespeed/service/InlineSmallResources, 2014. [8] Akamai Inc., “Aqua Ion Mobile - Akamai,” http: //www.akamai.com/dl/brochures/aqua_ion_ mobile_pb.pdf, 2014. [9] P. Ahammad, B. Kennedy, P. Ganti, and H. Kolam, “QoE- driven unsupervised image categorization for optimized web delivery: Short paper,” in Proceedings of the ACM Interna- tional Conference on Multimedia, 2014. [10] P.J. Burt, “Fast algorithms for estimating local image proper- ties,” Computer Graphics and Image Processing, 1983. [11] D. Arthur and S. Vassilvitskii, “k-means++ : The advantages of careful seeding,” in Proceedings of the eighteenth annual ACM-SIAM symposium on Discrete algorithms(SODA), 2007, pp. 1027–1035. [12] H Marmolin, “Subjective MSE measures.,” IEEE Trans. on Systems, Man, and Cybernetics, vol. 16, no. 3, 1986. [13] H. Sheikh Z. Wang, A. Bovik and E. Simoncelli, “Image qual- ity assessment: from error visibility to structural similarity.,” IEEE Trans. on Image Processing., vol. 13, no. 4, pp. 600–612, 2004. [14] S. Chandra and C.S. Ellis, “Jpeg compression metric as a qual- ity aware image transcoding,” in Proceedings of USITS’ 99: The 2nd USENIX Symposium on Internet Technologies & Sys- tems. [15] S. Coulombe and S. Pigeon, “Low-complexity transcoding of jpeg images with near-optimal quality using a predictive qual- ity factor and scaling parameters.,” IEEE Transactions on Im- age Processing, vol. 19, no. 3, pp. 712–721, June 2010. [16] Guy Podjarny, “Introducing LQIP - low quality image place- holders,” http://www.guypo.com/, 2013. [17] “The Internet Retailer 2014 Top 500 Guide,” https:// www.internetretailer.com/top500/, 2014. [18] “WebPageTest - Website Performance and Optimization Test,” http://www.webpagetest.org/, 2014.

×