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.

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.

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.

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.

Performance Budget Builder

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

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

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.

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

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

Analyze and Visualise project bundles created by Lasso.

Rollup Visualizer

Visualize and analyze your Rollup bundle to see which modules are taking up space.

Parcel plugin Visualizer

A plugin for the parcel bundler to visualise bundle contents.

CSS Analyzer

CSS selectors complexity and performance analyzer.

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

PageGuard

Free website health scanner. Measures Core Web Vitals (LCP, FCP, CLS, TTFB), performance scores and provides AI-powered action plans. No signup required.

Screpy

Tracks Core Web Vitals and page-speed changes across monitored pages.

Web Performance Calender

Speed geek's favorite time of the year.

Web Performance Budget: How to Set up, Calculate, And Apply

How to Set up budget, Calculate, And Apply

Chasing Waterfalls

Conversation with people to make web faster by Tim kadlec

Shoptalk Show

A podcast about building websites.

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.

Revisiting Performance Budgets

Revisiting Performance Budgets

Web Performance Warrior

Designing for Performance

How performance is important for designers.

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.