0
Cancel
    High Performance Mobile Web: Best Practices for Optimizing Mobile Web Apps

    High Performance Mobile Web: Best Practices for Optimizing Mobile Web Apps

    by Maximiliano Firtman

    eBook

    $19.49
    $19.49
     $33.99 | Save 43%
    or

    Sign In to Checkout with Instant Purchase

    Get Free eBook Sample

    Customer Reviews

      ISBN-13: 9781491913666
    • Publisher: O'Reilly Media, Incorporated
    • Publication date: 09/13/2016
    • Sold by: Barnes & Noble
    • Format: eBook
    • Pages: 326
    • File size: 22 MB
    • Note: This product may take a few minutes to download.

    Maximiliano Firtman (@firt) is a mobile and web developer, trainer, speaker, and writer. He has written many books, including Programming the Mobile Web and jQuery Mobile: Up and Running, published by O'Reilly Media. He is the founder of ITMaster Academy and he has been doing training on native mobile, the web, and performance for 15 years in more than 30 countries.

    Max has a blog about mobile web development at www.mobilexweb.com and he maintains the website www.mobilehtml5.org. He has created dozens of online training courses on Mobile HTML5, Apache Cordova, web performance, and native app development. He keeps an updated list of talks, training materials, and videos at http://firt.mobi.

    Max is a frequent speaker at conferences, including O'Reilly's Fluent and Velocity Conferences, Google Developer Day, Frontend, JSConf, and many other events around the world.

    He has received different recognitions, including Nokia Developer Champion, Adobe Community Champion, Microsoft IE User Agent, BlackBerry Elite developer, and a Google recognition for being one of the most innovative mobile developers.

    Read More

    Table of Contents

    Preface xiii

    1 The Mobile Web World 1

    Form Factors 2

    Mobile Hardware 2

    Mobile Networks 4

    Mobile Operating Systems 7

    Engines 8

    Rendering Engines 8

    Execution Engines 10

    Web Platforms 10

    Web Apps 11

    iOS Home Screen Web Apps 12

    Chrome Home Screen Web Apps 14

    Progressive Web Apps 15

    Summary of Web Apps 16

    Web Views 17

    Native Web Apps 18

    In-App Browsers 18

    Pseudo-Browsers 19

    The Web View on iOS 20

    The Web View on Android 21

    The Web View on Windows 23

    Summary of Web Views 23

    Web Browsers 24

    Stats 24

    Cloud Versus Direct Browsers 25

    Stock Browsers 27

    iOS Browsers 27

    Android Browsers 27

    Windows Browsers 31

    The Mobile Web Is Not Just a Narrow Viewport 31

    2 Where to Measure Performance 33

    Simulators and Emulators 33

    Android 35

    Safari on iOS 41

    Internet Explorer 43

    Microsoft Edge 44

    Real Devices 45

    Open Device Lab 46

    Cloud-Based Services 47

    Network Connection 51

    Desktop Simulators 52

    On-Device Connection Simulators 56

    Selecting Where to Measure Is Important 57

    3 Web Performance Basics 59

    Loading Measurement Basics 59

    The Waterfall Chart 60

    Filmstrip 67

    The HAR Format 68

    Speed Index 71

    What to Measure 75

    Custom Metrics 76

    The RAIL Approach 76

    Responsiveness Measurement Basics 77

    Frames per Second 78

    Profiling Charts 78

    CPU Profiling 79

    Memory Profiling 79

    Mixed Profiling 80

    You Can't Improve Something If You Don't Measure It 82

    4 Measurement Tools 83

    Remote Inspectors 83

    Safari on iOS 83

    Chrome for Android 89

    Internet Explorer and Edge 97

    Vorlon.js 99

    Proxies 99

    Setting Up on Android 99

    Setting Up on iOS 100

    Charles Web Debugging Proxy 100

    Fiddler 101

    On-Device Tools 102

    Online Tools 102

    WebPagetest 102

    PageSpeed Insights 104

    Monitoring Services 105

    The Tools You Need 106

    5 Performance APIs 107

    Measurement APIs 107

    Navigati on Timing 107

    High Resolution Time 113

    Resource Timing 114

    Network APIs 116

    Network Status Events 116

    Network Information 116

    Beacon 119

    HTTP Client Hints 119

    UI APIs 120

    Page Visibility 120

    Request AnimationFrame 121

    Requestldle Callback 123

    User Timing 124

    Future APIs 125

    Frame Timing 125

    Script Timing API 125

    Performance Timeline 126

    Efficient Script Yielding 126

    Using Specs and APIs in Your Favor 127

    6 Optimizing for the First Visit 129

    The HTTP Side 129

    HTTP Version 130

    Redirections 137

    HSTS: Opt-in for HTTPS 140

    App (Spam) Banner 141

    Reducing Requests 148

    Domain Sharding 148

    Cookieless Domains 151

    Freeing Up Our Server 152

    HTML 153

    Semantic Web 153

    Flush the HTML Early 154

    DNS Prefetching 155

    HTML Compression 156

    CSS 157

    Internal Versus External 157

    Only One External File 158

    Loading External CSS 158

    Minifying 161

    Web Fonts 161

    JavaScript 165

    Internal Versus External 165

    Minifying 165

    Loading External JavaScript 166

    Only One External File 169

    Load Events 169

    Images 170

    Responsive Images 171

    Inline Images 175

    Image Files 177

    Goodbye, Animated GIF 178

    Hero Images 178

    CSS Spriting 179

    Don't Forget the Server 179

    Optimizing Using Best Practices 180

    7 Optimizing After First Load 181

    The Cache: Your New Friend 181

    Cache Policy 182

    Expiration Headers 184

    ETag Header 186

    The Vary Specification 186

    Custom Client Cache 187

    Client-Side 187

    Server-Side 188

    Prefetching 188

    Deciding What to Prefetch 188

    When to Start a Prefetch 190

    How to Prefetch 191

    The Offline Experience 194

    Application Cache 196

    The Manifest File 196

    Accessing Online Resources 197

    Fallbacks 198

    Updating the Package 198

    The JavaScript API 200

    Cache Events 201

    Compatibility and Limits 202

    Debugging the Application Cache 203

    Service Workers 205

    Installing the Service Worker 206

    Caching Files 207

    Serving Files 208

    Fetching and Caching 211

    The Cache Storage Interface 211

    Updating Cache 213

    Updating a Service Worker 214

    Debugging Service Workers 215

    Background Sync 217

    Background Periodic Sync 219

    Future Visits Are an Opportunity 220

    8 Optimizing Responsiveness and the Post-Loading Experience 221

    Immediate Feedback 221

    Touch Delay 221

    JavaScript Tasks 223

    Frame Rate 227

    Scrolling Experience 227

    Avoid Large JavaScript Code 229

    Avoid Repainting 230

    CSS Containment 230

    Network Communication 232

    Fetch API 232

    Server-Sent Events 233

    WebSockets 235

    The Post-Loading Experience Is Also Important 236

    9 Responsive Web Design 237

    The Problem 237

    The Real Problem: Responsive Design as a Goal 243

    Responsiveness Versus Users 244

    Alternatives 245

    The Solution: Responsive and Fast 245

    Conditional Loading 246

    Responsive from Big to Small 247

    Responsiveness by Group 247

    More Complex Scenarios 248

    iOS and Android Split Modes 248

    Windows 10 Continuum 251

    Responsive as a Strategy 251

    Does RWD Matter from a User's Point 251

    10 Extreme Mobile Web Performance 253

    Mobile Web Alternatives 253

    The Lucky Numbers 254

    14 KB 255

    The ATF Pattern 256

    Mobile Viewport 258

    Critical CSS Extraction Tools 259

    Lazy Loading 259

    Images 259

    Extreme Responsive Images 259

    Nonblocking Image Decoding 260

    Low-Resolution Images 261

    JavaScript Only as Dessert 263

    Avoid Big Frameworks 263

    Avoid Client-Side Rendering 263

    SD/HD Pattern 264

    The PRPL Pattern 264

    The (Near?) Future 265

    Web Streams 265

    Web Assembly 265

    AMP 265

    Benefits 266

    Controversy 267

    Discovery of AMP Pages 268

    AMP-HTML Template 268

    Requirements 270

    Custom Components 270

    Validation and Debugging 272

    Facebook Instant Articles 273

    The Technical Side 273

    The Distribution Side 275

    The Extreme Side Will Reward You 276

    11 The Native Side of the Web 277

    Web Views on iOS 277

    Goodbye UIWebView 278

    Rendering as an App 279

    Web Views on Android 279

    Basic Setup 279

    Amazon Web View 280

    Crosswalk 280

    What Doesn't Work on Embedded Content 281

    In-App Browsing 282

    Custom Tabs on Android 282

    Safari View Controller 284

    The Same But Different 286

    12 Mobile Web Performance Checklist 287

    Basic Data 287

    Network Checklist 288

    Basic Optimizations 289

    Extreme Optimizations 291

    Measuring Improvement 292

    You've Selected the Red Pill 292

    Index 293

    Available on NOOK devices and apps

    • NOOK eReaders
    • NOOK GlowLight 4 Plus
    • NOOK GlowLight 4e
    • NOOK GlowLight 4
    • NOOK GlowLight Plus 7.8"
    • NOOK GlowLight 3
    • NOOK GlowLight Plus 6"
    • NOOK Tablets
    • NOOK 9" Lenovo Tablet (Arctic Grey and Frost Blue)
    • NOOK 10" HD Lenovo Tablet
    • NOOK Tablet 7" & 10.1"
    • NOOK by Samsung Galaxy Tab 7.0 [Tab A and Tab 4]
    • NOOK by Samsung [Tab 4 10.1, S2 & E]
    • Free NOOK Reading Apps
    • NOOK for iOS
    • NOOK for Android

    Want a NOOK? Explore Now

    Optimize the performance of your mobile websites and webapps to the extreme. With this hands-on book, veteran mobile and web developer Maximiliano Firtman demonstrates which aspects of your site or app slow down the user’s experience, and what you can do to achieve lightning-fast performance. There’s much at stake: if you want to boost your app’s conversion rate, then tackling performance issues is the best way to start.

    Learn tools and techniques for working with responsive web design, images, the network layer, and many other ingredients—plus the metrics to check your progress. Ideal for web developers and web designers with HTML, CSS, JavaScript, and HTTP experience, this is your guide to superior mobile web performance.

    You’ll dive into:

    • Emulators, simulators, and other tools for measuring performance
    • Basic web performance concepts, including metrics, charts, and goals
    • How to get real data from mobile browsers on your real networks
    • APIs and specs for measuring, tracking and improving web performance
    • Insights and tricks for optimizing the first view experience
    • Ways to optimize post-loading experiences and future visits
    • Responsive web design and its performance challenges
    • Tips for extreme performance to achieve best conversion rates
    • How to work with web views inside native apps

    Read More

    Customers Who Bought This Item Also Bought

    Recently Viewed 

    Related Subjects

    Computers
    Computer Programming
    Mobile App Development
    Computers
    Computer Programming
    Mobile App Development
    Sign In Create an Account
    Search Engine Error - Endeca File Not Found