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.
Performance Audits
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
The size of assets in an application affects performance. If an image isn’t optimized or its file size is large, a user will have to wait for this image to download and process in the browser, resulting in decreased performance. Javascript files are particularly sensitive as we strive to deliver minimal amounts of code to the browser in efforts to improve critical rendering paths.
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.
Heap Snapshots
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
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.
Unused CSS and JavaScript
Modern tooling attempts to detect what code isn’t used in your application. However, not everyone takes advantage of these tools and they aren’t always effective. Gimbal launches a headless Chrome instance to check for unused CSS and JavaScript. Knowing how much unused source your application ships with can give you an idea of what will affect performance.
Installation and Usage
Install Gimbal via npmjs
npm install -g @modus/gimbal
This then allows Gimbal to be executed globally:
gimbal --help
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.
Next Steps
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.
Routes
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.
Conclusion
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.
Interested in using Gimbal to improve web application performance? Find the Gimbal project on the Modus Labs website or on GitHub.
