Recommended Guides

Optimize the critical rendering path:

• Critical CSS? Not So Fast!
• Priority Hints - What Your Browser Doesn’t Know (Yet)
• Optimizing resource loading with Priority Hints
• Chrome Resource Priorities and Scheduling
• How To Optimize CSS for Peak Site Performance
• Eliminate render blocking CSS to improve start render time
• Small Bundles, Fast Pages: What To Do With Too Much JavaScript
• How to Eliminate Render-Blocking Resources: a Deep Dive
• The Critical Request: How to Prioritise Requests to Improve Speed
• How to Improve CSS Performance
• The Simplest Way to Load CSS Asynchronously
• CSS audit
• Measuring the Critical Rendering Path
• Inlining or Caching? Both Please!
• CSS and Network Performance
• Analyzing Critical Rendering Path Performance
• Front-End Performance Checklist
• The PRPL Pattern
• Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver
• Optimising the front end for the browser
• Prefer DEFER Over ASYNC
• A comprehensive guide to font loading strategies
• Understanding the critical rendering path, rendering pages in 1 second
• More Weight Doesn’t Mean More Wait

JavaScript Rendering Performance

• Five Data-Loading Patterns To Boost Web Performance
• Optimize long tasks
• The impact of removing jQuery on our web performance
• Profiling & Optimizing the runtime performance with the DevTools Performance tab
• Don't fight the browser preload scanner
• The Web Performance impact of jQuery
• Have Single-Page Apps Ruined the Web? | Transitional Apps
• Improve how you architect webapps
• Nuxt SSR Optimizing Tips, Filip Rakowski
• GPU accelerated JavaScript
• Introducing Partytown 🎉: Run Third-Party Scripts From a Web Worker
• Astro: Astro is a fresh but familiar approach to building websites. Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era. Use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScript—by default.
• Minimising Layout and Layout thrashing for 60 FPS
• Does shadow DOM improve style performance?
• Debugging memory leaks - HTTP 203
• Explore JavaScript Dependencies With Lighthouse Treemap
• The real cost of Javascript dependencies (and the state of JS package quality)
• The State Of Web Workers In 2021
• Techniques for developing high-performance animations
• Building a Faster Web Experience with the postTask Scheduler, Callie (Airbnb Engineering & Data Science)
• Don’t attach tooltips to document.body – Learn how the browser works – Debug forced reflow
• How to Create and Fix Memory Leaks With Chrome DevTools
• JavaScript performance beyond bundle size
• The Import On Interaction Pattern
• The “Live DOM” Is Not “Slow”, “Bad”, Or “Wrong”. Web Developers Are.
• Prevent layout shifts with CSS grid stacks
• content-visibility: the new CSS property that boosts your rendering performance
• Preact vs React - Updating React at Etsy
• The Cost of Javascript Frameworks
• Fixing memory leaks in web applications
• How to load polyfills only when needed
• Responsible JavaScript: Part III - Third parties
• The cost of JavaScript in 2019
• When should you be using Web Workers?
• Responsible Javascript: Part II - Code Bundle
• Faster script loading with BinaryAST?
• Svelte 3: Rethinking reactivity
• Responsible Javascript: Part I - Web platform over frameworks
• JavaScript Loading Priorities in Chrome
• Idle Until Urgent
• Browser painting and considerations for web performance
• The Cost Of JavaScript In 2018 (Video)
• Examining Web Worker Performance
• Front-End Performance Checklist
• jankfree
• What forces layout/reflow?
• Using requestIdleCallback
• Optimize Javascript Execution
• Why Web Developers Need to Care about Interactivity
• Improving Performance with the Paint Timing API
• Deploying ES2015+ Code in Production Today
• Performant Web Animations and Interactions: Achieving 60 FPS
• JavaScript Start-up Performance
• Performant Parallaxing
• The Anatomy of a Frame
• The future of loading CSS
• 4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them
• The cost of frameworks
• FLIP Your Animations