How to Create a Performance Budget for Your Website

Building a workflow to improve website download speed and performance

Budget figures
Establishing a performance budget is important for fast loading websites.

Ask someone if they want their website to be user friendly and you will most certainly receive an affirmative answer. One of the aspects of a user friendly site is that is loads quickly for all visitors, regardless of the device they are using at that time. Unfortunately, as anyone who has surfed the Web anytime recently has attest to, fast-loading sites are not necessarily the norm.

Today’s websites are big – too big, in fact.

The average size of a website today weighs in at over 2MB in size. By comparison, back in 2012 sites averaged 1MB in size, and at the time people thought that was a huge deal and that sites needed to have that size reduced. Yet, here we are 4 years later and the opposite has happened.

The reasons for the page bloat we see today are varied – gigantic images that are not properly optimized for the screen, a reliance on scripts and frameworks that add extra weight to pages, heavy feeds from social sites, and more all add up create big pages. To combat this problem, web designers need to make performance a core part of a site’s deliverables. One way this can be done is by establishing a performance budget for the  sites they create.

What is a Performance Budget?

Like any budget, a performance budget dictates how much can be spent on certain items. Think about a financial budget that you establish for your household.

This budget will likely have line items for your rent or mortgage, utilities, food, entertainment, and other expenses that you have. You can only afford so much, so you need to determine how your budget will be broken down. You can spend more in one area as long as you cut spending in other areas so that, in the end, you stay within your pre-determined spending limit.

The same is true for websites and the performance budgets you establish for them.

A website’s budget will consist of the various elements that make up those pages, including HTML files, CSS style sheets, images (this is the big one, accounting for over 65% of the size of webpages today), scripts, fonts, and more. Just like with a financial budget, you must start by establishing an overall limit for your website’s size. From there, you can work backwards to determine how much can be spent on individual items.

Establishing a Budget

So how much can you afford to “spend” on a webpage’s file size? As a general rule, I try to keep all pages between 600k to 1MB in size. The higher end of that range is still a somewhat sizable download, so my goal is obviously to get a page toward the lower end of that range – or even lower! The reality, however, is that not all pages in a website will weigh the same. Certain pages will be heavier than others, so I use this range as a guideline. I am always attempting to make a page as light as possible, but I am also realistic in this endeavor.

For instance, a page on a site that is displaying some basic text content, like a “Contact Us” page, is going to be much easier to squeeze down to the lower range of my budgetary goal than a product page on an Ecommerce site.

This is because that Contact page is unlikely to have some of the page elements that the product pages will need – elements that contribute to a large page. To most effectively display that product, its page is likely to include some kind of image gallery. Not only will this require the download of several images, but this feature may also use some Javascript that will need to be loaded on that page. There may also be video or audio content or that must be fed into the page and there will be functional code aspects that power the site’s shopping cart, etc.  All of these items add up to much greater download requirements than the simple “Contact Us” page would have. Trying to squeeze both of these page types into the same pre-set file size limit is folly. You need to have a threshold that you will not exceed (again, for me this is 1MB for even my largest pages), but you must also be flexible and realistic in your assessment of these pages.

Creating Line Items

With your overall budget in mind, you can now begin breaking that budget down into individual items. The categories in your website budget will include:

  • HTML
  • Scripts
  • Fonts
  • HTML
  • CSS
  • Other

Starting with images, since that category will make up most of your page’s weight, I try to allocate about 60% of a page’s size here. So if my goal is 600MB, I can “spend” 360MB on images. This is very doable, even for homepages featuring large, screen-spanning images. Of course, those images must be properly optimized and compressed for web delivery, and there will be times when you have to make some necessary cuts to achieve this goal. Since the biggest contributor to page bloat is too-heavy images, by succeeding here, you will be more than halfway to achieving your overall page weight goal.

After images, the next two areas that are likely to eat into your budget the most are scripts and fonts. If your page relies heavily on Javascript, for instance if it has social media feeds or uses a Javascript-heavy framework, this will absolutely be a factor. My goal is to keep my script downloads to about 10% of my page weight or less.

Fonts are the next category to consider, and they can be a challenging component when creating a budget. Depending on the number of web fonts you load, and how large those individual files are, this is one page component that can really vary in terms of size. I typically aim for about 15% or less of my page’s weight for fonts. In the end, a larger percentage used on fonts will require some cuts elsewhere, which we will cover shortly.

Finally, you must weigh a page’s HTML and CSS, both of which should be pretty slim, as well as an “other” category, which I include as a catch-all segment. In many cases, your sites may not have anything that falls into this “other” section.  For the HTML and CSS, I typically am looking for anywhere from 5% to 15% of the page’s weight. Normally, my CSS file will be larger than the HTML, but since my entire site will use a single CSS page, that file will be cached for visitors after they load it on the first page.

This will help the speed of subsequent pages that they visit on the site.

So in the end, here is a sample budget:

  • Images – 60%
  • Scripts – 10%
  • Fonts – 15%
  • HTML – 8%
  • CSS – 12%
  • Other – 0%

Testing Your Page

As you build your page, you will want to test it for download speed and overall performance. There are a number of powerful tools available online that can help you test your webpage and determine where you may be able to make improvements to help speed it up. Many of these tools will break the page’s download down into the categories listed above so you can see where you may have gone over your budget and where some changes may have to be made. This brings us to the “cutting” phase of our process.

Making Cuts

Like any budget, there will be times when you exceed your numbers and you have to make some cuts. In some cases, you may make sacrifices in one area so that you can spend more in another. For instance, if your site uses multiple web fonts, you may exceed your goal numbers for that category. You can cut down the number of web fonts you are using and use some system fonts instead, or you can cut from other lines in your budget to free up that file size to use on the site’s typography. The choice here is yours and you will have to make this decision on a project-by-project, or even a page-by-page, basis.

Sometimes, the cuts you will make are to existing files. This may mean compressing and optimizing images, or it could be minifying your CSS or Javascript files to remove unnecessary whitespace, which will also reduce the file size.

Once you have made your cuts, you can retest your page to see what the impact was. From there, you will determine whether you are all set or if additional cuts are needed. Once again, remember that not all pages will weigh the same!  My homepage is likely going to weigh more than most other pages in the site, and this is OK.  We still may decide to cut out certain aspects of that page, like an animated carousel that requires multiple images and Javascript files for its display (in my experience, removing homepage carousels is one of the best ways to significantly reduce that page’s size without effecting the success of that page).

In the end, once you have made as many cuts as you can and reduced the page’s file size as much as possible, you must accept that your performance budget is a guide and you must be realistic in how you follow that guide on your sites.

Continuous Testing

Performance testing does not end once a site goes live. Items that are added to that site over time will increase its file size and affect its performance, so that website must continue to be evaluated and improved through its entire life-cycle. Just as you established a performance budget for the development of the site, so should the site adhere to this budget in the future. Any time additions are made to a page, a test should be run. Additionally, whomever is charged with updating a site using a CMS or other tools should understand the performance goals of the site and make optimizing and  testing part of their workflow.