> For the complete documentation index, see [llms.txt](https://woodrowpearson.gitbook.io/woodrow-wiki/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://woodrowpearson.gitbook.io/woodrow-wiki/web/browsers/stylish-themes/web-performance.md).

# Web performance

## Notes

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

## Links

* [Rendering on the Web (2019)](https://developers.google.com/web/updates/2019/02/rendering-on-the-web)
* [Web Performance Mini Series: Animations (2019)](https://www.youtube.com/watch?v=ohc8ejzSn48)
* [tachometer](https://github.com/Polymer/tachometer) - Statistically rigorous benchmark runner for the web.
* [Idle Until Urgent (2018)](https://philipwalton.com/articles/idle-until-urgent/)
* [bundlesize](https://github.com/siddharthkp/bundlesize) - Keep your bundle size in check.
* [Ask HN: How to performance test React webapps for rendering speed regressions? (2019)](https://news.ycombinator.com/item?id=19969308)
* [Performance metrics for blazingly fast web apps (2019)](https://blog.superhuman.com/performance-metrics-for-blazingly-fast-web-apps-ec12efa26bcb)
* [webhint](https://github.com/webhintio/hint) - Hinting engine for the web. ([Web](https://webhint.io/))
* [Latency](https://latency.apex.sh/) - Global latency testing tool.
* [Ilya Grigorik | performance.now().reject(reasons) (2019)](https://www.youtube.com/watch?v=vtIfVPtN6io)
* [You Don't Need](https://github.com/you-dont-need/You-Dont-Need.com) - People choose popular projects, often not because it applies to their problems.
* [Treo](https://treo.sh/sites) - Real user monitoring with zero-setup.
* [Front-End Performance Checklist (2020)](https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages/)
* [Perf Tooling](https://github.com/stefanjudis/perf-tooling) - List of performance analysis, monitoring and optimization tools.
* [Keeping 100% Lighthouse score around the world - Leonardo Zizzamia (2020)](https://www.youtube.com/watch?v=fg7N14Fq1gM)
* [Calibre](https://calibreapp.com/) - Monitor and audit web performance. Make meaningful improvements where it matters.
* [Web bloat](http://danluu.com/web-bloat/)
* [Falco](https://getfal.co/) - Helps you monitor, analyze, and optimize your websites. ([Code](https://github.com/theodo/falco))
* [Monitoring Performance with the PageSpeed Insights API (2020)](https://dev.to/addyosmani/monitoring-performance-with-the-pagespeed-insights-api-33k7)
* [Sitespeed.io](https://www.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)](https://www.debugbear.com/blog/measuring-react-app-performance)
* [Profiling React performance with React 16 and Chrome Devtools (2017)](https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad)
* [Firefox Profiler](https://profiler.firefox.com/) - Web app for Firefox performance analysis.
* [Do’s and Don’ts for Performance Teams (2020)](https://medium.com/@ricomariani/dos-and-don-ts-for-performance-teams-7f52c41b5355)
* [Size Limit](https://github.com/ai/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](http://jankfree.org/) - Resources to make web silky smooth.
* [Visualizing Performance with Flame Graphs (2017)](https://www.youtube.com/watch?v=D53T1Ejig1Q)
* [Awesome performance testing collection](https://github.com/andriisoldatenko/awesome-performance-testing#readme)
* [go-ycsb](https://github.com/pingcap/go-ycsb) - Go port of Yahoo! Cloud Serving Benchmark.
* [List of functions which you can use to replace moment.js + ESLint Plugin](https://github.com/you-dont-need/You-Dont-Need-Momentjs)
* [Meaningful Availability](https://www.usenix.org/system/files/nsdi20spring_hauer_prepub.pdf)
* [ReBench](https://github.com/smarr/ReBench) - Execute and Document Benchmarks Reproducibly.
* [import-size](https://github.com/mweststrate/import-size) - Measure the real, minified, tree-shaken impact of individual imports into your app.
* [Reflections on software performance (2020)](https://blog.nelhage.com/post/reflections-on-performance/) ([HN](https://news.ycombinator.com/item?id=22400329))
* [Fixing memory leaks in web applications (2019)](https://nolanlawson.com/2020/02/19/fixing-memory-leaks-in-web-applications/)
* [In-Browser Performance Linting With Feature Policies (2020)](https://timkadlec.com/remembers/2020-02-20-in-browser-performance-linting-with-feature-policies/)
* [Effective Profiling in Google Chrome (2020)](https://blog.appsignal.com/2020/02/20/effective-profiling-in-google-chrome.html)
* [bundle-wizard](https://github.com/aholachek/bundle-wizard) - Easy insight into the JS loaded by a web app.
* [Fast Software, the Best Software](https://craigmod.com/essays/fast_software/)
* [Image CDNs can save 40-80% on image byte sizes by automating best practices](https://twitter.com/addyosmani/status/1232983718353981440)
* [Web Performance Working Group](https://www.w3.org/webperf/) ([Code](https://github.com/w3c/web-performance))
* [Why We Started Putting Unpopular Assets in Memory](https://blog.cloudflare.com/why-we-started-putting-unpopular-assets-in-memory/) ([Lobsters](https://lobste.rs/s/ka92bs/why_we_started_putting_unpopular_assets))
* [Statping](https://github.com/statping/statping) - Status Page for monitoring your websites and applications with beautiful graphs, analytics, and plugins.
* [I’ve gone to great lengths for this silence](https://k1ss.org//blog/20191004a) ([Lobsters](https://lobste.rs/s/fpdafj/i_ve_gone_great_lengths_for_this_silence))
* [storybook-addon-performance](https://github.com/atlassian-labs/storybook-addon-performance) - Storybook addon to help better understand and debug performance for React components.
* [The Tail At Scale - Jeff Dean (2013)](https://dl.acm.org/doi/abs/10.1145/2408776.2408794)
* [Building This Website (2020)](https://joshbradley.me/building-this-website/)
* [Performance Resources](https://github.com/mfleming/performance-resources#readme)
* [PackWatch](https://github.com/mcataford/packwatch) - Keep an eye on your packages' footprint.
* [Annie Sullivan - Understanding Cumulative Layout Shift (2020)](https://www.youtube.com/watch?v=zIJuY-JCjqw\&list=PLSmH2HL6l9pwQmSgpKFtWiISOXua3zq8I\&index=15\&t=0s)
* [Lighthouse CI Action](https://github.com/treosh/lighthouse-ci-action) - Audit URLs using Lighthouse and test performance with Lighthouse CI.
* [Package Phobia](https://packagephobia.now.sh/) - Find the cost of adding a new dependency to your project. ([Code](https://github.com/styfle/packagephobia))
* [WebPageTest](https://www.webpagetest.org/) - Test a website's performance. ([Simple test](https://www.webpagetest.org/easy))
* [Monitor your web page's total memory usage with `performance.measureMemory()`](https://web.dev/monitor-total-page-memory-usage/) ([HN](https://news.ycombinator.com/item?id=22860859))
* [cliff](https://github.com/jonhoo/cliff) - Find the load at which a benchmark falls over.
* [Build Size Watcher](https://github.com/codechecks/build-size-watcher) - Keep your build size in check and detect when it gets too big.