Enterprises of all sizes have been witnessing a strong correlation of latency to the loss in revenue and productivity. Strong web performance is a Definition of Done for the best web development teams, but also a top priority for high-achieving product owners. And, at Modus, we’ve increasingly seen it become a requirement for our clients’ applications.
Continuous Performance Budgeting
Throughout the development lifecycle of an application, code updates, image additions, bundling decisions, and many other changes can affect the performance of the application.
Currently, measuring the effect of these changes is done through complicated and time-consuming performance audits. With Gimbal, safeguarding performance targets becomes an integration test. After all, degraded performance is another form of regression.
With so many options for audits and performance improvements, developers often struggle with prioritizing the different aspects of the performance tuning process. Gimbal makes those audits simple by simplifying configuration and automating the process. Read on to find out more about the latest project from Modus Labs.
What is Gimbal?
Let’s address the first question everyone is wondering: where does the name “Gimbal” come from? In filmmaking, a gimbal stabilizes a camera through any disturbances and changes. Modus’ Gimbal project helps stabilize web applications with automated monitoring and alerting. By integrating within your existing setup, it’s easy to see if updates such as code changes will have an effect on performance.
Gimbal comes prepared with a few performance audits that measure different aspects of a web application. Gimbal also comes preconfigured with thresholds that allow a simple application, such as the create-react-app generated template, to pass the audits. As your application grows and requires more, it’s easy to configure Gimbal for new thresholds.
File and Directory Sizes
Gimbal allows you to specify glob paths and maximum sizes of individual files and directories. Your application size will increase as you develop and these thresholds are a great way to keep an eye on how much of an effect new code or images will have.
When you load a web page in a browser, everything on that page, from text to images to videos, is loaded into memory. Increased memory usage will result in a decrease in device performance. This can significantly deteriorate user experience to the extent of the browser crashing. Gimbal is able to capture the memory used and configure it with a threshold so that the test would fail if the memory used exceeds this threshold.
Google Lighthouse runs a few different audits on any web page. These audits score performance, progressive web app compliance, accessibility, best practices, and SEO. If you’re used to the Chrome Audits tab of the DevTools, these are the same audits you are used to with added automation capabilities. Gimbal can execute the Lighthouse tooling with individual thresholds for each category.
Gimbal runs an entire suite of audits in a Continuous Integration environment in under 6 seconds
Installation and Usage
Install Gimbal via
npm install -g @modus/gimbal
This then allows Gimbal to be executed globally:
We also have sample CircleCI and Travis CI configs to show how you can run Gimbal in a Continuous Integration environment. When running from CircleCI or Travis CI, you can even set the
GITHUB_AUTH_TOKENenvironment variable and Gimbal will comment on the pull request or commit (depending what triggered the CI run) with the report allowing each code change to be run through the performance audits. If an audit exceeds a threshold, Gimbal will exit with code 1 allowing the CI run to fail and prevent bad code from being merged.
Gimbal comes with robust configuration capabilities that will allow customization of audits, thresholds, and triggers. We even ship a plugin ecosystem that allows you to add your own extensions. Use plugins for the calculation of differences between branches or the ability to store reports in a database.
We treated version one as a Minimum Viable Product (MVP). Here is a list of ideas we’ve had to push this project further:
CI and VCS Support
Version one has support for CircleCI and Travis CI with GitHub. This means that when Gimbal is executed from CircleCI or Travis, Gimbal will comment on a GitHub pull request or commit. However, these are not the only CIs, and we want to expand our support.
Addition of More Audits
The current audit gives developers a very good idea of what effect changes will have on an application. However, finding the root cause of each issue or detecting opportunities for performance improvements is much more complex and often require human intervention. We want Gimbal to reduce the need for human thinking and point to the exact tips on how your application can be loaded near instantly.
At the moment, some audits only navigate to the root page. Unfortunately, this isn’t a complete picture of an app and we need to support going to multiple different pages to get a more complete measurement of performance.
We are excited to continue developing and growing the Gimbal project. We hope Gimbal will be an invaluable tool for anyone looking to achieve web performance. We invite you to take part in this project and its future. We also welcome pull requests and issues.