Continuous Integration Using WebPagetest and Webpack

Rahul Yadav
Oct 7, 2016 · 3 min read

When we talked about Housing Go at JSFoo, there were a lot of queries about how we maintain the performance of our app over the time. Below is a description of how we do it.

We started development of Housing Go with the focus on metrics like sizes of the chunks generated using Webpack, Time to First Byte, First Paint, Speed Index etc. We knew to keep the app performant we have to make sure that we optimise and maintain these metrics by following a standard.

The need to measure how every pull request changed the metrics, became very important to us.

We use Jenkins to build and deploy our code but the access of deployment is limited to a few. So anytime a developer wanted to deploy something to run tests or measure performance, he/she would have to catch someone who had the access to deploy the code, which slowed down the pace and created unnecessary dependencies.

We wanted to give every developer the ability to run tests and see the WebPagetest results. So we enabled continuous development using webhooks and made it as easy as applying a label.

Image for post
Image for post
‘Run Test’ label to start test

Whenever someone adds the label `Run Tests` on a pull request, that branch gets deployed on our beta environment and the tests are run. Once the tests are successful, the label changes to `Tests Completed` and the file sizes and WebPagetest results is commented on the PR.

File Sizes

We use webpack’s profile option to calculate the sizes of the files.

webpack --profile --json > stats.json

We use this data to create a markdown table showing the current file sizes and how it is different to the latest deployed master branch.

Image for post
Image for post

WebPagetest API

Webpagetest-api gives a beautiful interface for accessing webpagetest.org’s results and there are tons of options that you can customise.

Route Based Statistics

Using the data from webpagetest results we make sure that all the important metrics are tracked and kept under check. This is how it looks in the PR.

Image for post
Image for post

Network Waterfall & Timeline Screenshots

Using the same data we also visualise network waterfall image and UI screenshots with time. This helps us to monitor the integrity of the routes and also catch some big issues like UI repainting.

Image for post
Image for post

This helps the developer and the reviewer to get an idea about how a particular branch is affecting the performance and helps us keep HousingGo performant.

Engineering @ Housing/Proptiger/Makaan

Engineering and technology articles from developers

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store