Everything I know
Progressive Web Apps
Content management systems
Don't ever underestimate the cost performance of cache misses.
Bundle size is not your main performance problem (most likely). As long as the cache headers are ok and hosted in a CDN, you are good. Worry about expensive renders or unnecessary network calls before fine-tuning bundle size.
Page speed factors and how to increase it: 1. User's Network: deploy to edge, move code to server for smaller bundles. 2. Server Network and Code: fast regional DBs, caching. 3. Asset Waterfall: Load in parallel, don't chain. 4. Parse/eval: move code to server for smaller bundles.
Rendering on the Web (2019)
Web Performance Mini Series: Animations (2019)
- Statistically rigorous benchmark runner for the web.
Idle Until Urgent (2018)
- Keep your bundle size in check.
Ask HN: How to performance test React webapps for rendering speed regressions? (2019)
Performance metrics for blazingly fast web apps (2019)
- Hinting engine for the web. (
- Global latency testing tool.
Ilya Grigorik | performance.now().reject(reasons) (2019)
You Don't Need
- People choose popular projects, often not because it applies to their problems.
- Page Speed Monitoring.
Front-End Performance Checklist (2020)
- List of performance analysis, monitoring and optimization tools.
Keeping 100% Lighthouse score around the world - Leonardo Zizzamia (2020)
- Monitor and audit web performance. Make meaningful improvements where it matters.
- Helps you monitor, analyze, and optimize your websites. (
Monitoring Performance with the PageSpeed Insights API (2020)
- Set of open source tools that makes it easy to monitor and measure the performance of your web site.
Measuring React app performance (2019)
Profiling React performance with React 16 and Chrome Devtools (2017)
- Web app for Firefox performance analysis.
Do’s and Don’ts for Performance Teams (2020)
- Calculate the real cost to run your JS app or lib to keep good performance. Show error in pull request if the cost exceeds the limit.
- Resources to make web silky smooth.
Visualizing Performance with Flame Graphs (2017)
Awesome performance testing collection
- Go port of Yahoo! Cloud Serving Benchmark.
List of functions which you can use to replace moment.js + ESLint Plugin
- Execute and Document Benchmarks Reproducibly.
- Measure the real, minified, tree-shaken impact of individual imports into your app.
Reflections on software performance (2020)
Fixing memory leaks in web applications (2019)
In-Browser Performance Linting With Feature Policies (2020)
Effective Profiling in Google Chrome (2020)
- Easy insight into the JS loaded by a web app.
Fast Software, the Best Software
Image CDNs can save 40-80% on image byte sizes by automating best practices
Web Performance Working Group
Why We Started Putting Unpopular Assets in Memory
- Status Page for monitoring your websites and applications with beautiful graphs, analytics, and plugins.
I’ve gone to great lengths for this silence
- Storybook addon to help better understand and debug performance for React components.
The Tail At Scale - Jeff Dean (2013)
Building This Website (2020)
- Keep an eye on your packages' footprint.
Annie Sullivan - Understanding Cumulative Layout Shift (2020)
Lighthouse CI Action
- Audit URLs using Lighthouse and test performance with Lighthouse CI.
- Find the cost of adding a new dependency to your project. (
- Test a website's performance. (
Monitor your web page's total memory usage with
- Find the load at which a benchmark falls over.
Build Size Watcher
- Keep your build size in check and detect when it gets too big.
Guide to Chrome's performance profiler (2020)
Server-Side Rendering is a Thiel Truth (2020)
Lighthouse CI Diff
Automating Web Perf measurement with Puppeteer
- Essential metrics for a healthy site. (
Fast or Slow
- Global speed profiler. (
- Robust benchmarking library that supports high-resolution timers & returns statistically significant results.
- Web performance library for measuring all User-centric performance metrics. (
How Khan Academy Successfully Handled 2.5x Traffic in a Week (2020)
- Drop-in solution for sites to prefetch links based on what is in the user's viewport. (
Serve Videos Instead of GIFs (2020)
Why NetNewsWire Is Fast (2020)
The Website Obesity Crisis (2015)
5 Common Mistakes Teams Make When Tracking Performance (2020)
Modern Script Loading (2019)
- Web component framework to easily create user-first web experiences. (
Everything You Have to Know About Core Web Vitals (2020)
Set and Meet Speed Budgets (2020)
Is WebP really better than JPEG? (2020)
An introduction to Web Performance and the Critical Rendering Path (2018)
- Quick way to determine the best build tool for your next web project. (
- Benchmark Static Site Generator web sites over time (ordered by Lighthouse scores). (
Is my host fast yet?
- Leaderboard of hosting providers' TTFB performance. (
- Tiny (800 B) utility to simplify web vitals reporting.
- Tracking framework performance at scale. (
Web Design Guidelines for Low Bandwidth
Environmental web design & use tips
How Fast Should Your Load? (2020)
radEventListener: Client-side Framework Performance (2020)
Tune The Web
- Make your website better today.
The Ultimate Guide to Web Performance (2020)
- Generic interface for PerformanceObserver API.
Getting Postmark’s Lighthouse Performance Score to 100 (2020)
- Benchmark web pages over time. (
- Fast & responsive websites that will bring you joy.
A Bit of Performance (2019)
- Automate running Lighthouse for every commit, viewing the changes, and preventing regressions.
- Provides your Real Experience Score through data from actual visitors. (
- Website performance monitoring.
Low Hanging Fruits in Frontend Performance Optimization (2020)
The Core Web Vitals hype train (2020)
How we improved the Lighthouse score of our landing page to 96 (2020)
- Collection of performance-focused web pages found across the internet. (
Optimizing Your Web App 100x is Like Adding 99 Servers (2020)
s taking too much time? Profile 'em.
Awesome web performance list
Why is the Google Cloud UI so slow? (2020)
Measuring page performance with Puppeteer & Playwright
- Data on third party entities and their impact on the web. (
Maximally optimizing image loading for the web in 2021
Front-End Performance Checklist 2021
- Node.js command line tool that crawls a domain and gathers lighthouse performance data for every page.
How we improved our website's performance (2021)
- Information Source for Web Performance.
Making GitHub’s new homepage fast and performant (2021)
Speed Is the Killer Feature (2021)
The Performance Inequality Gap, 2021
Who has the fastest F1 website in 2021?
Fixing a slow site iteratively (2021)
10 things I learned making the fastest site in the world (2016)
Improving performance at scale (2021)
Google I/O AMA: Web runtime performance (2021)
How to not get sucked into performance micro-optimization territory (2021)
- Simple tools to track and improve your Web Vitals scores. (
How to Eliminate Render-Blocking Resources: a Deep Dive (2021)
Low Bandwidth Images (2021)
- Keep your bundle size in check.
My Challenge to the Web Performance Community (2021)
Notes on optimizing color library (2021)
The Art of Deception, Lighthouse Score Edition (2021)
Measure user flows with Lighthouse (2021)
Building an effective Image Component (2021)
Web Test Runner Performance
- Small plugin for @web/test-runner that enables performance testing including checking module bundle size, tree-shaking and custom element rendering.
- Help you better measure and optimize your page and site quality. (
Awesome Bundle Size
- Awesome list of tools and techniques to make your web bundle size smaller and your web apps load faster.
Memory leaks: the forgotten side of web performance (2022)