O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

High Performance Mobile Web

High Performance Mobile Web

by Maximiliano Firtman
Publisher: O'Reilly Media, Inc.
Release Date: September 2016
ISBN: 9781491912546
View table of contents
Start reading

Book Description

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

Table of Contents

  1. Preface
    1. Who Should Read This Book
    2. A Word on “Mobile Web” Today
    3. Navigating This Book
    4. Online Resources
    5. Conventions Used in This Book
    6. Safari® Books Online
    7. How to Contact Us
    8. Acknowledgments
  2. 1. The Mobile Web World
    1. Form Factors
    2. Mobile Hardware
    3. Mobile Networks
    4. Mobile Operating Systems
    5. Engines
      1. Rendering Engines
      2. Execution Engines
    6. Web Platforms
    7. Web Apps
      1. iOS Home Screen Web Apps
      2. Chrome Home Screen Web Apps
      3. Progressive Web Apps
      4. Summary of Web Apps
    8. Web Views
      1. Native Web Apps
      2. In-App Browsers
      3. Pseudo-Browsers
      4. The Web View on iOS
      5. The Web View on Android
      6. The Web View on Windows
      7. Summary of Web Views
    9. Web Browsers
      1. Stats
      2. Cloud Versus Direct Browsers
      3. Stock Browsers
      4. iOS Browsers
      5. Android Browsers
      6. Windows Browsers
    10. The Mobile Web Is Not Just a Narrow Viewport
  3. 2. Where to Measure Performance
    1. Simulators and Emulators
      1. Android
      2. Safari on iOS
      3. Internet Explorer
      4. Microsoft Edge
    2. Real Devices
      1. Open Device Lab
      2. Cloud-Based Services
    3. Network Connection
      1. Desktop Simulators
      2. On-Device Connection Simulators
    4. Selecting Where to Measure Is Important
  4. 3. Web Performance Basics
    1. Loading Measurement Basics
      1. The Waterfall Chart
      2. Filmstrip
      3. The HAR Format
      4. Speed Index
      5. What to Measure
      6. Custom Metrics
      7. The RAIL Approach
    2. Responsiveness Measurement Basics
      1. Frames per Second
      2. Profiling Charts
      3. CPU Profiling
      4. Memory Profiling
      5. Mixed Profiling
    3. You Can’t Improve Something If You Don’t Measure It
  5. 4. Measurement Tools
    1. Remote Inspectors
      1. Safari on iOS
      2. Chrome for Android
      3. Internet Explorer and Edge
      4. Vorlon.js
    2. Proxies
      1. Setting Up on Android
      2. Setting Up on iOS
      3. Charles Web Debugging Proxy
      4. Fiddler
    3. On-Device Tools
    4. Online Tools
      1. WebPagetest
      2. PageSpeed Insights
    5. Monitoring Services
    6. The Tools You Need
  6. 5. Performance APIs
    1. Measurement APIs
      1. Navigation Timing
      2. High Resolution Time
      3. Resource Timing
    2. Network APIs
      1. Network Status Events
      2. Network Information
      3. Beacon
    3. HTTP Client Hints
    4. UI APIs
      1. Page Visibility
      2. requestAnimationFrame
      3. requestIdleCallback
      4. User Timing
    5. Future APIs
      1. Frame Timing
      2. Script Timing API
      3. Performance Timeline
      4. Efficient Script Yielding
    6. Using Specs and APIs in Your Favor
  7. 6. Optimizing for the First Visit
    1. The HTTP Side
      1. HTTP Version
      2. Redirections
      3. HSTS: Opt-in for HTTPS
      4. App (Spam) Banner
    2. Reducing Requests
      1. Domain Sharding
      2. Cookieless Domains
      3. Freeing Up Our Server
    3. HTML
      1. Semantic Web
      2. Flush the HTML Early
      3. DNS Prefetching
      4. HTML Compression
    4. CSS
      1. Internal Versus External
      2. Only One External File
      3. Loading External CSS
      4. Minifying
      5. Web Fonts
    5. JavaScript
      1. Internal Versus External
      2. Minifying
      3. Loading External JavaScript
      4. Only One External File
      5. Load Events
    6. Images
      1. Responsive Images
      2. Inline Images
      3. Image Files
      4. Goodbye, Animated GIF
      5. Hero Images
      6. CSS Spriting
    7. Don’t Forget the Server
    8. Optimizing Using Best Practices
  8. 7. Optimizing After First Load
    1. The Cache: Your New Friend
      1. Cache Policy
      2. Expiration Headers
      3. ETag Header
      4. The Vary Specification
    2. Custom Client Cache
      1. Client-Side
      2. Server-Side
    3. Prefetching
      1. Deciding What to Prefetch
      2. When to Start a Prefetch
      3. How to Prefetch
    4. The Offline Experience
    5. Application Cache
      1. The Manifest File
      2. Accessing Online Resources
      3. Fallbacks
      4. Updating the Package
      5. The JavaScript API
      6. Cache Events
      7. Compatibility and Limits
      8. Debugging the Application Cache
    6. Service Workers
      1. Installing the Service Worker
      2. Caching Files
      3. Serving Files
      4. Fetching and Caching
      5. The Cache Storage Interface
      6. Updating Cache
      7. Updating a Service Worker
      8. Debugging Service Workers
      9. Background Sync
      10. Background Periodic Sync
    7. Future Visits Are an Opportunity
  9. 8. Optimizing Responsiveness and the Post‑Loading Experience
    1. Immediate Feedback
      1. Touch Delay
      2. JavaScript Tasks
    2. Frame Rate
      1. Scrolling Experience
      2. Avoid Large JavaScript Code
      3. Avoid Repainting
      4. CSS Containment
    3. Network Communication
      1. Fetch API
      2. Server-Sent Events
      3. WebSockets
    4. The Post-Loading Experience Is Also Important
  10. 9. Responsive Web Design
    1. The Problem
      1. The Real Problem: Responsive Design as a Goal
      2. Responsiveness Versus Users
    2. Alternatives
    3. The Solution: Responsive and Fast
      1. Conditional Loading
      2. Responsive from Big to Small
      3. Responsiveness by Group
    4. More Complex Scenarios
      1. iOS and Android Split Modes
      2. Windows 10 Continuum
    5. Responsive as a Strategy
    6. Does RWD Matter from a User’s Point of View?
  11. 10. Extreme Mobile Web Performance
    1. Mobile Web Alternatives
    2. The Lucky Numbers
    3. 14 KB
    4. The ATF Pattern
      1. Mobile Viewport
      2. Critical CSS Extraction Tools
      3. Lazy Loading
    5. Images
      1. Extreme Responsive Images
      2. Nonblocking Image Decoding
      3. Low-Resolution Images
    6. JavaScript Only as Dessert
      1. Avoid Big Frameworks
      2. Avoid Client-Side Rendering
    7. SD/HD Pattern
    8. The PRPL Pattern
    9. The (Near?) Future
      1. Web Streams
      2. WebAssembly
    10. AMP
      1. Benefits
      2. Controversy
      3. Discovery of AMP Pages
      4. AMP-HTML Template
      5. Requirements
      6. Custom Components
      7. Validation and Debugging
    11. Facebook Instant Articles
      1. The Technical Side
      2. The Distribution Side
    12. The Extreme Side Will Reward You
  12. 11. The Native Side of the Web
    1. Web Views on iOS
      1. Goodbye UIWebView
      2. Rendering as an App
    2. Web Views on Android
      1. Basic Setup
      2. Amazon WebView
      3. Crosswalk
    3. What Doesn’t Work on Embedded Content
    4. In-App Browsing
      1. Custom Tabs on Android
      2. Safari View Controller
    5. The Same But Different
  13. 12. Mobile Web Performance Checklist
    1. Basic Data
    2. Network Checklist
    3. Basic Optimizations
    4. Extreme Optimizations
    5. Measuring Improvement
    6. You’ve Selected the Red Pill
  14. Index