Track Awesome Web Performance Budget Updates Daily

⚡️Articles, Websites, Tools and Case Studies to implement performance budget to a website. (PR 's welcomed)

🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 pajaydev/awesome-web-performance-budget · ⭐ 76 · 🏷️ Front-End Development

[ Daily / Weekly / Overview ]

Feb 19, 2022

Tools to measure Performance Budget

• lightest app - Visualize web performance against competitors.

Open source tools

• Perfume.js - Tiny, web performance monitoring library that reports field data back to your favorite analytics tool.

• Falco (⭐760) - Helps you monitor, analyze, and optimize your websites.

Case Studies

• Smashing Magazine's Web Performance - Improving Smashing Magazine's Web Performance Case Study.

Feb 01, 2021

Build Tools to set up performance budget

• Lighthouse - How to set up a performance budget using lighthouse and automate using Lighthouse bot.

Dec 18, 2020

Articles

• Performance budgets 101 - How to start a journey by setting up the performance budget.

• Impact of Page Weight on Load Time - Impact of Page Weight on Load Time.

Blogs

• Web Performance Calender - Speed geek's favorite time of the year.

Nov 30, 2020

Case Studies

• Web Performance Optimization case studies - Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics.

Sep 10, 2020

Articles

• JavaScript Start-up Performance - Performance Budget by Addyosmani.

Podcasts

• Shoptalk Show - A podcast about building websites.

Books

• Web Performance Warrior

• Designing for Performance

Aug 31, 2020

Website Analyzers

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

• UITest.com Site Check - Test your website in more than 80 tools (web-based and free).

Jul 25, 2020

Tools to measure Performance Budget

• Perf Track - Tracking framework performance at scale.

Jul 17, 2020

Podcasts

• Chasing Waterfalls - Conversation with people to make web faster by Tim kadlec

May 24, 2020

Case Studies

• Casper.com Self-hosting Optimization - How we shaved 1.7 seconds off casper.com by self-hosting Optimizely.

• Netflix Performance Improvement by shipping less JS - A Netflix Web Performance Case Study.

• Pinterest Web App Optimization - A Pinterest Progressive Web App Performance Case Study.

• Tinder Web App Performance - A Tinder Progressive Web App Performance Case Study.

• Zillow's Performance Budget - A true story of how Zillow uses performance budgeting.

Mar 01, 2020

Videos

• Design Decisions Through The Lens Of A Performance Budget - How we can make smarter design decisions, from the beginning of a project, to ensure that our sites perform well.

Feb 28, 2020

Articles

• How to make Performance Budget - Instructions for developing the performance budget.

Feb 05, 2020

Bundle Analyzers

• Rollup Visualizer (⭐1k) - Visualize and analyze your Rollup bundle to see which modules are taking up space.

Feb 01, 2020

Build Tools to set up performance budget

• Size Limit (⭐5.5k) - 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 (⭐1.7k) - Track compressed Webpack asset sizes over time.

Jan 27, 2020

Bundle Analyzers

• bundle-buddy - A tool to help you find source code duplication across your JavaScript chunks/splits.

• Parcel plugin Visualizer (⭐273) - A plugin for the parcel bundler to visualise bundle contents.

Jan 20, 2020

Build Tools to set up performance budget

• Webpack Perf Budget - If you are using Webpack in your project then you can prefer this.

Bundle Analyzers

• CSS Analyzer (⭐671) - CSS selectors complexity and performance analyzer.

Jan 07, 2020

Articles

• Your first performance budget - Explained how to define your first performance budget in a few simple steps.

Dec 24, 2019

Tools to measure Performance Budget

• Sitespeed.io - Easy to monitor and measure the performance of your web site.

Dec 17, 2019

Tools to measure Performance Budget

• Yellow Lab Tools - Online test to help speeding up heavy web pages.

Oct 22, 2019

Articles

• Incorporate performance budgets into your build process - Set up performance budget into your build process.

Aug 02, 2019

Articles

• Performance as design - Best practise to see performance as an essential design feature.

Jul 29, 2019

Articles

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

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

Tools to measure Performance Budget

• Web Page Test - Test your performance.

Build Tools to set up performance budget

• Performance Budget Builder (⭐178) - 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.

• Progressive Web Metrics (⭐1.2k) - 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.

• rollup-plugin-size-snapshot (⭐159) - CLI tool and lib to gather performance metrics via Lighthouse.

Bundle Analyzers

• lasso-analyzer (⭐3) - Analyze and Visualise project bundles created by Lasso.

Videos

• Implementing Performance Budgets - How to implement performance budgets to avoid regression - Google Chrome Developers.

May 24, 2019

Case Studies

• Telegraph - Creating a web performance culture - Improving third-party web performance at The Telegraph.

Mar 22, 2019

Case Studies

• BBC - Cutting the mustard - Optimizations while building responsive websites.

• Twitter Lite - A Twitter Lite Web App at Scale.

Mar 08, 2019

Tools to measure Performance Budget

• Speed Curve - Measuring web performance, get today's performance metrics.

Build Tools to set up performance budget

• Grunt-perfbudget (⭐861) - Grunt task for performance budgeting.

• ImportCost - VS Extension - Extension to display inline in the VS code editor the size of the imported package.

Bundle Analyzers

• Bundlephobia - Find the cost of adding a npm package to your bundle.

• webpack-bundle-analyzer (⭐12k) - Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap.

• Disc - Visualise the module tree of browserify project bundles and track down bloat.

Case Studies

• Treebo PWA Case Study - Treebo - React And Preact PWA Performance Case Study.

Mar 07, 2019

Articles

• Performance Budget - Performance Budget by Addyosmani.

Tools to measure Performance Budget

• Performance Budget Calculator - Calculate A Performance Budget For Your Site.

Build Tools to set up performance budget

• Bundle Size (⭐4.4k) - Keep your bundle size in check.

Videos

• Concept of Performance Budget - Performance Budget with Tim Kadlec.