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
- General
- Images
- Infrastructure
- JavaScript
- Measuring Performance
- Runtime Performance
- DevTools
- How to metric
- Benchmark
- Measure Tools
- Memory Management
- Performance Budget
- Prefetching
- 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
- Everything You Know About Latency Is Wrong
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
- Webpack Libs Optimizations
- 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
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)
- 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
- ? 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
- 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
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
- 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
- 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
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
- 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