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