| |
| |
| Foreword | |
| |
| |
| |
| From the Editor | |
| |
| |
| |
| About the Authors | |
| |
| |
| Preface | |
| |
| |
| |
| WebPagetest Internals | |
| |
| |
| |
| Function Interception | |
| |
| |
| Code Injection | |
| |
| |
| Resulting Browser Architecture | |
| |
| |
| Get the Code | |
| |
| |
| Browser Advancements | |
| |
| |
| |
| IocalStorage Read Performance | |
| |
| |
| |
| The Benchmark | |
| |
| |
| What's Going On? | |
| |
| |
| Optimization Strategy | |
| |
| |
| Follow Up | |
| |
| |
| |
| Why Inlining Everything Is NOT the Answer | |
| |
| |
| |
| No Browser Caching | |
| |
| |
| No Edge Caching | |
| |
| |
| No Loading On-Demand | |
| |
| |
| Invalidates Browser Look-Ahead | |
| |
| |
| Flawed Solution: Inline Everything only on First Visit | |
| |
| |
| Summary and Recommendations | |
| |
| |
| |
| The Art and Craft of the Async Snippet | |
| |
| |
| |
| The Facebook Plug-ins JS SDK | |
| |
| |
| Design Goals | |
| |
| |
| The Snippet | |
| |
| |
| Appending Alternatives | |
| |
| |
| Whew! | |
| |
| |
| What's Missing? | |
| |
| |
| First Parties | |
| |
| |
| Parting Words: On the Shoulders of Giants | |
| |
| |
| |
| Carrier Networks: Down the Rabbit Hole | |
| |
| |
| |
| Variability | |
| |
| |
| Latency | |
| |
| |
| Transcoding | |
| |
| |
| Gold in Them There Hills | |
| |
| |
| 4G Won't Save Us | |
| |
| |
| Where Do We Go from Here? | |
| |
| |
| Light at the End of the Tunnel | |
| |
| |
| |
| The Need for Parallelism in HTTP | |
| |
| |
| |
| Introduction: Falling Down the Stairs | |
| |
| |
| Current Best Practices: Working around HTTP | |
| |
| |
| Experiment: Mining the HTTP Archive | |
| |
| |
| Results: Serialization Abounds | |
| |
| |
| Recommendations: Time to Fix the Protocols | |
| |
| |
| |
| Automating Website Performance | |
| |
| |
| |
| |
| FrontendSPOF in Beijing | |
| |
| |
| |
| Business Insider | |
| |
| |
| CNET | |
| |
| |
| O'Reilly Radar | |
| |
| |
| The Cause of Frontend SPOF | |
| |
| |
| Avoiding Frontend SPOF | |
| |
| |
| Call to Action | |
| |
| |
| |
| All about YSlow | |
| |
| |
| |
| |
| Secrets of High Performance Native Mobile Applications | |
| |
| |
| |
| Keep an Eye on Your Waterfalls | |
| |
| |
| Compress Those Resources | |
| |
| |
| Don't Download the Same Content Twice | |
| |
| |
| Can Too Much Adriana Lima Slow You Down? | |
| |
| |
| Epilogue | |
| |
| |
| |
| Pure CSS3 Images? Hmm, Maybe Later | |
| |
| |
| |
| The Challenge | |
| |
| |
| Getting My Hands Dirty with CSS3 Cooking | |
| |
| |
| Cross-Browser Results | |
| |
| |
| Benchmarking | |
| |
| |
| Payload | |
| |
| |
| Rendering | |
| |
| |
| Are We There Yet? | |
| |
| |
| Appendix: Code Listings | |
| |
| |
| HTML | |
| |
| |
| CSS | |
| |
| |
| |
| Useless Downloads of Background Images in Android | |
| |
| |
| |
| The Android Problem | |
| |
| |
| And the Lack of Solution | |
| |
| |
| |
| Timing the Web | |
| |
| |
| |
| Conclusion | |
| |
| |
| |
| I See HTTP | |
| |
| |
| |
| Some details | |
| |
| |
| Walkthrough | |
| |
| |
| Todos | |
| |
| |
| The Road Ahead | |
| |
| |
| All I Want for Christmas | |
| |
| |
| |
| Using Intelligent Caching to Avoid the Bot Performance Tax | |
| |
| |
| |
| |
| A Practical Guide to the Navigation Timing API | |
| |
| |
| |
| Why You Should Care | |
| |
| |
| Collecting Navigation Timing Timestamps and Turning Them into Useful Measurements | |
| |
| |
| Using Google Analytics as a Performance Data Warehouse | |
| |
| |
| Reporting on Performance in Google Analytics | |
| |
| |
| Limitations | |
| |
| |
| Final Thoughts | |
| |
| |
| |
| How Response Times Impact Business | |
| |
| |
| |
| |
| Mobile UI Performance Considerations | |
| |
| |
| |
| Battery Life | |
| |
| |
| Latency | |
| |
| |
| Embedding CSS and JS: A Best Practice? | |
| |
| |
| Memory | |
| |
| |
| Optimize Images | |
| |
| |
| Weigh the Benefits of CSS | |
| |
| |
| GPU Benefits and Pitfalls | |
| |
| |
| Viewport: Out of Sight Does Not Mean Out of Mind | |
| |
| |
| Minimize the DOM | |
| |
| |
| UI Responsiveness | |
| |
| |
| Summary | |
| |
| |
| |
| Stop Wasting Your Time Using the Google Analytics Site Speed Report | |
| |
| |
| |
| Problem: A Bug in Firefox Implementation of the Navigation Timing API | |
| |
| |
| Solution: Filter Out the Firefox Timings in Google Analytics | |
| |
| |
| Good News: The Bug Was Fixed in Firefox 9 | |
| |
| |
| Closing Remark | |
| |
| |
| |
| Beyond Web Developer Tools: Strace | |
| |
| |
| |
| What About Other Platforms? | |
| |
| |
| Getting Started | |
| |
| |
| Zeroing In | |
| |
| |
| Example: Local Storage | |
| |
| |
| We've Only Scratched the Surface | |
| |
| |
| |
| Introducing mod_spdy: A SPDY Module for the Apache HTTP Server | |
| |
| |
| |
| Getting Started with mod_spdy | |
| |
| |
| SPDY and Apache | |
| |
| |
| Help to Improve mod_spdy | |
| |
| |
| |
| Lazy Evaluation of CommonJS Modules | |
| |
| |
| |
| Close Encounters of the Text/JavaScript Type | |
| |
| |
| Lazy Loading | |
| |
| |
| Lazy Evaluation to the Rescue | |
| |
| |
| Building Lazy Evaluation into CommonJS Modules | |
| |
| |
| |
| Advice on Trusting Advice | |
| |
| |
| |
| |
| Why You're Probably Reading Your Performance Measurement Results Wrong (At Least You're in Good Company) | |
| |
| |
| |
| The Methodology | |
| |
| |
| The Results | |
| |
| |
| Conclusions | |
| |
| |
| Why Does This Matter? | |
| |
| |
| Takeaways | |
| |
| |
| |
| Lossy Image Compression | |
| |
| |
| |
| Lossy Compression | |
| |
| |
| |
| Performance Testing with Selenium and JavaScript | |
| |
| |
| |
| Recording Data | |
| |
| |
| Collecting and Analyzing the Data | |
| |
| |
| Sample Results | |
| |
| |
| Benefits | |
| |
| |
| Closing Words | |
| |
| |
| Credits | |
| |
| |
| |
| A Simple Way to Measure Website Performance | |
| |
| |
| |
| Concept | |
| |
| |
| Advantages | |
| |
| |
| Limitation | |
| |
| |
| Conclusion | |
| |
| |
| |
| Beyond Bandwidth: Ul Performance | |
| |
| |
| |
| Introduction | |
| |
| |
| After the Page Loads: The UI Layer | |
| |
| |
| UI Profilers | |
| |
| |
| CSS Stress Test | |
| |
| |
| CSS Profilers | |
| |
| |
| CSS Lint | |
| |
| |
| DOM Monster | |
| |
| |
| Perception of Speed | |
| |
| |
| Tidbits | |
| |
| |
| Call for a Focus on UI Performance | |
| |
| |
| |
| CSS Selector Performance Has Changed! (For the Better) | |
| |
| |
| |
| Style Sharing | |
| |
| |
| Rule Hashes | |
| |
| |
| Ancestor Filters | |
| |
| |
| Fast Path | |
| |
| |
| What Is It Still Slow? | |
| |
| |
| |
| Losing Your Head with PhantomJS and confess.js | |
| |
| |
| |
| Performance Summaries | |
| |
| |
| App Cache Manifest | |
| |
| |
| Onward and Upward | |
| |
| |
| |
| Measure Twice, Cut Once | |
| |
| |
| |
| Identifying Pages/Sections | |
| |
| |
| Identifying Features | |
| |
| |
| Optimizing | |
| |
| |
| |
| When Good Backends Go Bad | |
| |
| |
| |
| What Is a Good Backend Time? | |
| |
| |
| Figuring Out What Is Going On | |
| |
| |
| Fixing It | |
| |
| |
| Finally | |
| |
| |
| |
| Web Font Performance: Weighing @font-face Options and Alternatives | |
| |
| |
| |
| Font Hosting Services Versus Rolling Your Own | |
| |
| |
| What the FOUT? | |
| |
| |
| Removing Excess Font Glyphs | |
| |
| |
| JavaScript Font Loaders | |
| |
| |
| Introducing Boot.getFont: A Fast and Tiny Web Font Loader | |
| |
| |
| Gentlefonts, Start Your Engines! | |
| |
| |
| My Observations | |
| |
| |
| Final Thoughts | |