Awesome
<samp>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
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
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
- 🎥 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
- 📝 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
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
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
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
- 📝 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 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)
Interaction to Next Paint (INP)
- 🎥 Breaking Down Long Tasks
- 🎥 Debugging INP
- 🎥 Digging into Interaction to Next Paint
- 🎥 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
- 📝 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
- 📝 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
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
Fonts Tools
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 <picture> And srcset
- 📝 The Ultimate Guide to Image Optimisation
- 📝 What does the image decoding attribute actually do?
Images Tools
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
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
- 📝 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
Measure Tools
- 📝 Web Performance Recipes With Puppeteer
- 🛠 boomerang
- 🛠 perfsee: a set of tool for measuring and debugging performance of frontend applications
- 🛠 speedscope
- 🛠 Treo
Memory Management
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
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
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
- 📝 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