Add performance budgets to your CI

Nowadays several solutions exist to add performance budgets to your Continuous Integration. They make sure your application does not get bigger than a given threshold. The most famous is probably github.com/siddharthkp/bundlesize. It checks the final size of your bundle. Another popular tool is github.com/ai/size-limit. It does not simply check the resulting file size but calculates the time it would take a browser to download and execute your JavaScript.

Performance budgets is a widely discussed topic. web.dev has a whole section about it called Fast load times where they show how important it is to measure, optimize, and monitor if you are to get fast and stay fast. They state that performance plays a significant role in the success of any online venture. Learn about Performance budgets 101, Your first performance budget, and Incorporate performance budgets into your build process. Addy Osmani also wrote a great blog post called Start Performance Budgeting with lots of useful tools and additional information. Last but not least even the government (U.S. Web Design System) has a huge knowledge base about performance guidelines.

Today I would like to show you how easy it is to add performance budgets using seriesci. We are using create-react-app to get started. npm run build creates an optimized production build.

$ npm run build

> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  56.55 KB  build/static/js/2.c0acc676.chunk.js
  766 B     build/static/js/runtime-main.ad1ec6cf.js
  671 B     build/static/js/main.e35cb6f2.chunk.js
  417 B     build/static/css/main.b100e6da.chunk.css

All the files you need to deploy your application are now inside the ./build folder.

$ tree build/
build/
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── precache-manifest.204e895e9c901dc7877f275e185ce090.js
├── robots.txt
├── service-worker.js
└── static
    ├── css
    │   ├── main.b100e6da.chunk.css
    │   └── main.b100e6da.chunk.css.map
    ├── js
    │   ├── 2.c0acc676.chunk.js
    │   ├── 2.c0acc676.chunk.js.map
    │   ├── main.e35cb6f2.chunk.js
    │   ├── main.e35cb6f2.chunk.js.map
    │   ├── runtime-main.ad1ec6cf.js
    │   └── runtime-main.ad1ec6cf.js.map
    └── media
        └── logo.25bf045c.svg

4 directories, 18 files

We would like to keep an eye on the overall size of this folder. To get the total size for all files within build and its subdirectories use the following command.

$ du -sh build/
932K    build/

Since we are only interested in the 932K value pipe the result through awk to filter out the first column.

$ du -sh build/ | awk '{print $1}'
932K

We are pretty much done. We can use this value and post it to seriesci. Add the following script to your Continuous Integration to make sure you check the bundle size on every commit.

du -sh build/ | awk '{print $1}' | xargs -I {} curl \
    --header "Authorization: Token ${TOKEN}" \
    --data-urlencode value="{}" \
    --data sha="$(git rev-parse HEAD)" \
    https://seriesci.com/api/repos/seriesci/cra/bundlesize/combined

What is great about this solution is that you do not have install any extra dependencies. You do not have to learn any more packages and simply use the tools you already know like du and awk. They are available on any CI/CD solution you are using. You will also get a beautiful chart and you will be able to see how your bundle size evolves over time. With all the other solutions you will only get an absolute value but you won't get any previous values. However this is what we're really interested in. We are not interested in the absolute number but in the relative one. We would like to see how much the bundle size changed compared to the previous commit.

Stay tuned for the next blog post where we will explain how to add Lighthouse audits to our project. Start adding performance budgets to your application by installing the seriesci GitHub app for your repository. It is free for open source and easy to integrate. Check out our demo project at GitHub github.com/seriesci/cra and at seriesci seriesci.com/seriesci/cra.