GitHub - imteekay/web-performance-research: ⚡️ Web Performance Research

Web Performance Research This repository is a compilation of resources I consumed over time to gain knowledge and do my own research on web performance. Table of Contents Web Performance Research Table of Contents Architecture Backend Browser Service Workers / Workers Rendering Engines Build tools Cache & Memoization Career Case Studies Community Books Blogs Conferences & Meetups Courses Podcasts Core Web Vitals Cumulative Layout Shift (CLS) Largest Contentful Paint (LCP) First Input Delay (FID) Interaction to Next Paint (INP) Total Blocking Time CSS Fonts Fonts Tools General Why it matters Images Images Tools Infrastructure JavaScript Measuring Performance Runtime Performance DevTools How to metric Benchmark Measure Tools Memory Management Performance Budget Performance Budget Tools Prefetching Prefetching Tools Web Frameworks React React Rendering Measuring React Sustainability Tweets UX Web APIs License Architecture 🎥 Advanced Rendering Patterns 🎥 Rendering on the Web: Performance Implications of Application Architecture 🎥 Stream Away the Wait 🎥 Streaming in Next.js 🎥 What happens before hydration 📝 2023 Web Framework Performance Report 📝 A Modern Take on Cutting the Mustard 📝 Apply instant loading with the PRPL pattern 📝 Comparing SPAs to SSG and SSR 📝 Concurrent mode and partial hydration in React 📝 Conquering JavaScript Hydration 📝 Conquering JavaScript Hydration 📝 Crafting a high-performance TV user interface using React 📝 Flexible Architectures for Web Performance 📝 From Static to Interactive: Why Resumability is the Best Alternative to Hydration 📝 How to do partial hydration in React 📝 Instant Loading Web Apps with an Application Shell Architecture 📝 Islands Architecture 📝 Next.js: The Ultimate Cheat Sheet To Page Rendering 📝 Rendering Fundamentals 📝 Rendering on the Web 📝 Rendering Options on the Web: Server, Client, Static 📝 Rendering Patterns 📝 Server-Side Rendering: How Resumable Beats Hydration 📝 Signals: the nitty-gritty 📝 SPAs: theory versus practice 📝 Suspense hydration in React 📝 The Benefits of Server Side Rendering Over Client Side Rendering 📝 The case of partial hydration (with Next and Preact) 📝 The Future (and the Past) of the Web is Server Side Rendering 📝 Understanding Progressive Enhancement 📝 Understanding Rendering in the Jamstack 📝 Web Rendering Patterns 📝 What is partial hydration and why is everyone talking about it? 📝 Why Efficient Hydration in JavaScript Frameworks is so Challenging Backend 🎥 How NOT to Measure Latency 🎥 Scaling Instagram Infrastructure 📝 A Brief History of Airbnb’s Architecture 📝 Building Services at Airbnb, Part 1 📝 Building Services at Airbnb, Part 2 📝 Building Services at Airbnb, Part 3 📝 Everything You Know About Latency Is Wrong 📝 How Meta Achieves 99.99999999% Cache Consistency 📝 Latency is Everywhere and it Costs You Sales - How to Crush it 📝 Scaling React Server-Side Rendering Browser 🎥 An Introduction to Browser Rendering 🎥 Cache Control 🎥 Cache your fonts, images & pages - Unpacking the Workbox 🎥 Critical rendering path - Crash course on web performance 🎥 Delivering 60 FPS in the browser 🎥 Get Your "head" Straight 🎥 Getting Out Of Users' Way: Less Jank With Web Workers 🎥 How We Used WebAssembly To Speed Up Our Web App By 20X (Case Study) 🎥 In The Loop - setTimeout, micro tasks, requestAnimationFrame, requestIdleCallback 🎥 Optimizing the Critical Rendering Path for Instant Mobile Websites 🎥 Scheduling On and Off the Main Thread 🎥 The main thread is overworked & underpaid 🎥 There is a client-side proxy (ServiceWorker) in your browser 🎥 WebAssembly as cross-platform architecture 📝 60 fps on the mobile web 📝 Accelerated Rendering in Chrome 📝 Accelerating JavaScript (in the browser) 📝 Adaptive Serving using JavaScript and the Network Information API 📝 Add the Priority Hints changes to the html spec 📝 Avoiding layout thrashing — Web Fundamentals 📝 Browser Performance 📝 Conclusions from Off Main Thread & Worker Exploration 📝 Don't Block the Event Loop (or the Worker Pool) 📝 Don't fight the browser preload scanner 📝 Dynamic page content with Cloudflare Workers 📝 Fast is good, instant is better! 📝 Fixing Layout thrashing in the real world | Matt Andrews 📝 Frontend Web Performance: The Essentials 0 📝 Frontend Web Performance: The Essentials 1 📝 Get to know your browser's performance profiler 📝 How JavaScript works: A comparison with WebAssembly + why in certain cases it’s better to use it over JavaScript 📝 How JavaScript works: Deep dive into WebSockets and HTTP/2 with SSE + how to pick the right path 📝 How JavaScript works: The building blocks of Web Workers + 5 cases when you should use them 📝 How the browser renders a web page? — DOM, CSSOM, and Rendering 📝 How to eliminate render blocking resources 📝 How we cut 99% of our JavaScript with Qwik + Partytown 📝 Improving Paint Metrics by Removing Unused Preloads 📝 Introducing Partytown 🎉: Run Third-Party Scripts From a Web Worker 📝 JavaScript DOM Manipulation Performance 📝 JavaScript performance beyond bundle size 📝 Minimizing browser reflow | PageSpeed Insights | Google Developers 📝 Modern Multi-Process Browser Architecture 📝 Notes on how browsers work 📝 Notes on JavaScript Interpreters 📝 Notes on Javascript Memory Profiling in Google Chrome 📝 Now THAT’S What I Call Service Worker! 📝 Optimizing Web Content in UIWebViews and Websites on iOS 📝 Prerender pages in Chrome for instant page navigations 📝 Preventing 'layout thrashing' | Wilson Page 📝 Profiling & Optimizing the runtime performance with the DevTools Performance tab 📝 Proxying Cloudinary image requests with Cloudflare Workers 📝 reflows & repaints: css performance making your javascript slow? 📝 Rendering: repaint, reflow/relayout, restyle / Stoyan 📝 Rendering: repaint, reflow/relayout, restyle 📝 Scrolling performance 📝 Setting up Cloudflare Workers for web performance optimisation and testing 📝 Smaller HTML Payloads with Service Workers 📝 So you heard of Client-Hints and you think you got time, right? Wrong 📝 Understanding Reflow and Repaint in the browser 📝 Use web workers to run JavaScript off the browser's main thread 📝 Using Cloudflare Workers to inline external CSS 📝 We spent a week making Trello boards load extremely fast. Here’s how we did it. - Fog Creek Blog 📝 Web Browser Engineering 📝 Web Workers 📝 WebKit Architecture 📝 What forces layout / reflow 📝 What makes the web slow? browser's bottleneck 📝 When should you be using Web Workers? 📝 wilsonpage/fastdom Service Workers / Workers 🎥 Boost Your Site Performance with Partytown 🎥 Speed Up Your Site with Workers 📝 Cloudflare Worker recipes for frontend performance testing 📝 Get off the main thread with an inline web worker: an example 📝 How Partytown Eliminates Website Bloat From Third-Party Scripts 📝 Introduction to Workbox and service workers 📝 Making the Web Faster with Service Workers and Performance Research 📝 Service worker caching and HTTP caching 📝 Setting up Cloudflare Workers for web performance optimisation and testing 📝 Workbox: JavaScript libraries for Progressive Web Apps 🛠 Partytown Rendering Engines 🎥 JavaScript Engines: The Good Parts 🎥 Life of a Pixel 🎥 Rendering performance inside out 📝 Async vs Defer 📝 RenderingNG: the new rendering engine of chrome 📝 The whole web at maximum FPS: How WebRender gets rid of jank 📝 Why Web Developers Need to Care about Interactivity Build tools 📝 Webpack Tree Shaking 📝 Using Native JavaScript Modules in Production Today 📝 speed-measure-webpack-plugin 📝 Doing Differential Serving in 2019 📝 Publish, ship, and install modern JavaScript for faster applications 📝 Awesome Webpack Perf 📝 Faster JavaScript Builds with Metro 📝 13 Webpack Optimization Tips You Should Know 📝 Finding and fixing duplicates in webpack with Inspectpack 📝 How to Improve Webpack Performance 📝 Webperformance and Compression 📝 Keep webpack Fast: A Field Guide for Better Build Performance :octocat: Webpack Libs Optimizations :octocat: Awesome Webpack Perf Cache & Memoization 🎥 Love your cache: Optimize for the second load Career perfwork: the job board for web performance enthusiasts Full Stack Software Engineer at Mozilla Corp Senior Performance Software Engineer at Mozilla Corp Web Performance Engineer (w/m/d) - Remote or Hamburg at Bagend Software Engineer (L4) - UI Rendering & Performance at Netflix Case Studies 🎥 Building Performance for the Long Term 🎥 Core Web Vitals: Theory and practice 🎥 Lessons learned from performance monitoring in Chrome 🎥 Optimizing Preview Popups 🎥 Performance Signup in React & Transactional Apps with Redux 🎥 Several Components are Rendering: Client Performance at Slack-Scale 📝 300ms Faster: Reducing Wikipedia's Total Blocking Time 📝 A Netflix Web Performance Case Study 📝 A Pinterest Progressive Web App Performance Case Study 📝 A Tinder PWA Performance Case Study 📝 Agrofy: A 70% improvement in LCP correlated to a 76% reduction in load abandonment 📝 Analyzing Wikipedia Users' Perceived Quality of Experience 📝 Building a Better Web - Part 1: A faster YouTube on web 📝 Case Study Renault Group 📝 Case study: Analyzing Notion app performance 📝 Case study: analyzing the Walmart site performance 📝 Crafting a high-performance TV user interface using React 📝 Economic Times quest for fixing INP 📝 Enhancing The New York Times Web Performance with React 18 📝 From Development to Real Users: How to Create a Web Performance Story 📝 Gantry: Slack’s Fast-booting Frontend Framework 📝 How Carpe achieved record-breaking sales by focusing on performance optimization 📝 How CLS optimizations increased Yahoo! JAPAN News's page views per session by 15% 📝 How Mercado Libre optimized for Web Vitals (TBT/FID) 📝 How PubTech's Consent Management Platform reduced INP on their customers' websites by up to 64%, while also improving ad viewability by up to 1.5% 📝 How QuintoAndar increased conversion rates and pages per session by improving page performance 📝 How Rakuten 24's investment in Core Web Vitals increased revenue per visitor by 53.37% and conversion rate by 33.13% 📝 How redBus improved their website's Interaction to Next Paint (INP) and increased sales by 7% 📝 How Sunday Citizen improved conversions by focusing on performance 📝 How to convince your client to focus on Web Performance: a case study 📝 How Trendyol reduced INP by 50%, resulting in a 1% uplift on click-through rate 📝 How We Improved React Loading Times by 70% with Next.js 📝 How we reduced Next.js page size by 3.5x and achieved a 98 Lighthouse score 📝 How Wix improved TTFB with 103 Early Hints 📝 HughesNet vs Tesla: A Case Study in Field Data vs Lab Data 📝 Improve user experience! How we manage the Core Web Vitals on our Yahoo! JAPAN News website 📝 Improving JavaScript Bundle Performance With Code-Splitting 📝 Improving Smashing Magazine’s Web Performance: A Case Study 📝 Journey of Improving React App Performance by 10x 📝 Making GitHub’s new homepage fast and performant 📝 Making instagram.com faster: Code size and execution optimizations (Part 4) 📝 Making Instagram.com faster: Part 1 📝 Making Instagram.com faster: Part 2 📝 Making Instagram.com faster: Part 3 — cache first 📝 NDTV achieved a 55% improvement in LCP by optimizing for Core Web Vitals 📝 Nikkei achieves a new level of quality and performance with their multi-page PWA 📝 Notion's page load and navigation times just got faster 📝 Optimizing Core Web Vitals on a Next.js app 📝 Optimizing INP for a React App & Performance Learnings 📝 Optimizing the Performance of a React Progressive Web App 📝 Performance audit of an Italian news website 📝 Quick Performance Audit - Taiwan COVID Vaccination Website 📝 React Performance Fixes on Airbnb Listing Pages 📝 REI: FCP and LCP improvements 📝 Speed Matters, But It Isn’t Everything 📝 Spotify Performance Profiling 📝 The Impact of Web Performance 📝 The Road to Great Product Performance: The First Steps 📝 Treebo: A React PWA Performance Case Study 📝 Twitter Lite and High Performance React Progressive Web Apps at Scale 📝 Web dev: Case Study 📝 Web performance case study: Wikipedia page previews 📝 Web Performance Regression Detection (Part 1 of 3) 📝 Web Performance Regression Detection (Part 2 of 3) 📝 Web Performance Regression Detection (Part 3 of 3) 📝 Zillow: Bigger, Faster, and More Engaging while on a Budget Community Planet Perfromance Community Web Performance Slack Web Performance Working Group Books 📚 Hands-On JavaScript High Performance 📚 High Performance Browser Networking 📚 High Performance Images 📚 High Performance Mobile Web 📚 High Performance Responsive Design 📚 HTTP/2 in Action 📚 Image Optimization 📚 JPEG Series 📚 Modern Web Performance Optimization 📚 Performance Optimized React Applications 📚 Responsible JavaScript 📚 Time Is Money: The Business Value of Web Performance 📚 Using WebPageTest 📚 Web Browser Engineering 📚 Web Performance in Action Blogs TK Harry Roberts Alex Russell Smashing Magazine - Performance Fershad Irani Modern DevTools Eugenia Zigisova Ivan Akulov Perf perf perf Barry Pollard Simon Hearne Medhat Dawoud Conferences & Meetups Conffab - Performance New York Web Performance Group Perf Now Conf Performance Observer Courses 🇧🇷 Performance Web I: otimizando o front-end 🇧🇷 Performance Web II: Critical Path, HTTP/2 e Resource Hints 🇧🇷 React: otimizando a performance Browser Rendering Optimization JavaScript and the DOM Modern DevTools Setting up DevTools for Performance Testing The React Performance Masterclass Web Performance Masterclass Website Performance Optimization Website Performance Optimization Podcasts Catching Up With Web Performance Chasing Waterfalls Planet Performance Podcast PurePerformance Smashing Podcast Core Web Vitals 🎥 Ask Me Anything - Core Web Vitals 🎥 Deciphering INP and Core Web Vitals 🎥 Exploring the future of Core Web Vitals 🎥 Insight into Core Web Vitals from the Chrome Platform Team 🎥 Lessons learned from performance monitoring in Chrome (Slides) 🎥 Measuring Core Web Vitals 🎥 Optimize for Core Web Vitals 🎥 Optimize for Core Web Vitals 🎥 The business impact of Core Web Vitals 🎥 Website Performance and Core Web Vitals 🎥 What's new in Web Vitals 📝 A performance-focused workflow based on Google tools 📝 An In-Depth Guide To Measuring Core Web Vitals 📝 Analyzing Web Vitals with WebPageTest 📝 Best practices for measuring Web Vitals in the field 📝 Business impact of Core Web Vital optimizations 📝 Cookie Banners and Web Vitals 📝 Core Web Vitals – The Final Countdown 📝 Core Web Vitals Changelog 📝 Core Web Vitals is a Measurable Ranking Factor 📝 Core Web Vitals Optimizer (proven process & open-source tool) 📝 Core Web Vitals Tracking via GA4, BigQuery and Google Data Studio 📝 CSS for Web Vitals 📝 CWV will become a desktop ranking factor in February 2022 📝 Debug Web Vitals in the field 📝 Defining the Core Web Vitals metrics thresholds 📝 Element Timing: One true metric to rule them all? 📝 Evaluating page experience for a better web 📝 Everything we know about Core Web Vitals and SEO 📝 Everything we know about Core Web Vitals and SEO 📝 Faster page loads using server think-time with Early Hints 📝 Feedback wanted: An experimental responsiveness metric 📝 Hands On with the new Responsiveness Metrics 📝 Have Core Web Vitals made the web faster? 📝 How SPA architectures affect Core Web Vitals 📝 How to create a competitive analysis dashboard for Core Web Vitals using Google Data Studio 📝 How to get your page Core Web Vitals from the CrUX API 📝 How to Improve Core Web Vitals 📝 How to Improve Core Web Vitals 📝 How to measure CWVs on SPAs 📝 HTTP Archive: CrUX Report 📝 Improving Core Web Vitals, A Smashing Magazine Case Study 📝 Lighthouse scores as predictors of page-level CrUX data 📝 More time, tools, and details on the page experience update 📝 More time, tools, and details on the page experience update 📝 Optimising Core Web Vitals on SPAs 📝 Optimizing Web Vitals using Lighthouse 📝 Our top Core Web Vitals recommendations for 2023 📝 Send feedback to the Google Core Web Vitals Team 📝 Simulating real users in the lab to debug CLS issues 📝 The do’s and don’ts of Core Web Vitals 📝 The Science Behind Web Vitals 📝 Towards a better responsiveness metric 📝 Towards an animation smoothness metric 📝 Web Vitals - Essential metrics for a healthy site 📝 Web Vitals patterns 📝 Web Vitals patterns 📝 What goes into making a new Web Vital metric 📝 Why lab and field data can be different (and what to do about it) Cumulative Layout Shift (CLS) 🎥 Understanding Cumulative Layout Shift 📝 CLS at BuzzFeed — Part 1: Raising The Floor 📝 CLS at BuzzFeed — Part 2: Getting Help From Real Users 📝 CLS at BuzzFeed — Part 3: Dealing with the unpredictable 📝 Cumulative Layout Shift in Practice 📝 Cumulative Layout Shift in Practice 📝 Cumulative Layout Shift in the Real World 📝 Cumulative Layout Shift in the Real World 📝 Cumulative Layout Shift Study of Over 1 Million Websites 📝 Cumulative Layout Shift: Measure and Avoid Visual Instability 📝 Debug layout shifts 📝 Debugging CLS 📝 Diving Into the New Cumulative Layout Shift 📝 Evolving the CLS metric 📝 How I removed website layout shift using a predeploy script 📝 How To Fix Cumulative Layout Shift (CLS) Issues 📝 How To Fix Cumulative Layout Shift (CLS) Issues 📝 Improving Cumulative Layout Shift at Telegraph Media Group 📝 Measuring Cumulative Layout Shift 📝 Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter CSS property 📝 The Almost-Complete Guide to Cumulative Layout Shift Largest Contentful Paint (LCP) 🎥 How to Fix Largest Contentful Paint 🎥 How to improve Largest Contentful Paint for a better page experience 🎥 Investigating LCP: Largest Contentful Paint 🎥 This Is Your LCP On Images 📝 Case Study Vodafone: A 31% improvement in LCP increased sales by 8% 📝 Dynamic LCP Priority: Learning from Past Visits 📝 Fix Your LCP Score By Improving Render Delay 📝 How to optimize largest contentful paint (LCP) on client side 📝 Improve Largest Contentful Paint (LCP) by removing image transitions 📝 LCP(FE) 📝 Measuring Largest Contentful Paint 📝 Optimising for High Latency Environments 📝 Optimising Largest Contentful Paint 📝 Optimize Largest Contentful Paint 📝 Optimizing resource loading with the Fetch Priority API 📝 Priority Hints and optimizing LCP 📝 Tip - Use fetchpriority=high to load your LCP hero image sooner 📝 Understanding How Browsers Identify the LCP Element 📝 What can the HTTP Archive tell us about Largest Contentful Paint? First Input Delay (FID) 📝 First Input Delay (FID) 📝 Idle Until Urgent 📝 Improving responsiveness in text inputs Interaction to Next Paint (INP) 🎥 Breaking Down Long Tasks 🎥 Debugging INP 🎥 Digging into Interaction to Next Paint 🎥 How to Improve Interaction to Next Paint (INP) 🎥 How to optimize web responsiveness with Interaction to Next Paint 🎥 Interaction to Next Paint and other Web Vitals [BlinkOn 16] 🎥 Interaction to Next Paint Revealed: 5 Truths That Will Speed Up Your Site 🎥 Interaction to Next Paint 🎥 New field insights for debugging INP 🎥 Optimizing INP: A deep dive 🎥 The state of responsiveness on the web 🎥 Understanding and Optimizing Interaction to Next Paint (INP) 📝 7 Ways to Minimize Main Thread Work 📝 Analysis of INP performance using real-world RUMvision data 📝 Avoid large, complex layouts and layout thrashing 📝 Breaking up long tasks 📝 Client-side rendering of HTML and interactivity 📝 Debugging Interaction to Next Paint (INP) 📝 Demystifying INP: New tools and actionable insights 📝 Find slow interactions in the field 📝 Google Chrome web-vitals.js v4 to support LoAF + INP breakdown 📝 How do modern frameworks perform on the new INP metric 📝 How large DOM sizes affect interactivity, and what you can do about it 📝 How To Improve INP: Yield Patterns 📝 How to Improve Interaction to Next Paint (INP) 📝 How to solve Interaction to Next Paint (INP) issues 📝 Improving INP with React 18 and Suspense 📝 Interaction to Next Paint (INP) 📝 Interaction to Next Paint by kev 📝 Introducing the scheduler.yield origin trial 📝 Manually diagnose slow interactions in the lab 📝 Measure And Optimize Interaction to Next Paint (INP) 📝 Mobile INP performance: The elephant in the room 📝 Optimize Interaction to Next Paint 📝 Optimize long tasks 📝 Preparing For Interaction To Next Paint, A New Web Core Vital 📝 Reduce the scope and complexity of style calculations 📝 Script evaluation and long tasks 📝 Sluggish CATs: Category Pages Have the Worst Responsiveness (INP) on e-Commerce Sites 📝 Style Recalculation Secrets They Don't Want You To Know 📝 The Fight For The Main Thread 📝 Use web workers to run JavaScript off the browser's main thread 📝 Web Performance Experts Guide to Mastering Interaction to Next Paint Total Blocking Time 📝 Total Blocking Time: A Short and Sweet Guide for Happier Users CSS 📝 Airbnb’s Trip to Linaria 📝 Benchmarking the performance of CSS @property 📝 CSS-in-JS to Tailwind: 36% better web vitals 📝 Future of runtime CSS-in-JS 📝 Inlining critical CSS 📝 Loading CSS - Performance Cheatsheet 📝 Performance comparison of css-in-js libraries 📝 PurgeCSS 📝 Real-world CSS vs. CSS-in-JS performance comparison 📝 Reduce bundle size via one-letter css classname hash strategy 📝 Style performance and concurrent rendering 📝 The truth about CSS selector performance 📝 Why We're Breaking Up with CSS-in-JS Fonts Can I use woff2 Fonts Tools 🛠 Font Squirrel 🛠 glyphhanger 🛠 Google Fonts 🛠 Variable Fonts General 🎥 Common Mistakes That Degrade Frontend Performance 🎥 Deep dive into third-party performance 🎥 Demystifying Speed Tooling 🎥 Fantastic Frontend Performance Tricks & Why We Do Them 🎥 From fast loading to instant loading 🎥 Improving Page Performance in Modern Web Apps 🎥 Improving Page Performance in Modern Web Apps 🎥 Inclusive Design is Fast by Default 🎥 Next-Level Web Performance 🎥 Speed Essentials: Key Techniques for Fast Websites 🎥 State of Web Performance August 2022 🎥 The Bright Future of Web Performance 🎥 The Path to Performance 🎥 The Psychology of Speed 🎥 The Unbearable Weight of Massive JavaScript 🎥 Top 10 performance pitfalls 🎥 Web performance optimisations for the harsh conditions 🎥 WebBundles – JS Delivery Without the Tradeoffs 🎥 When JavaScript Bytes 🎥 When JavaScript Bytes 🎥 Why performance is hard at scale 📝 3Perf Guides 📝 5 Common Mistakes Teams Make When Tracking Performance 📝 A Management Maturity Model for Performance 📝 A Performance Maturity Matrix 📝 A Unified Theory of Web Performance 📝 An HTML-first Mental Model 📝 Are your JavaScript long tasks frustrating users? 📝 Best practices for tags and tag managers 📝 Building the DOM faster: speculative parsing, async, defer and preload 📝 Building the DOM faster 📝 Chrome’s Paint Flashing Tool 📝 Definitions of web terminology 📝 experiences. Web. frameworks. future. me. 📝 Fast load times 📝 Fast load times 📝 Fixing Performance Regressions Before they Happen 📝 Flame Graphs 📝 From Development to Real Users: How to Create a Web Performance Story 📝 Front-End Performance Checklist 2021 📝 Gantry: Slack’s Fast-booting Frontend Framework 📝 Getting Started with Web Performance 📝 How to Eliminate Render-Blocking Resources: a Deep Dive 📝 Improving React Runtime Performance 📝 Javascript Performance in Extreme Environments 📝 Learn Performance 📝 Learning Web Performance 📝 Loading Performance Overview 📝 Low-Hanging Web Performance Fruits: A Cheat Sheet 📝 Maybe you don't need Rust and WASM to speed up your JS 📝 Monitoring Your Core Web Vital (Performance) Metrics 📝 My Challenge to the Web Performance Community 📝 Optimize SPA bundle size to speed up application loading 📝 Optimizing third-party script loading in Next.js 📝 Performance and the Big Picture 📝 Performant front-end architecture 📝 Small Bundles, Fast Pages: What To Do With Too Much JavaScript 📝 Task Attribution Semantics 📝 Techniques for Optimizing Web Performance 📝 The Impact of Web Performance 📝 The ultimate guide to modern web application performance 📝 The Ultimate Guide to Optimizing JavaScript for Quick Page Loads 📝 The why of website optimisation: Better search ranking 📝 The why of website optimisation: Better user experience 📝 The why of website optimisation: Help the planet 📝 The why of website optimisation: Increase site conversions 📝 The why of website optimisation: Reduce operational costs 📝 Top 5 Performance Recommendations 📝 Web Perf 101 📝 Web Performance: Trends and Insights from 4 Top Performance Experts 📝 Why Performance Matters? 📝 Why Your Cached JavaScript Is Still Slow and Incurs Performance Overhead Why it matters 📝 How to measure the energy consumption of your frontend application 📝 Relating site speed and business metrics 📝 What Is Site-Speed and Why Should I Care? 📝 Why Web Performance Images :octocat: Repository to collect best practices for web images 🎥 A WebP Update 🎥 Faster loading times with AVIF images | Workshop 🎥 Image compression deep-dive 🎥 Image Optimization | performance.now() 2018 🎥 Images blast off at the speed of Jamstack 🎥 JPEG 'files' & Colour (JPEG Pt1) 🎥 JPEG DCT, Discrete Cosine Transform (JPEG Pt2) 🎥 JPEG XL: An Update 🎥 Picture Perfect 🎥 Responsive Images for the Web 🎥 The AVIF Image Format 🎥 WebP, AVIF & More: Image Adoption Stats 📝 Can I use AVIF 📝 Can I use JPEG-XL 📝 Can I use WebP 📝 Picture perfect images with the modern <img> element 📝 Reduce Image Sizes by Removing Metadata 📝 Responsive Images Done Right: A Guide To And srcset 📝 The Ultimate Guide to Image Optimisation 📝 What does the image decoding attribute actually do? Images Tools 🛠 Cloudinary 🛠 Compress-Or-Die 🛠 ImageOptim 🛠 Optimage 🛠 squoosh 🛠 WebPonize Infrastructure 🎥 Mobile Performance from the Radio Up: 4G Architecture and its Implications 📝 Cloud Computing without Containers 📝 Content delivery networks (CDNs) JavaScript 🎥 Multicore JavaScript: Past, Present and Future 📝 13 Tips to Write Faster, Better-Optimized JavaScript 📝 17 Javascript optimization tips to know in 2021 📝 How JavaScript works: an overview of the engine, the runtime, and the call stack 📝 How JavaScript works: Event loop and the rise of Async programming + 5 ways to better coding with async/await 📝 How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code 📝 How JavaScript works: memory management + how to handle 4 common memory leaks 📝 JavaScript Compiler Optimization Techniques— only for Experts Measuring Performance 🎥 Analyze and Improve web performance using devtools & webpagetest 🎥 Crafting Performance Alerting Tools 🎥 From Milliseconds to Millions: The Numbers Driving Web Perf 🎥 How to make sense of real user performance metrics (RUM) 🎥 How’s the UX on the Web, Really? 🎥 Let’s Turn Real User Data Analysis into a Science 🎥 Measuring Performance with SpeedCurve & WPT 🎥 Measuring Real User Performance in the Browser 🎥 Observability for Web Perf 🎥 One Number, Multiple Metrics 🎥 Profiling performance with Harry Roberts 🎥 Web Performance Auditing 📝 A step by step guide to monitoring the competition with the Chrome UX Report 📝 An Introduction to the RUM Archive 📝 Analyze runtime performance 📝 Benchmarking, Profiling, and Optimizing JavaScript libraries 📝 Complete guide to understand and measure the performance of your website 📝 Core Web Vitals Dashboard On Google Analytics 📝 Creating Airbnb’s Page Performance Score 📝 Get Fast, Stay Fast: How To Monitor React Render Performance 📝 How Fast Should Your Site Load? 📝 How to read a WebPageTest Connection View chart 📝 How to read a WebPageTest Waterfall View chart 📝 How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks 📝 Identifying, Auditing, and Discussing Third Parties 📝 Introducing RAIL: A User-Centric Model For Performance 📝 Make sense of flame charts in Performance Tab by example 📝 Measure What You Impact, Not What You Influence 📝 Measuring the performance of Wikipedia visitors’ devices 📝 Measuring web performance, How fast is fast? 📝 My Performance Audit Workflow 📝 Noise Canceling RUM 📝 React Performance Profiling Optimization 📝 Response Times: The 3 Important Limits 📝 Show me the money: Justifying performance improvements using Google Analytics 📝 Start performance tests your browser's address bar 📝 Stress testing site performance 📝 Testing a web page with PageSpeed Insights 📝 Testing Slow Third-Parties with Puppeteer 📝 The RUM Archive and Benford’s Law 📝 The Web Performance Engineer’s Swiss Army Knife 📝 Tracking CPU with Long Tasks API 📝 Tracking real Core Web Vitals scores 📝 Visualize your resources with a free treemap tool 📝 Web Performance Calendar meets RUM 📝 Why is CrUX data different from my RUM data? 📝 Wikipedia’s Worldwide Web: CPU benchmark Runtime Performance 🎥 Performance Testing using Playwright 🛠 A collection of performance tools DevTools 🎥 Chrome DevTools: Performance Tab 🎥 Exploring the Frontend Performance of the National Rail Website with Chrome DevTools 🎥 Improving page performance with Chrome DevTools 🎥 Making images lazy load with Chrome DevTools 🎥 Memory Management Masterclass 🎥 Running a performance profile on the YouTube search box 🎥 Understanding Paint Performance with Chrome DevTools 📝 Comprehensive guide to JavaScript performance analysis using Chrome DevTools 📝 CPU Flame Graphs 📝 Network Throttling in Chrome DevTools How to metric 🎥 Advanced Napkin Math: Estimating System 📝 Faster data visualizations 📝 How to metric 📝 How to read a RUM histogram 📝 Synthetic vs. real user monitoring 📝 What is Real User Monitoring? RUM explained Benchmark 🛠 Adventures in Microbenchmarking 🛠 react-benchmark 🛠 Tachometer 🛠 tinybench Measure Tools 📝 Web Performance Recipes With Puppeteer 🛠 boomerang 🛠 perfsee: a set of tool for measuring and debugging performance of frontend applications 🛠 speedscope 🛠 Treo 🛠 Calibre: Core Web Vitals monitoring for all your sites & Free Website Test Tool Memory Management 📝 A crash course in memory management 📝 Experiments with the JavaScript Garbage Collector Performance Budget 🎥 Core Web Vitals - Measure what matters 🎥 The Cost Of JavaScript 📝 Chrome’s Paint Flashing Tool 📝 Operationalizing Performance with Performance Budgets 📝 Optimizing startup performance 📝 Performance budgets 101 📝 Performance Budgets, Pragmatically 📝 Responsive Design on a Budget 📝 Setting a performance budget 📝 Start Performance Budgeting 📝 The cost of JavaScript in 2019 📝 User-centric performance metrics 📝 Web Performance Budgets are more than mere thresholds Performance Budget Tools 🛠 Browser Calories 🛠 Performance Budget Calculator 🛠 Performance Budget Calculator Prefetching 🎥 The Art of Predictive Prefetch 📝 <link rel=”prefetch/preload”> in webpack 📝 Instant And Consistent Page Load Through Prerendering 📝 Preload, Prefetch And Priorities in Chrome 📝 Speed up next-page navigations with prefetching 📝 Webpack Prefetching/Preloading modules 🛠 preload-webpack-plugin Prefetching Tools 🛠 Faster subsequent page-loads by prefetching in-viewport links during idle time Web Frameworks React 🎥 DOM as a Second-class Citizen 🎥 React 18 Concurrency, Explained 🎥 React Performance Debugging Masterclass 📝 21 Performance Optimization Techniques for React Apps 📝 Death by a thousand useCallbacks 📝 How does React 18 work inside? 📝 How to write performant React apps with Context 📝 How to write performant React code: rules, patterns, do's and don'ts 📝 Improved Next.js and Gatsby page load performance with granular chunking 📝 Mobile Performance of Next.js Sites 📝 New Suspense SSR Architecture in React 18 📝 Next.js Performance: Making a Fast Framework Even Faster 📝 Optimize Data Fetching 📝 Optimizing third-party script loading in Next.js 📝 progressive react 📝 React Concurrency, Explained 📝 React Hooks and Tips to Avoid Useless Component Render Applied on Lists 📝 React Performance – 13 Ways to Optimize Performance of your React App 📝 Reassure: Performance testing companion for React 📝 SSR, Streaming, and CSS-in-JS 📝 Updating React at Etsy 📚 Advanced React 🛠 eslint-plugin-react-perf React Rendering 🎥 A Cartoon Intro to Fiber 🎥 Data Fetching with React Server Components 🎥 Deep diving on Concurrent React 🎥 Inside Fiber: the in-depth overview you wanted 🎥 React Fiber Deep Dive 📝 In-depth explanation of state and props update in React 📝 Inside Fiber: in-depth overview of the new reconciliation algorithm in React 📝 Learning the React reconciliation algorithm with performance measures 📝 React Performance: How to avoid redundant re-renders 📝 React re-renders guide: everything, all at once 📝 React Rendering Order 📝 Server and Client Components 📝 Should you optimize every re-render? 📝 Signal Boosting 📝 The future of rendering in React 📝 Why React Re-Renders Measuring React 🎥 How to use the React Profiler to find and fix Performance Problems 🎥 Profiling React Apps like a Pro 🎥 React Performance with React Dev Tools 📝 Get Fast, Stay Fast: How To Monitor React Render Performance 📝 Measuring JS code performance. Part I: using react-benchmark 📝 Measuring JS code performance. Part II: interaction speed 📝 Measuring React app performance 📝 Performance Profiling a Redux App 📝 Profiling & Optimizing the runtime performance with the DevTools Performance tab 📝 Profiling React.js Performance Sustainability 📝 Core Web Vitals meets sustainability 📝 How Improving Website Performance Can Help Save The Planet 📝 Web Performance + Ecological Impact 📝 Website performance and the planet Tweets Another reason for not declaring React components inside other components Blank page with an embedded tweet. How bad can it be? Check out the new Priority Hints ChromeDevTools Long Tasks Compile Code — Profiling CSS Selector Performance Frontend performance tips to keep top of mind Google Search Console warning the INP How can I optimize my frontend for the fastest page load times? How I typically test performance How Wix improved TTFB with 103 Early Hints Image performance cheatsheet img fetchpriority="high": LCP improvement of ~150ms Investigating Core Web Vital issues mobile performance for sites built with Next.js Optimize head and body separately Optimizing LCP Performance Insights by Builder.io React 18 Concurrency, Explained React 18 Concurrency React Perf: Causal Case Study React Time Slicing Signals — Reactivity + UI Spotify Performance Profiling The difference between "On Load" and "Document Complete" in WebPageTest The most important problems in Web Perf Things I found in a slow React website today Tool: quantify what will make a real difference Use Map over object useCallback and useMemo: no perf effect Video Compression Web Performance at Slack React & Redux performance at Slack Performance Budget UX 🎥 Adaptive Loading - Improving web performance on slow devices 🎥 Building The Web 🎥 Design Principles For The Web 🎥 Measuring User Perceived Performance to Prioritize Product Work 🎥 Perceived Performance: The only kind that really matters 🎥 Stephanie Walter on Cheating The UX When There Is Nothing More To Optimize 🎥 The Layers of the Web 📝 A Bone to Pick with Skeleton Screens 📝 A Designer’s Guide to Perceived Performance 📝 An experimental responsiveness metric 📝 Designing for Performance 📝 Hands On with the new Responsiveness Metrics 📝 How Much Faster is Fast Enough? User Perception of Latency & Latency Improvements in Direct and Indirect Touch 📝 How to Improve Perceived Performance in Mobile Apps 📝 Improving Perceived Performance 📝 Optimistic UI Patterns for Improved Perceived Performance 📝 Performance Design: Designing for the illusion of speed 📝 Performance perception: Correlation to RUM metrics 📝 Performance perception: How satisfied are Wikipedia users? 📝 Performance perception: The effect of late-loading banners 📝 Resilient web design 📝 The Art of UI Skeletons 📝 Towards an animation smoothness metric 📝 True Lies Of Optimistic User Interfaces Web APIs 📝 Every Transition is a Page Transition? 📝 Speed Up Resource Loading with Priority Hints and fetchpriority 📝 Tracking CPU with Long Tasks API 📝 Web Performance APIs Appreciation Post License MIT © TK

Measured star growth

README.md

Web Performance Research

Table of Contents

Architecture

Backend

Browser

Service Workers / Workers

Rendering Engines

Build tools

Cache & Memoization

Career

Case Studies

Community

Books

Blogs

Conferences & Meetups

Courses

Podcasts

Core Web Vitals

Cumulative Layout Shift (CLS)

Largest Contentful Paint (LCP)

First Input Delay (FID)

Interaction to Next Paint (INP)

Total Blocking Time

CSS

Fonts

Fonts Tools

General

Why it matters

Images

Images Tools

Infrastructure

JavaScript

Measuring Performance

Runtime Performance

DevTools

How to metric

Benchmark

Measure Tools

Memory Management

Performance Budget

Performance Budget Tools

Prefetching

Prefetching Tools

Web Frameworks

React

React Rendering

Measuring React

Sustainability

Tweets

UX

Web APIs

License

Explore related projects

freeCodeCamp/freeCodeCamp

donnemartin/system-design-primer

react/react

vuejs/vue