1 line
No EOL
13 KiB
JSON
1 line
No EOL
13 KiB
JSON
{"slug": "pajaydev--awesome-web-performance-budget", "title": "Web Performance Budget", "description": "\u26a1\ufe0fArticles, Websites, Tools and Case Studies to implement performance budget to a website. (PR 's welcomed)", "github_url": "https://github.com/pajaydev/awesome-web-performance-budget", "stars": "113", "tag": "Front-End Development", "entry_count": 74, "subcategory_count": 1, "subcategories": [{"name": "General", "parent": "", "entries": [{"name": "Articles", "url": "#articles", "description": ""}, {"name": "Tools to measure Performance Budget", "url": "#tools-to-measure-performance-budget", "description": ""}, {"name": "Open source tools", "url": "#open-source-tools", "description": ""}, {"name": "Build Tools to set up performance budget", "url": "#build-tools-to-set-up-performance-budget", "description": ""}, {"name": "Bundle Analyzers", "url": "#bundle-analyzers", "description": ""}, {"name": "Website Analyzers", "url": "#website-analyzers", "description": ""}, {"name": "Blogs", "url": "#blogs", "description": ""}, {"name": "Podcasts", "url": "#podcasts", "description": ""}, {"name": "Videos", "url": "#videos", "description": ""}, {"name": "Books", "url": "#books", "description": ""}, {"name": "Case Studies", "url": "#case-studies", "description": ""}, {"name": "JavaScript Start-up Performance", "url": "https://medium.com/reloading/javascript-start-up-performance-69200f43b201", "description": "Performance Budget by Addyosmani."}, {"name": "Performance Budget", "url": "https://addyosmani.com/blog/performance-budgets/", "description": "Performance Budget by Addyosmani."}, {"name": "Your first performance budget", "url": "https://web.dev/your-first-performance-budget/", "description": "Explained how to define your first performance budget in a few simple steps."}, {"name": "Designing for Performance", "url": "http://designingforperformance.com/index.html#table-of-contents", "description": "How performance is important for designers."}, {"name": "Web Performance for Designers and developers", "url": "https://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/", "description": "Front-end performance for web designers and front-end developers."}, {"name": "Performance as design", "url": "http://bradfrost.com/blog/post/performance-as-design/", "description": "Best practise to see performance as an essential design feature."}, {"name": "Inside Design - Setting a web performance budget", "url": "https://www.invisionapp.com/inside-design/setting-a-web-performance-budget/", "description": "Setting a performance budget by Invision."}, {"name": "Real-world Web Performance Budgets By Alex Russel", "url": "https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/", "description": "Can You Afford It?: Real-world Web Performance Budgets."}, {"name": "Performance Budget using Angular CLI", "url": "https://medium.com/dailyjs/how-did-angular-cli-budgets-save-my-day-and-how-they-can-save-yours-300d534aae7a", "description": "Implementing Performance Budget in Angular projects."}, {"name": "Performance budgets 101", "url": "https://web.dev/performance-budgets-101/", "description": "How to start a journey by setting up the performance budget."}, {"name": "Incorporate performance budgets into your build process", "url": "https://web.dev/incorporate-performance-budgets-into-your-build-tools", "description": "Set up performance budget into your build process."}, {"name": "How to make Performance Budget", "url": "http://v3.danielmall.com/articles/how-to-make-a-performance-budget/", "description": "Instructions for developing the performance budget."}, {"name": "Impact of Page Weight on Load Time", "url": "https://paulcalvano.com/2018-07-02-impact-of-page-weight-on-load-time/", "description": "Impact of Page Weight on Load Time."}, {"name": "Performance Budget Calculator", "url": "http://www.performancebudget.io/", "description": "Calculate A Performance Budget For Your Site."}, {"name": "Web Page Test", "url": "https://www.webpagetest.org/easy", "description": "Test your performance."}, {"name": "lightest app", "url": "https://www.lightest.app/", "description": "Visualize web performance against competitors."}, {"name": "Speed Curve", "url": "https://speedcurve.com", "description": "Measuring web performance, get today's performance metrics."}, {"name": "Yellow Lab Tools", "url": "https://yellowlab.tools/", "description": "Online test to help speeding up heavy web pages."}, {"name": "Sitespeed.io", "url": "https://www.sitespeed.io/", "description": "Easy to monitor and measure the performance of your web site."}, {"name": "Perf Track", "url": "https://perf-track.web.app/", "description": "Tracking framework performance at scale."}, {"name": "Perfume.js", "url": "https://zizzamia.github.io/perfume/", "description": "Tiny, web performance monitoring library that reports field data back to your favorite analytics tool."}, {"name": "Falco", "url": "https://github.com/theodo/falco", "description": "Helps you monitor, analyze, and optimize your websites.", "stars": "768"}, {"name": "Bundle Size", "url": "https://github.com/siddharthkp/bundlesize", "description": "Keep your bundle size in check.", "stars": "4.5k"}, {"name": "Webpack Perf Budget", "url": "https://webpack.js.org/configuration/performance/", "description": "If you are using Webpack in your project then you can prefer this."}, {"name": "Lighthouse", "url": "https://web.dev/use-lighthouse-for-performance-budgets/", "description": "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/)."}, {"name": "Grunt-perfbudget", "url": "https://github.com/tkadlec/grunt-perfbudget", "description": "Grunt task for performance budgeting.", "stars": "856"}, {"name": "Size Limit", "url": "https://github.com/ai/size-limit", "description": "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.", "stars": "6.6k"}, {"name": "Size Plugin", "url": "https://github.com/GoogleChromeLabs/size-plugin", "description": "Track compressed Webpack asset sizes over time.", "stars": "1.7k"}, {"name": "Performance Budget Builder", "url": "https://github.com/GoogleChromeLabs/pr-bot", "description": "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.", "stars": "181"}, {"name": "Progressive Web Metrics", "url": "https://github.com/paulirish/pwmetrics", "description": "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.", "stars": "1.2k"}, {"name": "rollup-plugin-size-snapshot", "url": "https://github.com/TrySound/rollup-plugin-size-snapshot", "description": "CLI tool and lib to gather performance metrics via Lighthouse.", "stars": "164"}, {"name": "ImportCost - VS Extension", "url": "https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost", "description": "Extension to display inline in the VS code editor the size of the imported package."}, {"name": "Bundlephobia", "url": "https://bundlephobia.com/", "description": "Find the cost of adding a npm package to your bundle."}, {"name": "bundle-buddy", "url": "https://bundle-buddy.firebaseapp.com/", "description": "A tool to help you find source code duplication across your JavaScript chunks/splits."}, {"name": "webpack-bundle-analyzer", "url": "https://github.com/webpack-contrib/webpack-bundle-analyzer", "description": "Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap.", "stars": "13k"}, {"name": "Disc", "url": "http://hughsk.io/disc/", "description": "Visualise the module tree of browserify project bundles and track down bloat."}, {"name": "lasso-analyzer", "url": "https://github.com/ajay2507/lasso-analyzer", "description": "Analyze and Visualise project bundles created by Lasso.", "stars": "4"}, {"name": "Rollup Visualizer", "url": "https://github.com/btd/rollup-plugin-visualizer", "description": "Visualize and analyze your Rollup bundle to see which modules are taking up space.", "stars": "2k"}, {"name": "Parcel plugin Visualizer", "url": "https://github.com/gregtillbrook/parcel-plugin-bundle-visualiser", "description": "A plugin for the parcel bundler to visualise bundle contents.", "stars": "274"}, {"name": "CSS Analyzer", "url": "https://github.com/macbre/analyze-css", "description": "CSS selectors complexity and performance analyzer.", "stars": "699"}, {"name": "Lighthouse Metrics", "url": "https://lighthouse-metrics.com/", "description": "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."}, {"name": "UITest.com Site Check", "url": "https://uitest.com/check/", "description": "Test your website in more than 80 tools (web-based and free)."}, {"name": "Web Performance Calender", "url": "https://calendar.perfplanet.com/2020/", "description": "Speed geek's favorite time of the year."}, {"name": "Web Performance Budget: How to Set up, Calculate, And Apply", "url": "https://uxify.com/blog/post/web-performance-budget-guide", "description": "How to Set up budget, Calculate, And Apply"}, {"name": "Chasing Waterfalls", "url": "https://chasingwaterfalls.io/", "description": "Conversation with people to make web faster by [Tim kadlec](https://timkadlec.com/)"}, {"name": "Shoptalk Show", "url": "https://shoptalkshow.com/", "description": "A podcast about building websites."}, {"name": "Concept of Performance Budget", "url": "https://www.youtube.com/watch?list=PLYo5nh8xQFpkwsu9QNlCpPGkmCCuTTWDJ\\&v=yqejmZrtmNg", "description": "Performance Budget with Tim Kadlec."}, {"name": "Implementing Performance Budgets", "url": "https://youtu.be/vVlpCmK1l5k", "description": "How to implement performance budgets to avoid regression - Google Chrome Developers."}, {"name": "Design Decisions Through The Lens Of A Performance Budget", "url": "https://vimeo.com/108328247", "description": "How we can make smarter design decisions, from the beginning of a project, to ensure that our sites perform well."}, {"name": "Revisiting Performance Budgets", "url": "https://www.youtube.com/watch?v=cnr3CJwpaps", "description": "Revisiting Performance Budgets"}, {"name": "Web Performance Warrior", "url": "https://www.oreilly.com/library/view/web-performance-warrior/9781492048114/", "description": ""}, {"name": "Designing for Performance", "url": "http://designingforperformance.com/", "description": ""}, {"name": "Web Performance Optimization case studies", "url": "https://wpostats.com/", "description": "Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics."}, {"name": "BBC - Cutting the mustard", "url": "http://responsivenews.co.uk/post/18948466399/cutting-the-mustard", "description": "Optimizations while building responsive websites."}, {"name": "Casper.com Self-hosting Optimization", "url": "https://medium.com/caspertechteam/we-shaved-1-7-seconds-off-casper-com-by-self-hosting-optimizely-2704bcbff8ec", "description": "How we shaved 1.7 seconds off casper.com by self-hosting Optimizely."}, {"name": "Netflix Performance Improvement by shipping less JS", "url": "https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9", "description": "A Netflix Web Performance Case Study."}, {"name": "Pinterest Web App Optimization", "url": "https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154/", "description": "A Pinterest Progressive Web App Performance Case Study."}, {"name": "Smashing Magazine's Web Performance", "url": "https://www.smashingmagazine.com/2014/09/improving-smashing-magazine-performance-case-study/", "description": "Improving Smashing Magazine's Web Performance Case Study."}, {"name": "Tinder Web App Performance", "url": "https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0/", "description": "A Tinder Progressive Web App Performance Case Study."}, {"name": "Treebo PWA Case Study", "url": "https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299/", "description": "Treebo - React And Preact PWA Performance Case Study."}, {"name": "Twitter Lite", "url": "https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3/", "description": "A Twitter Lite Web App at Scale."}, {"name": "Telegraph - Creating a web performance culture", "url": "https://medium.com/the-telegraph-engineering/improving-third-party-web-performance-at-the-telegraph-a0a1000be5", "description": "Improving third-party web performance at The Telegraph."}, {"name": "Zillow's Performance Budget", "url": "https://www.zillow.com/engineering/bigger-faster-more-engaging-budget/", "description": "A true story of how Zillow uses performance budgeting."}]}], "name": ""} |