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.

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

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.
• Making the world’s fastest website, and other mistakes (2022)
• 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