Web performance ​

Use web.dev & WebPage tests to see web page performance. I love using Solid for building both web apps and static sites. I try and use lean and efficient frameworks/APIs whenever I can.

Local databases that persist not just data but UI is neat concept. Calibre seems nice too. This series is a nice read.

Qwik has nice ideas around resumability.

Web Performance Research has nice links/notes.

Making the world’s fastest website, and other mistakes is a great read.

Notes ​

• 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.
• Cache dashboard data in Redis on server instead of react-query in the browser. Revalidate it after requests (on an interval so you don't overwork it with high traffic). Expire + push into the cache after writes. Backend investment will yield far greater perf than client.
• Often times a “slow” website is literally because it is loading megabytes of 3rd party crap when the app logic itself can be <200kb using any framework. That 5kb you save by not having to use a state management lib is insignificant compared to these. The difference made by choice of framework is insignificant if the payload is dominated by 3rd party bloat.
• Have database and app hosted off the same region as each other.
• Few things will teach you more about web development than running your web app through WebPageTest, and working to fix everything that sucks.
• WebPageTest can compare waterfalls from two tests
• Unless you're applying the ultimate list of colossal worst programming practices to your backend server, your first, biggest bottleneck is going to be the database. Optimize that. Minimize the number of roundtrips, the number of queries, the complexity of the queries. Profile. Study what your query planner tells you. Few, if any, Rust crates will help you there. It's a SQL problem. Then once you've hit the limit of what you can do there, add a caching layer or two. Learn to love Redis. Understand the nightmare of cache invalidation. Few, if any, Rust crates will help you there. It's a design problem.

Links ​

• Rendering on the Web (2019)
• Web Performance Mini Series: Animations (2019)
• tachometer - Statistically rigorous benchmark runner for the web.
• Idle Until Urgent (2018)
• bundlesize - 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)
• webhint - Hinting engine for the web. (Web)
• Latency - 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.
• Treo - Page Speed Monitoring.
• Front-End Performance Checklist (2020)
• Perf Tooling - List of performance analysis, monitoring and optimization tools.
• Keeping 100% Lighthouse score around the world - Leonardo Zizzamia (2020)
• Calibre - Monitor and audit web performance. Make meaningful improvements where it matters.
• Web bloat
• Falco - Helps you monitor, analyze, and optimize your websites. (Code)
• Monitoring Performance with the PageSpeed Insights API (2020)
• Sitespeed.io - 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)
• Firefox Profiler - Web app for Firefox performance analysis.
• Do’s and Don’ts for Performance Teams (2020)
• Size Limit - 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.
• Jank Free - Resources to make web silky smooth.
• Visualizing Performance with Flame Graphs (2017)
• Awesome performance testing collection
• go-ycsb - Go port of Yahoo! Cloud Serving Benchmark.
• List of functions which you can use to replace moment.js + ESLint Plugin
• Meaningful Availability
• ReBench - Execute and Document Benchmarks Reproducibly.
• import-size - Measure the real, minified, tree-shaken impact of individual imports into your app.
• Reflections on software performance (2020) (HN)
• Fixing memory leaks in web applications (2019)
• In-Browser Performance Linting With Feature Policies (2020)
• Effective Profiling in Google Chrome (2020)
• bundle-wizard - 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 (Code)
• Why We Started Putting Unpopular Assets in Memory (Lobsters)
• Statping - Status Page for monitoring your websites and applications with beautiful graphs, analytics, and plugins.
• I’ve gone to great lengths for this silence (Lobsters)
• storybook-addon-performance - Storybook addon to help better understand and debug performance for React components.
• The Tail At Scale - Jeff Dean (2013)
• Building This Website (2020)
• Performance Resources
• PackWatch - 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.
• Package Phobia - Find the cost of adding a new dependency to your project. (Code)
• WebPageTest - Test a website's performance. (Code)
• WebPageTest API Wrapper for NodeJS
• Monitor your web page's total memory usage with performance.measureMemory() (HN)
• cliff - 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) (Lobsters) (HN)
• Lighthouse CI Diff
• Automating Web Perf measurement with Puppeteer
• Web Vitals - Essential metrics for a healthy site. (Article) (HN) (Extension) (Code)
• The Cost of Javascript Frameworks (2020) (HN)
• 0x10 Rules
• Fast or Slow - Global speed profiler. (HN)
• Benchmark.js - Robust benchmarking library that supports high-resolution timers & returns statistically significant results.
• Perfume.js - Web performance library for measuring all User-centric performance metrics. (Docs)
• How Khan Academy Successfully Handled 2.5x Traffic in a Week (2020) (HN)
• Quicklink - Drop-in solution for sites to prefetch links based on what is in the user's viewport. (Code) (Article)
• Serve Videos Instead of GIFs (2020) (Lobsters) (HN)
• Why NetNewsWire Is Fast (2020) (HN)
• The Website Obesity Crisis (2015)
• 5 Common Mistakes Teams Make When Tracking Performance (2020)
• Modern Script Loading (2019)
• AMP - Web component framework to easily create user-first web experiences. (Code)
• Everything You Have to Know About Core Web Vitals (2020)
• Set and Meet Speed Budgets (2020)
• Is WebP really better than JPEG? (2020) (Lobsters)
• Everything Addy Osmani Hates About JavaScript (2020)
• An introduction to Web Performance and the Critical Rendering Path (2018)
• Tooling.Report - Quick way to determine the best build tool for your next web project. (Code) (Tweet)
• Speedlify - Benchmark Static Site Generator web sites over time (ordered by Lighthouse scores). (Article)
• Is my host fast yet? - Leaderboard of hosting providers' TTFB performance. (Code)
• web-vitals-reporter - Tiny (800 B) utility to simplify web vitals reporting.
• Perf Track - Tracking framework performance at scale. (Code)
• Wikipedia's JavaScript initialisation on a budget (2020) (Lobsters)
• Web Design Guidelines for Low Bandwidth
• Environmental web design & use tips
• How Fast Should Your Load? (2020)
• radEventListener: Client-side Framework Performance (2020) (HN)
• Tune The Web - Make your website better today.
• The Ultimate Guide to Web Performance (2020)
• Performance Observer - Generic interface for PerformanceObserver API.
• Getting Postmark’s Lighthouse Performance Score to 100 (2020)
• Speedlify - Benchmark web pages over time. (Code) (Article)
• Sitejoy - Fast & responsive websites that will bring you joy.
• A Bit of Performance (2019)
• Lighthouse CI - Automate running Lighthouse for every commit, viewing the changes, and preventing regressions.
• Next.js Analytics - Provides your Real Experience Score through data from actual visitors. (HN)
• Request Metrics - Website performance monitoring.
• Low Hanging Fruits in Frontend Performance Optimization (2020)
• The Core Web Vitals hype train (2020) (Tweet)
• How we improved the Lighthouse score of our landing page to 96 (2020)
• 1MB Club - Collection of performance-focused web pages found across the internet. (HN) (Code)
• 250kb Club (Code) (HN)
• Optimizing Your Web App 100x is Like Adding 99 Servers (2020) (HN)
• require-so-slow - requires taking too much time? Profile 'em.
• Awesome web performance list
• Why is the Google Cloud UI so slow? (2020) (HN)
• Measuring page performance with Puppeteer & Playwright
• Third-Party Web - Data on third party entities and their impact on the web. (Code)
• Maximally optimizing image loading for the web in 2021
• Front-End Performance Checklist 2021
• Lighthouse Parade - 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) (HN)
• SpeedHub - Information Source for Web Performance.
• Making GitHub’s new homepage fast and performant (2021) (HN)
• JavaScript performance beyond bundle size (2021)
• Speed Is the Killer Feature (2021) (HN)
• 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)
• HTML and CSS techniques to reduce your JavaScript (2020) (HN)
• Instant Vitals - Simple tools to track and improve your Web Vitals scores. (Code)
• How to Eliminate Render-Blocking Resources: a Deep Dive (2021)
• Low Bandwidth Images (2021)
• bundlesize2 - Keep your bundle size in check.
• Explore JavaScript Dependencies With Lighthouse Treemap (2021)
• 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)
• Small Bundles, Fast Pages: What To Do With Too Much JavaScript (2021) (Tweet)
• 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.
• PageSpeed Insights - Help you better measure and optimize your page and site quality. (Article) (Tweet)
• 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) (Lobsters) (HN)
• Garie - Open source toolkit to monitor web performance. (Code)
• Unlighthouse - Scan your entire website with Google Lighthouse. (Code)
• Towards a Unified Theory of Web Performance (2022)
• When To Fetch
• Your SSR is slow & your dev tools are lying to you (2022) (Reddit)
• WebPageTest-API-Recipes - Collection of useful recipes for the WebPageTest API.
• Performance insights panel
• Optimising Largest Contentful Paint (2022)
• Coach - Helps you find performance problems on your web page.
• Early Hints: How Cloudflare Can Improve Website Load Times by 30% (2021) (Tweet)
• AutoWebPerf - Flexible and scalable framework for running web performance audits with arbitrary audit tools.
• Hydration is pure overhead (2022) (HN) (Tweet)
• BundleMon - Monitor your bundle size.
• A Gentle Introduction to SSR (2022) (HN)
• The state of responsiveness on the web (2022)
• Heydon Pickering: Please Disable JavaScript To View This Site (2021)
• Don't fight the browser preload scanner (2022)
• Local-First Software (2019) - You own your data, in spite of the cloud. (HN)
• The Real Cost of UI Components (2019)
• Making the world’s fastest website, and other mistakes (2022) (Tweet)
• Interaction to Next Paint (2022)
• Components are Pure Overhead (2021)
• You’re probably using Lighthouse wrong: How we got tricked by a single magic number (2022)
• Rethinking Server-Timing As A Critical Monitoring Tool (2022)
• Awesome WPO - Curated list of Web Performance Optimization. (Code)
• Awesome Web Performance Budget
• DebugBear - Monitor Site Speed and Core Web Vitals. (Docs)
• Poor man's cache (2022)
• Web Performance / Twitter List (Tweet)
• Web Framework Benchmarks
• Use fetchpriority=high to load your LCP hero image sooner (2022)
• Web Frameworks Benchmark
• Web Performance Research
• crabby - Web page performance tester with support for Prometheus, InfluxDB, Graphite, Datadog, and Riemann.
• Making the World's Fastest Website and Other Mistakes w/ Taylor Hunt (2022)
• GIFs Without the .gif: The Most Performant Image and Video Options Right Now (2022)
• Opt-in trend in Web (2022)
• Cloudflare Pages gets even faster with Early Hints (2022)
• Optimizing images with the HTML picture tag (2022) (HN)
• Performance-Leaderboard - Plugin to run Lighthouse against a set of urls to see which site is the fastest.
• When Network is Faster than Cache (2020)
• Optimising Core Web Vitals on SPAs (2022)
• Survivorship Bias in Web Performance (2022)
• crux.page - Get CrUX data for any webpage, origin or list of pages with ease.
• Optimizing SSR Memory Usage on wolt.com (2022)
• Adding Complementary Performance Data to Your Site (2022)
• How to bundle images with a web app to reduce the amount of requests
• Web performance, code splitting strategies, and a React case study (2022)
• Compress An Image Before Upload With JavaScript (2023)
• trace.cafe - Easy webperf trace sharing. (Code)
• Predicting Resource Usage From Increased Traffic (2023)
• Our top Core Web Vitals recommendations for 2023
• Web Performance Snippets
• Learn Images - In-depth course on images for the web.
• unpic img - Multi-framework responsive image component.
• How To Improve Lighthouse Scores by Avoiding <img> Layout Shifts (2023)
• Dumb tricks that made my app 95.7x Faster (2023)
• 512KB Club - Showcase of lightweight websites. (Code)
• Spidergram - Toolbox for exploring, auditing, and analyzing complicated web sites.
• Web Packager - Showcase of how to speed up the page loading with privacy-preserving prefetch.
• Making Tanstack Table 1000x faster with a 1 line change (2023)
• The modern way of serving images
• Awesome Web Performance
• How to Favicon in 2023: Six files that fit most needs
• PicPerf - Image optimization for the images you're already using.