Web performance

Notes

• Don't ever underestimate the cost performance of cache misses.

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 - Real user monitoring with zero-setup.

• 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. (Simple test)

• 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.