Front-end Performance

Front-end Performance

by Bruno Skvorc, Craig Buckler, Maria Antonietta Perna, Ivan Curic
Released August 2018
Publisher(s): SitePoint
ISBN: 9781925836103

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Performance simply matters. Technology may allow us to "go bigger", but maybe not necessarily be better when it comes to performance. Now is the time to utilize the amazing tools that are available for making websites faster, and to learn how to improve user experience and satisfaction.

This is a practical collection of tutorials on front-end website performance for web developers. It's packed with useful, real world hints and tips that you can use on your sites today. It contains:

  • Which Browsers Should Your Website Support? by Craig Buckler
  • Are Your WordPress Themes Flexible or Fast? by Maria Antonietta Perna
  • Five Techniques to Lazy Load Images for Website Performance by Maria Antonietta Perna
  • Optimizing CSS: ID Selectors and Other Myths by Ivan Curic
  • Optimizing CSS: Tweaking Animation Performance with DevTools by Maria Antonietta Perna
  • Lightning Fast Websites with Prefetching by Maria Antonietta Perna
  • Optimizing Web Fonts for Performance: the State of the Art by Maria Antonietta Perna
  • JavaScript Performance Optimization Tips: An Overview by Ivan Curic
  • 7 Performance Tips for Jank-free JavaScript Animations by Maria Antonietta Perna
  • What Is a CDN and How Does It Work? by Bruno Skvorc

This book is for all front-end developers that want to build sites and apps that run faster. You'll need to be familiar with HTML and CSS and have a reasonable level of understanding of JavaScript in order to follow the discussion.

Publisher resources

View/Submit Errata

Table of contents

  1. Front-End Performance
  2. Notice of Rights
  3. Notice of Liability
  4. Trademark Notice
  5. About SitePoint
  6. Preface
    1. Who Should Read This Book?
    2. Conventions Used
  7. Chapter 1: Which Browsers Should Your Website Support?
    1. What are the Most-used Browsers?
    2. Are Browsers So Different?
    3. Can My Site Work in Every Browser?
    4. Site Owner Recommendations
    5. Web Developer Recommendations
    6. You Haven't Answered the Question!
  8. Chapter 2: Are Your WordPress Themes Flexible or Fast?
    1. Are Flexibility and Performance at Odds When Coding WordPress Themes?
    2. Sometimes Flexibility Wins over Performance
    3. Conclusion
  9. Chapter 3: Five Techniques to Lazy Load Images for Website Performance
    1. What Is Lazy Loading?
    2. Why Should You Care About Lazy Loading Images?
    3. #1 David Walsh's Simple Image Lazy Load and Fade
    4. #2 Robin Osborne's Progressively Enhanced Lazy Loading
    5. #3 Lazy Load XT jQuery Plugin
    6. #4 bLazy.js — Vanilla JavaScript Plugin
    7. #5 Lazy Loading with Blurred Image Effect
    8. Conclusion
  10. Chapter 4: Optimizing CSS: ID Selectors and Other Myths
    1. The Basics of CSS Parsing
    2. Measuring the Performance
    3. Quality over Quantity
    4. The Elephant in the Room: Style Invalidation
    5. Conclusion
  11. Chapter 5: Optimizing CSS: Tweaking Animation Performance with DevTools
    1. Developer Tools for CSS Performance
    2. Exploring the Performance Tool in Firefox
    3. Only Animate CSS Opacity, Transforms and Filters
    4. Resources
  12. Chapter 6: Lightning Fast Websites with Prefetching
    1. What Is Prefetching?
    2. DNS-Prefetching
    3. Link Prefetching
    4. Page Prefetching/Prerendering
    5. Use Cases for Link Prefetching and Prerendering
    6. Resources
    7. Conclusion
  13. Chapter 7: Optimizing Web Fonts for Performance: the State of the Art
    1. Why Custom Web Fonts?
    2. What Is the Flash of Invisible Text (FOIT) All About?
    3. Tips on Optimizing Custom Font Files
    4. Tackling FOIT
    5. The Future: The CSS font-display Property
    6. What About FOUT?
    7. Conclusion
  14. Chapter 9: JavaScript Performance Optimization Tips: An Overview
    1. Setting the Stage
    2. What Exactly Is Performant JS Code?
    3. Context is Everything
    4. Parsing, Compiling and Executing
    5. Bundle Sizes are Everything
    6. Conclusion
  15. Chapter 9: 7 Performance Tips for Jank-free JavaScript Animations
    1. 1. Avoid Animating Expensive CSS Properties
    2. 2. Promote Elements You Want to Animate to Their Own Layer (with Caution)
    3. 3. Replace setTimeOut/setInterval with requestAnimationFrame
    4. 4. Decouple Events from Animations in Your Code
    5. 5. Avoid Long-running JavaScript Code
    6. 6. Leverage the Browser’s DevTools to Keep Performance Issues in Check
    7. 7. Use an Off-screen Canvas for Complex Drawing Operations
    8. Conclusion
  16. Chapter 10: What Is a CDN and How Does It Work?
    1. CDN Basics
    2. Types of CDNs
    3. Biggest Players
    4. Implementation Process
    5. Conclusion

Product information

  • Title: Front-end Performance
  • Author(s): Bruno Skvorc, Craig Buckler, Maria Antonietta Perna, Ivan Curic
  • Release date: August 2018
  • Publisher(s): SitePoint
  • ISBN: 9781925836103