Awesome Web Performance Budget

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.

Contents

• Articles
• Tools to measure Performance Budget
• Open source tools
• Build Tools to set up performance budget
• Bundle Analyzers
• Website Analyzers
• Blogs
• Podcasts
• Videos
• Books
• Case Studies

Articles

• JavaScript Start-up Performance - Performance Budget by Addyosmani.
• Performance Budget - Performance Budget by Addyosmani.
• Your first performance budget - Explained how to define your first performance budget in a few simple steps.
• Designing for Performance - How performance is important for designers.
• Web Performance for Designers and developers - Front-end performance for web designers and front-end developers.
• Performance as design - Best practise to see performance as an essential design feature.
• Inside Design - Setting a web performance budget - Setting a performance budget by Invision.
• Real-world Web Performance Budgets By Alex Russel - Can You Afford It?: Real-world Web Performance Budgets.
• Performance Budget using Angular CLI - Implementing Performance Budget in Angular projects.
• Performance budgets 101 - How to start a journey by setting up the performance budget.
• Incorporate performance budgets into your build process - Set up performance budget into your build process.
• How to make Performance Budget - Instructions for developing the performance budget.
• Impact of Page Weight on Load Time - Impact of Page Weight on Load Time.

Tools to measure Performance Budget

• Performance Budget Calculator - Calculate A Performance Budget For Your Site.
• Web Page Test - Test your performance.
• lightest app - Visualize web performance against competitors.
• Speed Curve - Measuring web performance, get today's performance metrics.
• Yellow Lab Tools - Online test to help speeding up heavy web pages.
• Sitespeed.io - Easy to monitor and measure the performance of your web site.
• Perf Track - Tracking framework performance at scale.

Open source tools

• Perfume.js - Tiny, web performance monitoring library that reports field data back to your favorite analytics tool.
• Falco - Helps you monitor, analyze, and optimize your websites.

Build Tools to set up performance budget

• Bundle Size - Keep your bundle size in check.
• Webpack Perf Budget - If you are using Webpack in your project then you can prefer this.
• Lighthouse - How to set up a performance budget using lighthouse and automate using Lighthouse bot.
• Grunt-perfbudget - Grunt task for performance budgeting.
• 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.
• Size Plugin - Track compressed Webpack asset sizes over time.