You are previewing High Performance Responsive Design.
O'Reilly logo
High Performance Responsive Design

Book Description

Yes, you can use responsive web design to create high performance, compelling websites. With this practical book, author Tom Barker demonstrates that responsive design is not just a frontend-only approach, but also a philosophy for taking advantage of the entire web stack. Responsive design patterns and anti-patterns, derived from heavily used real-world sites, are guiding principles throughout the book.

Table of Contents

  1. Special Upgrade Offer
  2. Preface
    1. Intended Audience
    2. Chapter Descriptions
    3. Notes
    4. Acknowledgments
  3. 1. State of the Industry of Responsive Design
    1. The Problem with Responsive Design
      1. Observations from Competitive Analysis
        1. Anti-patterns
          1. Load the same content for all devices
          2. Load additional assets
          3. Load images at twice the size
        2. Patterns
          1. Load device-appropriate assets
          2. Serve a dedicated experience from the backend
          3. Lazy load dedicated experience from the frontend
      2. How Did We Not Notice This?
      3. How Did We Get Here?
      4. Why Not Use an MDot?
        1. Resource overhead
        2. Segmented source code
        3. Segmented URL
        4. Pointless redirects
      5. This Matters Because of Scale
    2. Summary
  4. 2. Primer on Performance of Web Applications
    1. The Basics of Measuring Performance
      1. What is Web Performance?
        1. Number of HTTP requests
        2. Page payload
        3. Page load time
    2. Tools to Track Web Performance
    3. Web Runtime Performance
      1. Frames per Second
        1. Monitoring FPS in Google Chrome
          1. Frames mode
      2. Memory Profiling
        1. The MemoryInfo Object
        2. The Timeline tool
    4. Summary
  5. 3. Start with a Plan
    1. A Journey Down the Slippery Slope
    2. Project Plans
      1. Assessing and Summarizing the Overall Task
        1. Establishing rough milestones and timelines
        2. Determining a performance service-level agreement
      2. Crafting Rough Milestones and Timelines
      3. List Dependencies and Risks
        1. Crafting timelines
      4. KPIs That Measure Success
      5. Keep to Your Performance SLA
    3. Summary
  6. 4. The Backend
    1. The Web Stack
      1. The Network Stack
      2. The Application Layer
        1. The HTTP Request
        2. The HTTP Response
      3. Charles
    2. Web Application Stack
    3. Responding on the Server Side
      1. Inspecting the User Agent
      2. Device Detection Services
        1. The Wurfl
        2. Sample Code
    4. Implications of Cache
    5. Edge Side Includes
    6. Summary
  7. 5. The Frontend
    1. Working with Images
      1. The srcset attribute
        1. Device Pixel Ratio
      2. The Picture Element
    2. Lazy Loading
      1. Device Detection Libraries
    3. Summary
  8. 6. Continuous Web Performance Testing
    1. Maintaining a Steady Course
    2. Automating Responsive Web Performance Testing
      1. Automated Headless Browser Testing
        1. Evaluate experiential resource loading
        2. Validate web performance
    3. Continuous Integration
      1. An Example PhantomJS Script
      2. Jenkins
    4. Summary
  9. 7. Frameworks
    1. Looking at the State of Responsive Frameworks
    2. Twitter Bootstrap
      1. Evaluation
    3. ZURB Foundation
    4. Skeleton
      1. Evaluation
    5. Semantic UI
      1. Evaluation
    6. A Comparison of Frontend Frameworks
    7. Ripple
    8. Summary
  10. A. About the Author
  11. B. High Performance Responsive Design
  12. Index
  13. About the Author
  14. Special Upgrade Offer
  15. Copyright