Skip to content
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
June 12, 2019

Auditing Web Performance Continuously with Gimbal

DevOps, JavaScript, Open Source and Emerging Technology, React

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.

Gimbal runs an entire suite of audits in a Continuous Integration environment in under 6 seconds
Gimbal runs an entire suite of audits in a Continuous Integration environment in under 6 seconds

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.

Posted in DevOps, JavaScript, Open Source and Emerging Technology, React
Share this

Mitchell Simoens

Mitchell Simoens is a Senior Front End Engineer at Modus Create. Mitchell has spent the last 10 years working with Ext JS including developing core functionality, Sencha Fiddle and (I hope your insurance covers blown minds) supporting the online community with over 40,000 posts on the Sencha Forums. Before working with Ext JS, Mitchell used Perl and PHP but loves spending time with Node JS for today's needs. When not working, you can find Mitchell relaxing with his wife and daughter, or developing his talents as an amateur furniture maker.
Follow

Related Posts

  • JS Performance Tips and Tricks
    JavaScript Performance Tips & Tricks

    Some say spending time developing for performance is not worth it when hardware upgrades are…

  • JS Performance Tips and Tricks
    JavaScript Performance Tips & Tricks

    Some say spending time developing for performance is not worth it when hardware upgrades are…

Subscribe to the Modus Newsletter

Receive the latest blog articles and insights every month from the Modus team.

Let's Chat

If forms aren’t your thing, you can always call us (+1-855-721-7223).

Modus-Logo-Primary-White.svg
  • Services
  • About
    • Newsroom
  • Partners
  • Work
  • Insights
    • Blog
    • Modus Labs
  • Careers
Virginia (US)

12100 Sunset Hills Road
Suite 150
Reston, Virginia, 20190
Tel: +1-855-721-7223

California (US)
12130 Millennium Dr

Los Angeles, CA 90094

Missouri (US)
609 E High St

Jefferson City, MO 65101

Romania

Str. Mihai Veliciu, no. 17
Cluj-Napoca, Romania
Tel: +40-0786-887-444

Costa Rica

2nd Floor, Plaza Koros, Av 3
San José, Santa Ana, Costa Rica

© 2021 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

This website uses cookies.
These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Accept
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

Scroll To Top