| title | 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.
- 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
- 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
- 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)