This repository is a compilation of resources I consumed over time to gain knowledge and do my own research on web performance.
- Architecture
- Backend
- Browser
- Build tools
- Cache & Memoization
- Career
- Case Studies
- Community
- Core Web Vitals
- CSS
- Fonts
- General
- Images
- Infrastructure
- JavaScript
- Measuring Performance
- Performance Budget
- Prefetching
- Web Frameworks
- Sustainability
- Tweets
- UX
- Web APIs
- π₯ 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
- π 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
- π what is partial hydration and why is everyone talking about it?
- π Why Efficient Hydration in JavaScript Frameworks is so Challenging
- π₯ 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 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
- π₯ 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
- π₯ 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
- π 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
- 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
- π₯ 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
- π 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
- π Zillow: Bigger, Faster, and More Engaging while on a Budget
- π 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
- 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
- π§π· 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
- Catching Up With Web Performance
- Chasing Waterfalls
- Planet Performance Podcast
- PurePerformance
- Smashing Podcast
- π₯ 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)
- π₯ 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
- π₯ 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?
- π₯ 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
- π₯ 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)
- π 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 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)
- π 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
- π 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
- π Airbnbβs Trip to Linaria
- π 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
- π₯ 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
- π 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
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
- π₯ Mobile Performance from the Radio Up: 4G Architecture and its Implications
- π Cloud Computing without Containers
- π Content delivery networks (CDNs)
- π₯ 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
- π₯ 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
- π₯ 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
- π CPU Flame Graphs
- π Network Throttling in Chrome DevTools
- π Faster data visualizations
- π How to metric
- π How to read a RUM histogram
- π Synthetic vs. real user monitoring
- π What is Real User Monitoring? RUM explained
- π Web Performance Recipes With Puppeteer
- π boomerang
- π perfsee: a set of tool for measuring and debugging performance of frontend applications
- π speedscope
- π Treo
- π₯ 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
- π₯ 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
- π₯ DOM as a Second-class Citizen
- π₯ React 18 Concurrency, Explained
- π 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
- π₯ 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
- π₯ 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
- π Core Web Vitals meets sustainability
- π How Improving Website Performance Can Help Save The Planet
- π Web Performance + Ecological Impact
- π Website performance and the planet
- 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
- π₯ 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