awesome-awesomeness/html/webperformancebudget.md2.html

<h1 id="awesome-web-performance-budget-awesome">Awesome Web Performance
Budget <a href="https://awesome.re"><img
src="https://awesome.re/badge.svg" alt="Awesome" /></a></h1>
<blockquote>
<p>Web Performance Budget is a group of limits to certain values that
affect site performance that should not be exceeded in the design and
development of any web project. By setting up the performance budget, we
can focus more towards performance which can improve the speed and
overall user experience of our websites. This list help us to provide
link to various articles, projects, tools and techniques to maintain
performance budget.</p>
</blockquote>
<h2 id="contents">Contents</h2>
<ul>
<li><a href="#articles">Articles</a></li>
<li><a href="#tools-to-measure-performance-budget">Tools to measure
Performance Budget</a></li>
<li><a href="#open-source-tools">Open source tools</a></li>
<li><a href="#build-tools-to-set-up-performance-budget">Build Tools to
set up performance budget</a></li>
<li><a href="#bundle-analyzers">Bundle Analyzers</a></li>
<li><a href="#website-analyzers">Website Analyzers</a></li>
<li><a href="#blogs">Blogs</a></li>
<li><a href="#podcasts">Podcasts</a></li>
<li><a href="#videos">Videos</a></li>
<li><a href="#books">Books</a></li>
<li><a href="#case-studies">Case Studies</a></li>
</ul>
<h2 id="articles">Articles</h2>
<ul>
<li><a
href="https://medium.com/reloading/javascript-start-up-performance-69200f43b201">JavaScript
Start-up Performance</a> - Performance Budget by Addyosmani.</li>
<li><a
href="https://addyosmani.com/blog/performance-budgets/">Performance
Budget</a> - Performance Budget by Addyosmani.</li>
<li><a href="https://web.dev/your-first-performance-budget/">Your first
performance budget</a> - Explained how to define your first performance
budget in a few simple steps.</li>
<li><a
href="http://designingforperformance.com/index.html#table-of-contents">Designing
for Performance</a> - How performance is important for designers.</li>
<li><a
href="https://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/">Web
Performance for Designers and developers</a> - Front-end performance for
web designers and front-end developers.</li>
<li><a
href="http://bradfrost.com/blog/post/performance-as-design/">Performance
as design</a> - Best practise to see performance as an essential design
feature.</li>
<li><a
href="https://www.invisionapp.com/inside-design/setting-a-web-performance-budget/">Inside
Design - Setting a web performance budget</a> - Setting a performance
budget by Invision.</li>
<li><a
href="https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/">Real-world
Web Performance Budgets By Alex Russel</a> - Can You Afford It?:
Real-world Web Performance Budgets.</li>
<li><a
href="https://medium.com/dailyjs/how-did-angular-cli-budgets-save-my-day-and-how-they-can-save-yours-300d534aae7a">Performance
Budget using Angular CLI</a> - Implementing Performance Budget in
Angular projects.</li>
<li><a href="https://web.dev/performance-budgets-101/">Performance
budgets 101</a> - How to start a journey by setting up the performance
budget.</li>
<li><a
href="https://web.dev/incorporate-performance-budgets-into-your-build-tools">Incorporate
performance budgets into your build process</a> - Set up performance
budget into your build process.</li>
<li><a
href="http://v3.danielmall.com/articles/how-to-make-a-performance-budget/">How
to make Performance Budget</a> - Instructions for developing the
performance budget.</li>
<li><a
href="https://paulcalvano.com/2018-07-02-impact-of-page-weight-on-load-time/">Impact
of Page Weight on Load Time</a> - Impact of Page Weight on Load
Time.</li>
</ul>
<h2 id="tools-to-measure-performance-budget">Tools to measure
Performance Budget</h2>
<ul>
<li><a href="http://www.performancebudget.io/">Performance Budget
Calculator</a> - Calculate A Performance Budget For Your Site.</li>
<li><a href="https://www.webpagetest.org/easy">Web Page Test</a> - Test
your performance.</li>
<li><a href="https://www.lightest.app/">lightest app</a> - Visualize web
performance against competitors.</li>
<li><a href="https://speedcurve.com">Speed Curve</a> - Measuring web
performance, get today’s performance metrics.</li>
<li><a href="https://yellowlab.tools/">Yellow Lab Tools</a> - Online
test to help speeding up heavy web pages.</li>
<li><a href="https://www.sitespeed.io/">Sitespeed.io</a> - Easy to
monitor and measure the performance of your web site.</li>
<li><a href="https://perf-track.web.app/">Perf Track</a> - Tracking
framework performance at scale.</li>
</ul>
<h2 id="open-source-tools">Open source tools</h2>
<ul>
<li><a href="https://zizzamia.github.io/perfume/">Perfume.js</a> - Tiny,
web performance monitoring library that reports field data back to your
favorite analytics tool.</li>
<li><a href="https://github.com/theodo/falco">Falco</a> - Helps you
monitor, analyze, and optimize your websites.</li>
</ul>
<h2 id="build-tools-to-set-up-performance-budget">Build Tools to set up
performance budget</h2>
<ul>
<li><a href="https://github.com/siddharthkp/bundlesize">Bundle Size</a>
- Keep your bundle size in check.</li>
<li><a href="https://webpack.js.org/configuration/performance/">Webpack
Perf Budget</a> - If you are using Webpack in your project then you can
prefer this.</li>
<li><a
href="https://web.dev/use-lighthouse-for-performance-budgets/">Lighthouse</a>
- How to set up a performance budget using <a
href="https://developers.google.com/web/tools/lighthouse">lighthouse</a>
and automate using <a
href="https://web.dev/using-lighthouse-bot-to-set-a-performance-budget/">Lighthouse
bot</a>.</li>
<li><a
href="https://github.com/tkadlec/grunt-perfbudget">Grunt-perfbudget</a>
- Grunt task for performance budgeting.</li>
<li><a href="https://github.com/ai/size-limit">Size Limit</a> -
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.</li>
<li><a href="https://github.com/GoogleChromeLabs/size-plugin">Size
Plugin</a> - Track compressed Webpack asset sizes over time.</li>
<li><a href="https://github.com/GoogleChromeLabs/pr-bot">Performance
Budget Builder</a> - Lay out your template types, set a size budget for
each template type, then plug in the sizes for each asset category that
will load in the template.</li>
<li><a href="https://github.com/paulirish/pwmetrics">Progressive Web
Metrics</a> - Lay out your template types, set a size budget for each
template type, then plug in the sizes for each asset category that will
load in the template.</li>
<li><a
href="https://github.com/TrySound/rollup-plugin-size-snapshot">rollup-plugin-size-snapshot</a>
- CLI tool and lib to gather performance metrics via Lighthouse.</li>
<li><a
href="https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost">ImportCost
- VS Extension</a> - Extension to display inline in the VS code editor
the size of the imported package.</li>
</ul>
<h2 id="bundle-analyzers">Bundle Analyzers</h2>
<ul>
<li><a href="https://bundlephobia.com/">Bundlephobia</a> - Find the cost
of adding a npm package to your bundle.</li>
<li><a href="https://bundle-buddy.firebaseapp.com/">bundle-buddy</a> - A
tool to help you find source code duplication across your JavaScript
chunks/splits.</li>
<li><a
href="https://github.com/webpack-contrib/webpack-bundle-analyzer">webpack-bundle-analyzer</a>
- Webpack plugin and CLI utility that represents bundle content as
convenient interactive zoomable treemap.</li>
<li><a href="http://hughsk.io/disc/">Disc</a> - Visualise the module
tree of browserify project bundles and track down bloat.</li>
<li><a
href="https://github.com/ajay2507/lasso-analyzer">lasso-analyzer</a> -
Analyze and Visualise project bundles created by Lasso.</li>
<li><a href="https://github.com/btd/rollup-plugin-visualizer">Rollup
Visualizer</a> - Visualize and analyze your Rollup bundle to see which
modules are taking up space.</li>
<li><a
href="https://github.com/gregtillbrook/parcel-plugin-bundle-visualiser">Parcel
plugin Visualizer</a> - A plugin for the parcel bundler to visualise
bundle contents.</li>
<li><a href="https://github.com/macbre/analyze-css">CSS Analyzer</a> -
CSS selectors complexity and performance analyzer.</li>
</ul>
<h2 id="website-analyzers">Website Analyzers</h2>
<ul>
<li><a href="https://lighthouse-metrics.com/">Lighthouse Metrics</a> -
Lighthouse Metrics provides easy insights for your site’s performance.
Save your time by running tests from multiple locations to get the
valuable insight you need.</li>
<li><a href="https://uitest.com/check/">UITest.com Site Check</a> - Test
your website in more than 80 tools (web-based and free).</li>
</ul>
<h2 id="blogs">Blogs</h2>
<ul>
<li><a href="https://calendar.perfplanet.com/2020/">Web Performance
Calender</a> - Speed geek’s favorite time of the year.</li>
<li><a
href="https://uxify.com/blog/post/web-performance-budget-guide">Web
Performance Budget: How to Set up, Calculate, And Apply</a> - How to Set
up budget, Calculate, And Apply</li>
</ul>
<h2 id="podcasts">Podcasts</h2>
<ul>
<li><a href="https://chasingwaterfalls.io/">Chasing Waterfalls</a> -
Conversation with people to make web faster by <a
href="https://timkadlec.com/">Tim kadlec</a></li>
<li><a href="https://shoptalkshow.com/">Shoptalk Show</a> - A podcast
about building websites.</li>
</ul>
<h2 id="videos">Videos</h2>
<ul>
<li><a
href="https://www.youtube.com/watch?list=PLYo5nh8xQFpkwsu9QNlCpPGkmCCuTTWDJ&amp;v=yqejmZrtmNg">Concept
of Performance Budget</a> - Performance Budget with Tim Kadlec.</li>
<li><a href="https://youtu.be/vVlpCmK1l5k">Implementing Performance
Budgets</a> - How to implement performance budgets to avoid regression -
Google Chrome Developers.</li>
<li><a href="https://vimeo.com/108328247">Design Decisions Through The
Lens Of A Performance Budget</a> - How we can make smarter design
decisions, from the beginning of a project, to ensure that our sites
perform well.</li>
<li><a href="https://www.youtube.com/watch?v=cnr3CJwpaps">Revisiting
Performance Budgets</a> - Revisiting Performance Budgets</li>
</ul>
<h2 id="books">Books</h2>
<ul>
<li><a
href="https://www.oreilly.com/library/view/web-performance-warrior/9781492048114/">Web
Performance Warrior</a></li>
<li><a href="http://designingforperformance.com/">Designing for
Performance</a></li>
</ul>
<h2 id="case-studies">Case Studies</h2>
<ul>
<li><a href="https://wpostats.com/">Web Performance Optimization case
studies</a> - Case studies and experiments demonstrating the impact of
web performance optimization (WPO) on user experience and business
metrics.</li>
<li><a
href="http://responsivenews.co.uk/post/18948466399/cutting-the-mustard">BBC
- Cutting the mustard</a> - Optimizations while building responsive
websites.</li>
<li><a
href="https://medium.com/caspertechteam/we-shaved-1-7-seconds-off-casper-com-by-self-hosting-optimizely-2704bcbff8ec">Casper.com
Self-hosting Optimization</a> - How we shaved 1.7 seconds off casper.com
by self-hosting Optimizely.</li>
<li><a
href="https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9">Netflix
Performance Improvement by shipping less JS</a> - A Netflix Web
Performance Case Study.</li>
<li><a
href="https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154/">Pinterest
Web App Optimization</a> - A Pinterest Progressive Web App Performance
Case Study.</li>
<li><a
href="https://www.smashingmagazine.com/2014/09/improving-smashing-magazine-performance-case-study/">Smashing
Magazine’s Web Performance</a> - Improving Smashing Magazine’s Web
Performance Case Study.</li>
<li><a
href="https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0/">Tinder
Web App Performance</a> - A Tinder Progressive Web App Performance Case
Study.</li>
<li><a
href="https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299/">Treebo
PWA Case Study</a> - Treebo - React And Preact PWA Performance Case
Study.</li>
<li><a
href="https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3/">Twitter
Lite</a> - A Twitter Lite Web App at Scale.</li>
<li><a
href="https://medium.com/the-telegraph-engineering/improving-third-party-web-performance-at-the-telegraph-a0a1000be5">Telegraph
- Creating a web performance culture</a> - Improving third-party web
performance at The Telegraph.</li>
<li><a
href="https://www.zillow.com/engineering/bigger-faster-more-engaging-budget/">Zillow’s
Performance Budget</a> - A true story of how Zillow uses performance
budgeting.</li>
</ul>
<h2 id="license">License</h2>
<p><a href="https://creativecommons.org/publicdomain/zero/1.0"><img
src="https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg"
alt="CC0" /></a></p>
<p><a
href="https://github.com/pajaydev/awesome-web-performance-budget">webperformancebudget.md
Github</a></p>