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

Community Questions