High Performance Mobile Web

Preface

Many web designers and web developers are not paying enough attention to their mobile websites’ performance. And we as users are paying for that. Lots of mobile and responsive websites have performance problems today, so I think there is still much room for discussion on this topic.

With this book, I hope to help mobile website creators to understand what things are harming performance and what other things might increase performance. When I talk about performance, I’m also talking about another important metric: conversion. It’s well known that better performance leads to an increase in conversions, and—in the end—that means more money for you.

A lot of interesting data has appeared in the last few years about how performance may be impacting conversion rate. For example:

• Shaving 2.2 s off load time increased downloads for Mozilla by 15%

• A 60% faster website led to a 14% increase in donations to Barack Obama’s US presidential campaign

• A 50% faster website led to 15% more revenue for AutoAnything

• Cutting 100 ms off load times meant 1% more revenue for Walmart

Who Should Read This Book

This book is for web developers and web designers who are ready to optimize the performance of their mobile websites and web apps to the extreme. I’m expecting that you have medium-level knowledge of and experience working with HTML, CSS, JavaScript, and HTTP. Having previous experience with web performance optimization will help, but it’s not required.

A Word on “Mobile Web” Today

In this book, we will explore the current ecosystem and why the mobile web needs special attention in terms of performance. We’ll see the differences in cellular networks and what the latest versions of mobile browsers are offering to improve the user experience and performance.

Navigating This Book

This book is organized as follows:

Chapter 1, The Mobile Web World

Discusses the current ecosystem of the mobile world. I strongly suggest reviewing this chapter, even if you think that you know what the world looks like. You might find some surprises.

Chapter 2, Where to Measure Performance

Describes the usage of different tools to measure performance, such as emulators, simulators, and real devices.

Chapter 3, Web Performance Basics

Covers all the basic web performance concepts, including metrics, charts, and what they mean.

Chapter 4, Measurement Tools

Reviews the tools that are available to get real data from your mobile browsers.

Chapter 5, Performance APIs

Gets into the world of APIs and specs, analyzing the options we have available to measure and improve performance.

Chapter 6, Optimizing for the First Visit

Gives you all the insights and tricks you need to start optimizing the first-view experience.

Chapter 7, Optimizing After First Load

Describes how to take advantage of the first view to improve user perception and performance for future visits.

Chapter 8, Optimizing Responsiveness and the Post‑Loading Experience

Gets into the experience and responsiveness of our web content after it has been loaded.

Chapter 9, Responsive Web Design

Discusses responsive web design and web performance.

Chapter 10, Extreme Mobile Web Performance

Provides lots of useful tips for extreme performance that will get great results, but with greater effort.

Chapter 11, The Native Side of the Web

Discusses what you can do for performance when you are working with the native side of the web, such as web views or hybrid applications.

Chapter 12, Mobile Web Performance Checklist

We will recap everything in this book with a Mobile Web Performance Checklist.

Online Resources

In this book, I will share dozens of online resources based on different topics. If you want to get updated information on the mobile web performance field, I suggest you follow the website of this book at https://www.highperfmobile.com.

Conventions Used in This Book

The following typographical conventions are used in this book:

Italic

Indicates new terms, URLs, email addresses, filenames, and file extensions.

Constant width

Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.

Constant width bold

Shows commands or other text that should be typed literally by the user.

Constant width italic

Shows text that should be replaced with user-supplied values or by values determined by context.

Tip

This element signifies a tip or suggestion.

Note

This element signifies a general note.

Warning

This element indicates a warning or caution.

Safari® Books Online

Note

Safari Books Online is an on-demand digital library that delivers expert content in both book and video form from the world’s leading authors in technology and business.

Technology professionals, software developers, web designers, and business and creative professionals use Safari Books Online as their primary resource for research, problem solving, learning, and certification training.

Safari Books Online offers a range of plans and pricing for enterprise, government, education, and individuals.

Members have access to thousands of books, training videos, and prepublication manuscripts in one fully searchable database from publishers like O’Reilly Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, Course Technology, and hundreds more. For more information about Safari Books Online, please visit us online.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

• O’Reilly Media, Inc.
• 1005 Gravenstein Highway North
• Sebastopol, CA 95472
• 800-998-9938 (in the United States or Canada)
• 707-829-0515 (international or local)
• 707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://bit.ly/high-performance-mobile-web.

To comment or ask technical questions about this book, send email to [e-mail].

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

Acknowledgments

It’s difficult to write a book on web performance without offering thanks to Steve Souders. Author of the first book on the matter, High Performance Web Sites (O’Reilly), and performance advocate for years, he is definitely the guy we should all thank for bringing to light the importance of web performance. More importantly, Steve is a great person. I’m grateful to him for allowing me to add my point of view at many Velocity Conferences.

Several other members of the mobile web community have helped in many ways with this book, writing blog posts, delivering talks, and spending time doing tests on dozens of devices. The list includes Ilya Grigorik, Jake Archibald, Scott Jehl, Nicole Sullivan, Tim Kadlec, Paul Irish, Guy Podjarny, Paul Kinlan, Jason Grigsby, Dion Almaer, Christian Heilmann, Stoyan Stefanov, and many more. Their work is inside this book, and if you are not already following them on Twitter, stop reading for a minute and add them to your list.

A big thanks to the technical reviewers, María Evangelina Ferreira, Luca Passani, Anselm Hannemann, Holger Bartel, and Jonathan Barbero. Their comments and ideas were really useful for making this the book I wanted.

Also thanks to the great O’Reilly team who worked in this project: Virginia Wilson, Brian Anderson, and Simon St. Laurent. Thanks, Simon, for trusting me on every new project!

Finally, and really importantly, thanks to my family, who let me take time out for writing, speaking, and teaching. To my parents, my brother, my lovely wife Ani, and my son Matías, who came into our lives while writing this book—being your dad is the best new job I’ve ever had :).