LOAD-TIME REDUCTION TECHNIQUES FOR DEVICE-AGNOSTIC WEB SITES
Keywords:
Adaptive Images, Clown-Car Technique, content-delivery network, domain sharding, HTML 5.1 pictures, HTTP/2, image sprites, lazy loading, Picturefull, responsive images, responsive web design, symbol fonts, web-browser load time, web-resource compression, web-resource concatenation, web-resource minificationAbstract
Modern device-agnostic web sites aim to oer web pages that adapt themselves seam- lessly to the front-end equipment they are displayed on, whether it is a desktop com- puter, a mobile device, or another type of equipment. At the same time, mobile devices and other front-end equipment with limited processing powers, screen resolutions, and network capacities have become common, making front-end performance optimisation in general, and load-time reduction in particular, a central concern. The importance of load-time reduction is exacerbated by the proliferation of multimedia content on the web. This paper therefore reviews, evaluates, and compares available load-time reduction tech- niques for device-agnostic web sites, grouped into techniques that improve client-server communication, optimise UI graphics, optimise textual resources, and adapt content images to context. We evaluate the techniques on a case web site using both desktop and mobile front-ends, in a variety of settings, and over both HTTP/1.1 and HTTP/2. We show that each technique has its pros and cons, and that many of them are likely to remain useful even as HTTP/2 becomes widespread. Most techniques were clearly benecial under at least one of the conditions we evaluated, but most of them were also detrimental in certain cases | sometimes drastically so. Hence, load-time reduction techniques for device-agnostic web sites must be selected with care, based on a solid understanding both of usage context and of the trade os between the techniques.
Downloads
References
Cisco. Visual networking index { global mobile data trac forecast update, 2014-2019, 2015.
Luke Wroblewski. Mobile rst. A Book Apart, New York, 2011.
Katie Fehrenbacher. M dot: Web's answer to mobile. Gigaom, May 11, 2007.
S Mohorovicic. Implementing responsive web design for enhanced web presence. In Information
& Communication Technology Electronics & Microelectronics (MIPRO), 2013 36th International
Convention on, pages 1206{1210. IEEE, 2013.
Sehoon Park, Qichen Chen, Hyuck Han, and Heon Y Yeom. Design and evaluation of mobile
ooading system for web-centric devices. Journal of Network and Computer Applications, 40:105{
, 2014.
Minhaj Ahmad Khan. A survey of computation ooading strategies for performance improvement
of applications running on mobile devices. Journal of Network and Computer Applications, 56:28{
, 2015.
Kayce Basques. How to use the timeline tool, December 15, 2016. Retrieved 2016-12-16.
Aaron Gustafson and Je rey Zeldman. Adaptive Web Design: Crafting Rich Experiences with
Progressive Enhancement. Easy Readers, 2011.
Steven Champeon and Nick Finck. Inclusive web design for the future, 2003.
Aaron Gustafson. Understanding progressive enhancement. A List Apart, October 2008.
Seth Weintraub. Industry rst: Smartphones pass pcs in sales, 2011.
Ed Hardy. Google adopts a new strategy: Mobile rst, 2010.
Kayla Knight. Responsive web design: What it is and how to use it, 2011.
Ethan Marcotte. Responsive web design. A List Apart, 306, May 25, 2010.
The HTTP Archive. Interesting stats (desktop), February 1, 2014.
The HTTP Archive. Interesting stats (desktop), November 15, 2010.
Guy Podjarny. What are responsive websites made of?, April 29, 2013.
Guy Podjarny. Performance implications of responsive design, July 11, 2012.
Barbara Kitchenham. Procedures for performing systematic reviews. Keele, UK, Keele University,
(2004):1{26, 2004.
Yehia Elkhatib, Gareth Tyson, and Michael Welzl. The e ect of network and infrastructural
variables on spdy's performance. arXiv preprint arXiv:1401.6508, 2014.
W3C. Hypertext transfer protocol { HTTP/1.1, June 1999.
Steve Souders. Domain sharding revisited, September 5, 2013.
Ilya Grigorik. Making the web faster with http 2.0. Commun. ACM, 56(12):42{49, December
William Chan. Network congestion and web browsing, May 20, 2013.
G. Mineki, S. Uemura, and T. Hasegawa. Spdy accelerator for improving web access speed. In
Advanced Communication Technology (ICACT), 2013 15th International Conference on, pages
{544, Jan 2013.
A. Vakali and G. Pallis. Content delivery networks: status and trends. Internet Computing, IEEE,
(6):68{74, Nov 2003.
Steve Souders. High performance web sites - essential knowledge for frontend engineers: 14 steps
to faster-loading web sites. O'Reilly, 2007.
Nicholas C. Zakas. The evolution of web development for mobile devices. Queue, 11(2):30:30{30:39,
February 2013.
Mozilla. Shorthand properties, 2013.
Steve Souders. High-performance web sites. Commun. ACM, 51(12):36{41, December 2008.
Alex Nicolaou. Best practices on the move: Building web apps for mobile devices. Queue,
(6):30:30{30:41, June 2013.
Sayanee Basu. Source maps 101. Tutsplus, January 16, 2013.
Jean-loup Gailly and Mark Adler. What is gzip?, 1999.
Andy Davies. Pocket Guide to Web Performance. Five Simple Steps, Penarth, UK, 2013.
JunLi Yuan, Li Xiang, and Chi-Hung Chi. Understanding the impact of compression on web
retrieval performance. The Eleventh Australasian World Wide Web Conference, 2005.
Ilya Grigorik. High Performance Browser Networking: What Every Web Developer Should Know
about Networking and Web Performance. O'Reilly Media, Inc., 2013.
Brian Suda. Creating Symbol Fonts. Five Simple Steps, Penarth, UK, 2013.
W3C. Use cases and requirements for standardizing responsive images, November 7, 2013.
Scott Jehl, Mat Marquis, and Shawn Jansepar. Picture ll documentation, 2014.
Bert Bos, Tantek C elik, Ian Hickson, and Hakon Wium Lie. Cascading Style Sheets Level 2
Revision 1 (CSS 2.1) Speci cation, 2009.
Ethan Marcotte. Responsive Web Design. A Book Apart, New York, 2011.
Bill Venners. Orthogonality and the DRY principle { a conversation with andy hunt and dave
thomas, part ii, March 10, 2003.
Matt Wilcox. Adaptive images documentation, 2012.
Yoaw Weiss. Preloaders, cookies and race conditions, September 28, 2011.
Estelle Weyl. Clown car technique: Solving adaptive images in responsive web design. Smashing
Magazine, June 2, 2013.
W3C. Scalable vector graphics (SVG) 1.1 (second edition), August 16, 2011.
The Can I use. . . ? web site. Can i use svg?, 2014.
W3C. The picture element { an HTML extension for adaptive images, 2013.
W3C. Html 5.1 | w3c recommendation, November 1, 2016.
Ian Devlin. Responsive HTML5 video, August 20, 2012.
W3C. The srcset attribute { an HTML extension for adaptive images, 2013.
Anders Andersen and Tobias Jarlund. Addressing the responsive images performance problem: A
case study. Smashing Magazine, September 16, 2013.
Mark Wilton-Jones. Ecient javascript. Dev.Opera, November 2, 2006.
Patrick Meenan. How fast is your website? Communications of the ACM, 56(4):49{55, 2013.
Rick Viscomi, Andy Davies, and Marcel Duran. Using WebPageTest: Web Performance Testing
for Novices and Power Users. " O'Reilly Media, Inc.", 2015.
Nina Zumel, John Mount, and Jim Porzak. Practical data science with R. Manning, 2014.
Tenni Theurer. Performance research, part 2: Browser cache usage { exposed!, January 4, 2007.
