{"id":2446080,"date":"2020-06-23T10:43:00","date_gmt":"2020-06-23T08:43:00","guid":{"rendered":"https:\/\/wp-rocket.me\/?p=2446080"},"modified":"2024-07-05T11:09:13","modified_gmt":"2024-07-05T09:09:13","slug":"performance-budgets","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/blog\/performance-budgets\/","title":{"rendered":"Web Performance Budget: What It Is + How to Set and Measure It"},"content":{"rendered":"<p>Performance is critical for user experience and improving conversion rates on your website. Users are <a href=\"https:\/\/webmasters.googleblog.com\/2019\/04\/user-experience-improvements-with-page.html\">less likely to abandon a webpage<\/a> if it loads swiftly and interacts smoothly. But how fast is fast enough? There\u2019s no single answer for that. Just like any business, every website is unique with its own goals, user demographics, and budgets.<\/p><p>Setting a <strong>performance budget<\/strong> clears this confusion by helping you achieve the maximum performance for your budget. In this article, you\u2019ll learn how to measure website performance with the right metrics and set up a performance budget to achieve your business goals efficiently.<\/p><h2 class=\"wp-block-heading\">What is a Performance Budget?<\/h2><p>Website performance is a game of give and take. Should you prioritize user experience or design? How about adding a chatbot vs taking a hit to your page load speed? Does your website really need to load a third party script and custom fonts? If yes, what functionality do they serve to your users? And do they help you drive conversions?<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"461\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Website-Performance-Budget-Balance-Illustration.png\" alt=\"A performance budget helps you optimize your website better\" class=\"wp-image-2446547\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Website-Performance-Budget-Balance-Illustration.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Website-Performance-Budget-Balance-Illustration-300x173.png 300w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Website-Performance-Budget-Balance-Illustration-768x443.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">A performance budget helps you optimize your website better<\/figcaption><\/figure><p>To achieve the optimal performance for your site, you need to find the right balance between design, functionality, business objectives, and user experience. When you\u2019re building a new website or revamping it, it\u2019s easier to account for all these factors.&nbsp;<\/p><p>But over time, as the site traffic picks up and you add more features to the site, you\u2019ll find that your website performance isn\u2019t as good as it originally was. This is where performance budgeting helps.<\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>A performance budget is just what it sounds like: you set a \u201cbudget\u201d on your page and do not allow the page to exceed that. This may be a specific load time, but it is usually an easier conversation to have when you break the budget down into the number of requests or size of the page.<\/em><\/p><cite><a href=\"https:\/\/timkadlec.com\/2013\/01\/setting-a-performance-budget\/\"><strong>Tim Kadlec<\/strong>, Web Performance Expert<\/a><\/cite><\/blockquote><p>A <strong>performance budget<\/strong> is a collection of limits you impose on various website metrics that impact its performance. Some performance budget metrics include:<\/p><ul class=\"wp-block-list\"><li>Total page size<\/li>\n\n<li>Total number of HTTP requests<\/li>\n\n<li>Page load time on mobile networks<\/li>\n\n<li>First Contentful Paint (FCP)&nbsp;<\/li>\n\n<li>Long Contentful Paint (LCP)<\/li><\/ul><p>You can set a performance budget for the entire website, or on a page-by-page basis, or both (recommended). Using the metrics mentioned above, you can set clear, well-defined, measurable goals for your website to ensure that it continues to perform well.<\/p><h3 class=\"wp-block-heading\">Examples of Performance Budgets<\/h3><ul class=\"wp-block-list\"><li>The \u2018Homepage\u2019 should be less than 200 KB in size and load under 2 seconds on a Fast 3G mobile network.&nbsp;<\/li>\n\n<li>The \u2018Search page\u2019 must have less than 1.5 MB of images on its desktop site.<\/li>\n\n<li>The \u2018Blog page\u2019 must load within 1.5 seconds and become interactive under 5 seconds on Slow 3G network.<\/li>\n\n<li>The \u2018Landing page\u2019 must have a performance score above 85 in Lighthouse performance audits.<\/li><\/ul><h3 class=\"wp-block-heading\">Benefits of Settings a Performance Budget<\/h3><p>Defining a performance budget helps you take the first step towards improving your website performance. When adding extra features to your website, it\u2019ll serve as a reference point for everyone in your team or organization, whether they\u2019re designers, developers, or marketers.&nbsp;<\/p><p>For example, if you have set a limit on the number of images and fonts (and their file sizes), the designers will have a better understanding of what they can use and not. Similarly, imposing a limit on the number of third party scripts and libraries will enable developers to approach their goals better.<\/p><p>Having a performance budget will also help you track your website\u2019s performance better. If your website\u2019s performance drops gradually over time, then you can go back to your performance budget and test where things went wrong.&nbsp;<\/p><div id=\"om-ulrdquoprwqcywqbbgci-holder\"><\/div>\n\t<script>(function (d, u, ac) {\n\t\t\tvar s = d.createElement('script')\n\t\t\ts.type = 'text\/javascript'\n\t\t\ts.src = 'https:\/\/a.omappapi.com\/app\/js\/api.min.js'\n\t\t\ts.async = true\n\t\t\ts.dataset.user = u\n\t\t\ts.dataset.campaign = ac\n\t\t\td.getElementsByTagName('head')[0].appendChild(s)\n\t\t})(document, 20440, 'ulrdquoprwqcywqbbgci')<\/script><h2 class=\"wp-block-heading\">Measure Performance with the Right Metrics<\/h2><p>If you can\u2019t measure something, then you can\u2019t track it or improve it, let alone <a href=\"https:\/\/wp-rocket.me\/blog\/measuring-wordpress-performance-using-chrome-developer-tools\/\">measure its impact on website performance<\/a>. Let\u2019s look at the various measurable metrics that you can use to set a website performance budget.<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"341\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Performance-Budget-Metrics-Website.png\" alt=\"Three distinct performance budget metrics\" class=\"wp-image-2446553\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Performance-Budget-Metrics-Website.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Performance-Budget-Metrics-Website-310x132.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Performance-Budget-Metrics-Website-768x327.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Three distinct performance budget metrics<\/figcaption><\/figure><h3 class=\"wp-block-heading\">Quantity-Based Metrics&nbsp;<\/h3><p>This metric type is the easiest to understand, measure, and set. They\u2019re highly useful during the web development phase as they can help both designers and developers to collaborate better.&nbsp;<\/p><p>The most commonly used quantity metrics to set a performance budget include:<\/p><ul class=\"wp-block-list\"><li>Maximum page weight, which you can split up into:<ul class=\"wp-block-list\"><li>Maximum size of images<\/li>\n\n<li>Maximum size of web fonts<\/li>\n\n<li>Maximum number of web fonts<\/li>\n\n<li>Maximum size of scripts (e.g. frameworks, libraries)<\/li>\n\n<li>Maximum number of scripts<\/li>\n\n<li>Maximum size of HTML and CSS<\/li>\n\n<li>Maximum size of videos<\/li><\/ul><\/li>\n\n<li>Total number of external resources, which you can split up into:<ul class=\"wp-block-list\"><li>Maximum number of HTTP requests<\/li>\n\n<li>Maximum number of <a href=\"https:\/\/wp-rocket.me\/blog\/third-party-scripts\/\">third-party scripts<\/a><\/li><\/ul><\/li><\/ul><p>You should note that the above metrics don\u2019t decide the actual user experience. However, they serve as a wonderful starting point for performance budgeting.&nbsp;<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"393\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Google-progressive-page-rendering.png\" alt=\"Progressive page rendering betters user experience\" class=\"wp-image-2446560\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Google-progressive-page-rendering.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Google-progressive-page-rendering-310x152.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Google-progressive-page-rendering-768x377.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Progressive page rendering betters user experience (Source: <a href=\"https:\/\/webdev.imgix.net\/performance-budgets-101\/progressive-page-rendering.png\">Google<\/a>)<\/figcaption><\/figure><p>For example, a user can perceive two pages with the same size and the same number of requests as either slow or fast based on how the pages load their resources. The page that\u2019s optimized better for <a href=\"https:\/\/wp-rocket.me\/blog\/critical-css\/\">critical resource delivery<\/a> will seem much faster to the user than the one that isn\u2019t.&nbsp;<\/p><p>Hence, you need to combine quantity metrics with other user-centric metrics to get a clearer understanding of your site performance.&nbsp;&nbsp;<\/p><h3 class=\"wp-block-heading\">Timing-Based Metrics<\/h3><p>The metric type tells you how fast various aspects of the page load. Two of the most common events used to measure page load speed are <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/DOMContentLoaded_event\">DOMContentLoaded<\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/load_event\">load<\/a> events. However, they don\u2019t give you a full picture of what the user experiences as the server can deliver a minimal page to the user and defer actual content load and display until many seconds later.&nbsp;<\/p><p>To rectify this, the <a href=\"https:\/\/www.w3.org\/webperf\/\">W3C Web Performance Group<\/a> ratified APIs to measure user-performance metrics based on <a href=\"https:\/\/en.wikipedia.org\/wiki\/Real_user_monitoring\">real user monitoring<\/a>. These are some of the most important timing metrics that you can use in your performance budget:<\/p><h4 class=\"wp-block-heading\">First Contentful Paint (FCP)<\/h4><p>FCP measures the time a page takes to load any content that\u2019s rendered on the screen (or browser). It captures the beginning of a page load.<\/p><p>Check out our guide if you want to dive into the <a href=\"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/improve-first-contentful-paint\/\">techniques to improve First Contentful Paint for your site<\/a>.<\/p><h4 class=\"wp-block-heading\">Largest Contentful Paint (LCP)<\/h4><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"196\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Largest-Contentful-Paint-Google.png\" alt=\"Google considers an LCP score below 2.5 sec as good\" class=\"wp-image-2446568\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Largest-Contentful-Paint-Google.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Largest-Contentful-Paint-Google-310x76.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Largest-Contentful-Paint-Google-768x188.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Google considers an LCP score below 2.5 sec as good (Source: <a href=\"https:\/\/web.dev\/lcp\/\">Google<\/a>)<\/figcaption><\/figure><p>LCP measures the time a page takes to render its largest text or image element on the browser. Since LCP gives a better measure of perceived loading experience than FCP and First Meaningful Paint (FMP), it\u2019s a great metric to measure user experience. As per Google, <a href=\"https:\/\/web.dev\/lcp\/\">LCP is the preferred choice<\/a> to measure user-centric performance from now on.&nbsp;&nbsp;<\/p><h4 class=\"wp-block-heading\">First Input Delay (FID)<\/h4><p><a href=\"https:\/\/wp-rocket.me\/blog\/fcp-and-fid-meaning\/\">FID measures the time a page takes to respond to any user interactions<\/a>. For instance, when a user clicks a link or taps a button on the page, the browser should have all the relevant scripts and information loaded to respond to the user\u2019s inputs.<\/p><h4 class=\"wp-block-heading\">Time to Interactive (TTI)<\/h4><p><a href=\"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/improve-time-to-interactive\/\">Time to Interactive<\/a> measures the total time a page takes to render all its elements, load its scripts (if any), and then be capable of responding to user inputs.<\/p><h4 class=\"wp-block-heading\">Total Blocking Time (TBT)<\/h4><p>T<a href=\"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/reduce-total-blocking-time\/\">otal Blocking Time<\/a> is a companion metric of TTI. It\u2019s defined as the time between FCP and TTI. TTI measures the time the page load process blocked the user from interacting with the page. It\u2019s also related to the FID metric.&nbsp;<\/p><h4 class=\"wp-block-heading\">Cumulative Layout Shift (CLS)<\/h4><p><span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\"><a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/improve-cumulative-layout-shift\/\" target=\"_blank\" rel=\"noopener\">Improving the Cumulative Layout Shift score<\/a><\/span>\u00a0is important because this metric measures a page\u2019s visual stability. It measures the total of all the unexpected layout shifts that happen on a page when it loads. For instance, when you load any page, its text block or button suddenly shifts after the page has loaded fully. Watch this <a href=\"https:\/\/youtu.be\/zIJuY-JCjqw\">in-depth video on CLS by Annie Sullivan<\/a> for more information.<\/p><p>Out of all the metrics listed above, LCP, INP, and CLS are the most helpful ones to track your site\u2019s overall performance. They\u2019re also part of Google\u2019s new <a href=\"https:\/\/web.dev\/vitals\/\">Core Web Vitals<\/a> metrics.\u00a0<\/p><p>You can measure all these timing metrics with the help of <a href=\"https:\/\/wp-rocket.me\/blog\/measuring-wordpress-performance-using-chrome-developer-tools\/\">browser development tools<\/a> and online speed testing sites (<a href=\"https:\/\/www.webpagetest.org\/\">WebPageTest<\/a>, <a href=\"https:\/\/wp-rocket.me\/blog\/pagespeed-insights-overview\/\">PageSpeed Insights<\/a>, <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\">Lighthouse<\/a>, etc.).<\/p><h3 class=\"wp-block-heading\">Rule-Based Metrics<\/h3><p>Performance scores calculated by website speed testing tools such as Lighthouse and WebPageTest can serve as metrics to set your site\u2019s performance budget. Since these tools follow general best practice rules to measure site performance, you can rely on them to be relatively stable.&nbsp;<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"499\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/wp-rocket.me-PageSpeed-Insights-Lighthouse.png\" alt=\"You can use PageSpeed Insights score as a measure of performance\" class=\"wp-image-2446595\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/wp-rocket.me-PageSpeed-Insights-Lighthouse.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/wp-rocket.me-PageSpeed-Insights-Lighthouse-300x187.png 300w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/wp-rocket.me-PageSpeed-Insights-Lighthouse-768x479.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">You can use PageSpeed Insights score as a measure of performance<\/figcaption><\/figure><p>If you\u2019re using Lighthouse, you\u2019ll also get hints for optimizing your site performance and even setting a performance budget. For the best results, use a combination of quantity-based, timings-based, and rule-based performance metrics.&nbsp;<\/p><h2 class=\"wp-block-heading\">How to Set a Performance Budget<\/h2><p>Now that you\u2019re familiar with what a performance budget is and the various metrics that you can use to set it, let\u2019s explore how to set a performance budget for your website.&nbsp;<\/p><h3 class=\"wp-block-heading\">Step 1: Preliminary Research<\/h3><p>A website\u2019s performance depends on so many factors. It\u2019s hard to decide on a budget immediately. Start with researching your competition and sites similar to yours (or what you have in mind).&nbsp;<\/p><p>If you\u2019re not sure how to find competition or similar sites, here are a few techniques:<\/p><ul class=\"wp-block-list\"><li>Search on Google with the \u201c<a href=\"https:\/\/ahrefs.com\/blog\/google-advanced-search-operators\/\">related:keyword<\/a>\u201d<strong> <\/strong>advanced search operator<\/li>\n\n<li><a href=\"https:\/\/www.alexa.com\/find-similar-sites\">Find similar sites in Alexa<\/a><\/li>\n\n<li>Use <a href=\"https:\/\/www.similarweb.com\/\">SimilarWeb<\/a><\/li><\/ul><p>If your homepage has an image slider and three more sections with images and texts, then look out for similar pages in the wild and measure their performance. When taking performance measurements of these sites, focus on key metrics such as page weight, page load time, the number of HTTP requests, LCP, FID, and TBT.&nbsp;<\/p><p>If you\u2019re redesigning your website without changing its content much, then you can use your current website\u2019s metrics as a starting point. Start by identifying the most important pages on your website. Typically, it\u2019s either a landing page or pages that attract the highest amount of traffic.&nbsp;<\/p><p>To get a clear picture of how your website stacks up against the competition, create a chart with all the performance metric values.&nbsp;<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"321\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Compatition-Performance-Analysis-Google.png\" alt=\"Chart all the important performance metric values\" class=\"wp-image-2446601\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Compatition-Performance-Analysis-Google.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Compatition-Performance-Analysis-Google-310x124.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Compatition-Performance-Analysis-Google-768x308.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Chart all the important performance metric values (Source: <a href=\"https:\/\/web.dev\/your-first-performance-budget\/\">Google<\/a>)<\/figcaption><\/figure><p><a href=\"https:\/\/www.smashingmagazine.com\/2015\/09\/why-performance-matters-the-perception-of-time\/\">According to research in psychophysics<\/a>, humans only notice the difference between performance value changes when the difference is at least 18%. You can simplify this further into a <strong>20% rule<\/strong>.&nbsp;<\/p><p>So, if your current site\u2019s homepage is loading in 3 seconds, then for your users to notice a difference in performance, it has to load at least 20% faster. That means you must target a page load speed of at least 2.4 seconds.&nbsp;&nbsp;<\/p><h3 class=\"wp-block-heading\">Step 2: Establish a Baseline for Performance<\/h3><p>Use WebPageTest and\/or Chrome Developer Tools to take performance measurements. The values you get won\u2019t be accurate for all conditions, but they\u2019ll serve as an excellent reference point for you to base your performance budget on.&nbsp;&nbsp;<\/p><p>It\u2019s tricky to define a budget with quantity metrics alone. For instance, an ecommerce website will have a lot of product images, but a news website will mostly have text elements. However, if it\u2019s an ad-supported news platform, then it must load third-party ad serving and user tracking scripts that can affect its performance.&nbsp;<\/p><p>If you\u2019re measuring a site\u2019s performance using your browser\u2019s built-in testing tool, make sure to clear your browser\u2019s cache before taking the readings. You can use the <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/clear-cache\/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en\">Clear Cache Chrome extension<\/a> to make this process much faster.<\/p><p>If you\u2019re still finding it difficult to establish a baseline, here are decent values for you to get started:<\/p><ul class=\"wp-block-list\"><li>Under 3 seconds page load time<\/li>\n\n<li>Less than 5 seconds TTI<\/li>\n\n<li>Maximum 200 KB of compressed critical-path resources<\/li><\/ul><h3 class=\"wp-block-heading\">Step 3: Set the Performance Budget<\/h3><p>Based on the values you\u2019ve discovered, set the initial performance budget for your site. The first performance budget will always be an estimation and an upper bound limit, but you should strive towards setting it as accurately as you can. Prioritizing your website for user experience will help you immensely here.<\/p><p>Since the content may vary across pages in your site, set a performance budget for every page type. If you\u2019re running a relatively small website (&lt;15 pages), then you can set a performance budget for every page too as it\u2019ll not take much time.&nbsp;&nbsp;<\/p><p>Still finding it difficult to set the performance budget? If you\u2019re in the planning or development stages of building your website, then you can use a tool like <a href=\"https:\/\/www.performancebudget.io\/\">Performance Budget Calculator<\/a> to estimate the target size of your page and its various elements for different network speeds.<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"549\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Performance-Budget-Calculator.png\" alt=\"Calculate your performance budget with this simple online calculator\" class=\"wp-image-2446607\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Performance-Budget-Calculator.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Performance-Budget-Calculator-284x195.png 284w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/Performance-Budget-Calculator-768x527.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Calculate your performance budget with this simple online calculator<\/figcaption><\/figure><p>You can adjust the size of distinct page elements as per your requirements, but always keep the total page size under the budget limit.&nbsp;&nbsp;<\/p><h3 class=\"wp-block-heading\">Step 4: Use Your Performance Budget<\/h3><p>A performance budget is a reference that\u2019ll guide you and your team towards building a high performance website. Whether you\u2019re a designer, a developer, a marketer, or the site owner, if a decision you made may affect the site performance, then you should consult the performance budget to ensure that it\u2019s within the limits set.&nbsp;<\/p><p>For instance, if you\u2019re in charge of the site development, and the marketing head asks you to add a bloated analytics script to your website, then you can use the performance budget to explain to the stakeholders why it\u2019s not possible to add it without affecting the site\u2019s performance.&nbsp;<\/p><p>Likewise, if you\u2019re a UI\/UX designer and the stakeholders want you to design an image-heavy site, you can use the performance budget to explain why it\u2019s detrimental to performance, and thus conversions.<\/p><p><strong>Note:<\/strong> A performance budget isn\u2019t a gospel. Sometimes, be pragmatic and adjust accordingly while implementing certain features on your site. However, a performance budget will help you avoid these situations frequently.&nbsp;&nbsp;<\/p><h2 class=\"wp-block-heading\">Tracking Performance and Enforcing Performance Budgets<\/h2><p>In the early stages of your website, focus on measuring asset sizes and tracking user-centric performance metrics such as FCP and TTI. Monitor and log these regularly, ideally by <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/navigation-and-resource-timing\/\">getting the metrics directly from real users<\/a>. This will show you how website changes can affect its performance and impact key business metrics.<\/p><p>To make tracking website performance and enforcing performance budgets easier, you can use these tools:&nbsp;<\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.webpagetest.org\/\">WebPageTest<\/a> \u2014 One of the most reliable website speed testing tools. And it\u2019s free! If you create an account on there, you can access your test results for up to one year. You can also automate the tests with the help of <a href=\"https:\/\/www.robinosborne.co.uk\/2019\/07\/01\/automating-and-orchestrating-webpagetest\/\">WebPageTest API<\/a>.<\/li>\n\n<li><a href=\"https:\/\/web.dev\/use-lighthouse-for-performance-budgets\/\">Lighthouse LightWallet<\/a> \u2014 Google Lighthouse includes a feature called LightWallet that you can use to set your performance budget. Every time you test your website in Lighthouse, it\u2019ll automatically show you warnings if any of your metrics exceed the budget limits. You can also <a href=\"https:\/\/web.dev\/using-lighthouse-bot-to-set-a-performance-budget\/\">use the Lighthouse Bot to set a performance budget<\/a> and automate performance testing.&nbsp;<\/li>\n\n<li><a href=\"https:\/\/speedcurve.com\/\">SpeedCurve<\/a> \u2014 This is a premium website performance testing and monitoring tool that also lets you set performance budgets. If it finds any metric exceeding your budget limits, it\u2019ll alert you immediately.<\/li><\/ul><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"348\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/performance-budget-speedcurve.jpg\" alt=\"Track website performance vs performance budget in SpeedCurve\" class=\"wp-image-2446612\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/performance-budget-speedcurve.jpg 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/performance-budget-speedcurve-300x131.jpg 300w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/performance-budget-speedcurve-768x334.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Track website performance vs performance budget in SpeedCurve<\/figcaption><\/figure><ul class=\"wp-block-list\"><li><a href=\"https:\/\/calibreapp.com\/performance-budgets#create-a-budget\">Calibre<\/a> -Another premium website performance tracking tool that you can use to set performance budgets and get alerts when any metric goes above the budget limit.<\/li><\/ul><h2 class=\"wp-block-heading\">Wrapping Up<\/h2><p>A performance budget helps you maintain the focus on your site\u2019s performance without harming user experience or site functionality. It\u2019ll serve as a guide for you and your team to decide which features to add to the site, and which ones to drop. The result is a site that loads and feels fast for your users.&nbsp;&nbsp;<\/p><p>If you\u2019re primarily an online business, website performance matters more than anything else to achieve your business goals. Setting a performance budget enables all the stakeholders to get on board and work together as a team towards a common cause: website performance.&nbsp;<\/p><p>Get started with setting a performance budget for your site today!<\/p><p><em>Want to know more about how to set a performance budget for your site? Drop in a comment below.<\/em><\/p>","protected":false},"excerpt":{"rendered":"<p>Do you want to get started with setting a performance budget for your site? Our tutorial will tell you how to do that in 4 steps and achieve your business goals efficiently.<\/p>\n","protected":false},"author":131875,"featured_media":2446773,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"kia_subtitle":"","footnotes":""},"categories":[63],"tags":[],"class_list":["post-2446080","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-cache"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Web Performance Budget: What It Is + How to Set and Measure It<\/title>\n<meta name=\"description\" content=\"Want to get started with setting a performance budget for your site? Learn how to do it in 4 steps and achieve your business goals efficiently.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wp-rocket.me\/blog\/performance-budgets\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Performance Budget: What It Is + How to Set and Measure It\" \/>\n<meta property=\"og:description\" content=\"Want to get started with setting a performance budget for your site? Learn how to do it in 4 steps and achieve your business goals efficiently.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wp-rocket.me\/blog\/performance-budgets\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Rocket\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-23T08:43:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-05T09:09:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/performance-budget.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"460\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wp_rocket\" \/>\n<meta name=\"twitter:site\" content=\"@wp_rocket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/wp-rocket.me\/blog\/performance-budgets\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/performance-budgets\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/person\/0152a367f602a6628c0bc4ecace1fc34\"},\"headline\":\"Web Performance Budget: What It Is + How to Set and Measure It\",\"datePublished\":\"2020-06-23T08:43:00+00:00\",\"dateModified\":\"2024-07-05T09:09:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/performance-budgets\/\"},\"wordCount\":2753,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/wp-rocket.me\/#organization\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/performance-budgets\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/performance-budget.png\",\"articleSection\":[\"Page speed and caching\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/wp-rocket.me\/blog\/performance-budgets\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wp-rocket.me\/blog\/performance-budgets\/\",\"url\":\"https:\/\/wp-rocket.me\/blog\/performance-budgets\/\",\"name\":\"Web Performance Budget: What It Is + How to Set and Measure It\",\"isPartOf\":{\"@id\":\"https:\/\/wp-rocket.me\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/performance-budgets\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/performance-budgets\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/performance-budget.png\",\"datePublished\":\"2020-06-23T08:43:00+00:00\",\"dateModified\":\"2024-07-05T09:09:13+00:00\",\"description\":\"Want to get started with setting a performance budget for your site? Learn how to do it in 4 steps and achieve your business goals efficiently.\",\"breadcrumb\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/performance-budgets\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wp-rocket.me\/blog\/performance-budgets\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/blog\/performance-budgets\/#primaryimage\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/performance-budget.png\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/performance-budget.png\",\"width\":1100,\"height\":460,\"caption\":\"How to set up a performance budget\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wp-rocket.me\/blog\/performance-budgets\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wp-rocket.me\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Page speed and caching\",\"item\":\"https:\/\/wp-rocket.me\/blog\/wordpress-cache\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Web Performance Budget: What It Is + How to Set and Measure It\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wp-rocket.me\/#website\",\"url\":\"https:\/\/wp-rocket.me\/\",\"name\":\"WP Rocket\",\"description\":\"Plugin d&#039;optimisation de sites WordPress\",\"publisher\":{\"@id\":\"https:\/\/wp-rocket.me\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wp-rocket.me\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/wp-rocket.me\/#organization\",\"name\":\"WP Rocket\",\"url\":\"https:\/\/wp-rocket.me\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png\",\"width\":150,\"height\":41,\"caption\":\"WP Rocket\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829\",\"https:\/\/x.com\/wp_rocket\",\"https:\/\/www.youtube.com\/channel\/UC1ozThXHd1IWIZ5wkshgp_Q\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/person\/0152a367f602a6628c0bc4ecace1fc34\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2250657129436509050f973d3042ddd7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2250657129436509050f973d3042ddd7?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, and creator. He\u2019s a huge fan of Free and Open-Source Software. Apart from tech, he finds science, philosophy, and food exciting. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/wp-rocket.me\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web Performance Budget: What It Is + How to Set and Measure It","description":"Want to get started with setting a performance budget for your site? Learn how to do it in 4 steps and achieve your business goals efficiently.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wp-rocket.me\/blog\/performance-budgets\/","og_locale":"en_US","og_type":"article","og_title":"Web Performance Budget: What It Is + How to Set and Measure It","og_description":"Want to get started with setting a performance budget for your site? Learn how to do it in 4 steps and achieve your business goals efficiently.","og_url":"https:\/\/wp-rocket.me\/blog\/performance-budgets\/","og_site_name":"WP Rocket","article_publisher":"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","article_published_time":"2020-06-23T08:43:00+00:00","article_modified_time":"2024-07-05T09:09:13+00:00","og_image":[{"width":1100,"height":460,"url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/performance-budget.png","type":"image\/png"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_creator":"@wp_rocket","twitter_site":"@wp_rocket","twitter_misc":{"Written by":"Salman Ravoof","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wp-rocket.me\/blog\/performance-budgets\/#article","isPartOf":{"@id":"https:\/\/wp-rocket.me\/blog\/performance-budgets\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/wp-rocket.me\/#\/schema\/person\/0152a367f602a6628c0bc4ecace1fc34"},"headline":"Web Performance Budget: What It Is + How to Set and Measure It","datePublished":"2020-06-23T08:43:00+00:00","dateModified":"2024-07-05T09:09:13+00:00","mainEntityOfPage":{"@id":"https:\/\/wp-rocket.me\/blog\/performance-budgets\/"},"wordCount":2753,"commentCount":0,"publisher":{"@id":"https:\/\/wp-rocket.me\/#organization"},"image":{"@id":"https:\/\/wp-rocket.me\/blog\/performance-budgets\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/performance-budget.png","articleSection":["Page speed and caching"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wp-rocket.me\/blog\/performance-budgets\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wp-rocket.me\/blog\/performance-budgets\/","url":"https:\/\/wp-rocket.me\/blog\/performance-budgets\/","name":"Web Performance Budget: What It Is + How to Set and Measure It","isPartOf":{"@id":"https:\/\/wp-rocket.me\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wp-rocket.me\/blog\/performance-budgets\/#primaryimage"},"image":{"@id":"https:\/\/wp-rocket.me\/blog\/performance-budgets\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/performance-budget.png","datePublished":"2020-06-23T08:43:00+00:00","dateModified":"2024-07-05T09:09:13+00:00","description":"Want to get started with setting a performance budget for your site? Learn how to do it in 4 steps and achieve your business goals efficiently.","breadcrumb":{"@id":"https:\/\/wp-rocket.me\/blog\/performance-budgets\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wp-rocket.me\/blog\/performance-budgets\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/blog\/performance-budgets\/#primaryimage","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/performance-budget.png","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/performance-budget.png","width":1100,"height":460,"caption":"How to set up a performance budget"},{"@type":"BreadcrumbList","@id":"https:\/\/wp-rocket.me\/blog\/performance-budgets\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wp-rocket.me"},{"@type":"ListItem","position":2,"name":"Page speed and caching","item":"https:\/\/wp-rocket.me\/blog\/wordpress-cache\/"},{"@type":"ListItem","position":3,"name":"Web Performance Budget: What It Is + How to Set and Measure It"}]},{"@type":"WebSite","@id":"https:\/\/wp-rocket.me\/#website","url":"https:\/\/wp-rocket.me\/","name":"WP Rocket","description":"Plugin d&#039;optimisation de sites WordPress","publisher":{"@id":"https:\/\/wp-rocket.me\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wp-rocket.me\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wp-rocket.me\/#organization","name":"WP Rocket","url":"https:\/\/wp-rocket.me\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png","width":150,"height":41,"caption":"WP Rocket"},"image":{"@id":"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","https:\/\/x.com\/wp_rocket","https:\/\/www.youtube.com\/channel\/UC1ozThXHd1IWIZ5wkshgp_Q"]},{"@type":"Person","@id":"https:\/\/wp-rocket.me\/#\/schema\/person\/0152a367f602a6628c0bc4ecace1fc34","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2250657129436509050f973d3042ddd7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2250657129436509050f973d3042ddd7?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, and creator. He\u2019s a huge fan of Free and Open-Source Software. Apart from tech, he finds science, philosophy, and food exciting. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/wp-rocket.me\/"]}]}},"_links":{"self":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/posts\/2446080"}],"collection":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/users\/131875"}],"replies":[{"embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/comments?post=2446080"}],"version-history":[{"count":0,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/posts\/2446080\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/media\/2446773"}],"wp:attachment":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/media?parent=2446080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/categories?post=2446080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/tags?post=2446080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}