awesome-web-performance-budget

Performance budgeting guide

A curated collection of resources and tools to help website developers set and maintain performance budgets.

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

GitHub
113 stars
6 watching
8 forks
last commit: almost 3 years ago
Linked from 3 awesome lists

awesomeawesome-listawesome-performance-budgetawesome-webblogsbundle-analyzerscase-studiesmeasureperformance-budgetperformance-budgetingperformance-budgetspodcastsreadingssize-budgettoolsvideosweb-performanceweb-performance-budgetwebsite-analyzer

Awesome Web Performance Budget / 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

Awesome Web Performance Budget / 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

Awesome Web Performance Budget / Open source tools
Perfume.js Tiny, web performance monitoring library that reports field data back to your favorite analytics tool
Falco 768 5 months ago Helps you monitor, analyze, and optimize your websites

Awesome Web Performance Budget / Build Tools to set up performance budget
Bundle Size 4,473 2 months ago 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 and automate using
Grunt-perfbudget 856 8 months ago Grunt task for performance budgeting
Size Limit 6,561 11 days ago 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,673 23 days ago Track compressed Webpack asset sizes over time
Performance Budget Builder 181 10 months ago 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,248 almost 2 years ago 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 164 almost 2 years ago CLI tool and lib to gather performance metrics via Lighthouse
ImportCost - VS Extension Extension to display inline in the VS code editor the size of the imported package

Awesome Web Performance Budget / Bundle Analyzers
Bundlephobia Find the cost of adding a npm package to your bundle
bundle-buddy A tool to help you find source code duplication across your JavaScript chunks/splits
webpack-bundle-analyzer 12,588 23 days ago 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
lasso-analyzer 4 over 3 years ago Analyze and Visualise project bundles created by Lasso
Rollup Visualizer 1,955 6 months ago Visualize and analyze your Rollup bundle to see which modules are taking up space
Parcel plugin Visualizer 274 almost 2 years ago A plugin for the parcel bundler to visualise bundle contents
CSS Analyzer 699 6 days ago CSS selectors complexity and performance analyzer

Awesome Web Performance Budget / 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)

Awesome Web Performance Budget / Blogs
Web Performance Calender Speed geek's favorite time of the year

Awesome Web Performance Budget / Podcasts
Chasing Waterfalls Conversation with people to make web faster by
Shoptalk Show A podcast about building websites

Awesome Web Performance Budget / Videos
Concept of Performance Budget Performance Budget with Tim Kadlec
Implementing Performance Budgets How to implement performance budgets to avoid regression - Google Chrome Developers
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

Awesome Web Performance Budget / Books
Web Performance Warrior
Designing for Performance

Awesome Web Performance Budget / 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
BBC - Cutting the mustard Optimizations while building responsive websites
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
Smashing Magazine's Web Performance Improving Smashing Magazine's Web Performance Case Study
Tinder Web App Performance A Tinder Progressive Web App Performance Case Study
Treebo PWA Case Study Treebo - React And Preact PWA Performance Case Study
Twitter Lite A Twitter Lite Web App at Scale
Telegraph - Creating a web performance culture Improving third-party web performance at The Telegraph
Zillow's Performance Budget A true story of how Zillow uses performance budgeting

Backlinks from these awesome lists:

More related projects: