awesome-web-performance-budget
⚡️Articles, Websites, Tools and Case Studies to implement performance budget to a website. (PR 's welcomed)
https://github.com/pajaydev/awesome-web-performance-budget
Last synced: about 17 hours ago
JSON representation
-
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.
-
Build Tools to set up performance budget
- 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](https://developers.google.com/web/tools/lighthouse) and automate using [Lighthouse bot](https://web.dev/using-lighthouse-bot-to-set-a-performance-budget/).
- 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.
- bundle-buddy - A tool to help you find source code duplication across your JavaScript chunks/splits.
- Disc - Visualise the module tree of browserify project bundles and track down bloat.
- lasso-analyzer - Analyze and Visualise project bundles created by Lasso.
- lasso-analyzer - Analyze and Visualise project bundles created by Lasso.
-
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).
-
Blogs
- Web Performance Calender - Speed geek's favorite time of the year.
-
Podcasts
- Chasing Waterfalls - Conversation with people to make web faster by [Tim kadlec](https://timkadlec.com/)
- Shoptalk Show - A podcast about building websites.
-
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.
-
Books
-
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.