Continuous Integration Using WebPagetest and Webpack
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.
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.
WebPagetest API
Webpagetest-api gives a beautiful interface for accessing webpagetest.org’s results and there are tons of options that you can customise.
import webPageTest from 'webpagetest'
const wpt = new webPageTest('https://www.webpagetest.org', APIKey)
wpt.runTest('housing.com', {}, function(err, data) {
// convertToMarkdown(data)
})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.
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.
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.
