At the start of the year, we at Cornerstone decided to change our mindset as a company. Be more environmentally friendly. We’re now working on solutions to our carbon footprint across the whole business. These include things related to operations and product development. With those conversations in mind, I thought about how our technology impacts our carbon footprint. It’s a very important part of the business that we should consider. Since I’m the Front End Web Developer responsible for our web app, I set a course to change that. This won’t be a very technical article, but an overview of the steps taken and tools used. This is how we made our web app greener.
Our front end stack
To put this into context, in the past 3 years, we’ve been rolling out what many people consider a typical React front end stack. React with the usual suspects, Redux, Webpack, Babel, React Route… And the list keeps going, with some more sprinkles on the way. Perceived performance has never been a problem, but we can always improve it.
Cut to the chase, tell me what to do
Making your web app greener, fortunately, goes hand to hand with improving performance. Once you start cutting down on code size, the most likely scenario is performance to increase. That also means less code for the client to download and parse. In return, it consumes less energy, reducing the carbon footprint. Everyone is happy. This sounds very obvious, because it is. That’s the summary, on to the details.
Track your progress
This was something that we lacked in the beginning, because I’ve only recently discovered the Website Carbon Calculator. It’s a very interesting tool that will tell you how green your web page/app is. Unfortunately we can only show our current results. Above all, tracking progress is important to understand the impact of changes and for stakeholders. Another must use tool is Google’s audit tool Lighthouse. It will help you understand any possible bottlenecks in your application. You can also keep score to assess changes, but do it with a pinch of salt. It’s important not to become obsessed with pursuing the perfect score, I’ve been guilty of it.
Analyse, plan, take action
The key factor in all this is being able to know what to change. If you’re using Webpack, the easiest way to start, is to install (if you haven’t already) a plugin called Webpack Bundle Analyzer.
(example taken from Webpack Bundle Analyzer repo)
This tool will create a report of your built application. It shows files with included packages in each one and respective sizes. With this knowledge, it’s now time to identify which packages have the biggest impact in the main bundle. No big secret, it’s all down to removing extra code and making the application footprint smaller. In other words, here’s my advice. Keep an eye on some dependencies that will automatically include other dependencies. You’ll see things like Lodash included in the bundle, even if you don’t use it directly. If possible, get rid of all those extra dependencies. Some can be easily replaced with simpler versions of other packages, or even a custom version. Not everything needs to be a third party dependency. Always weight in the cost/benefit before adding a new one.
Know your dependencies
Something I’ve been using for quite some time now is Bundlephobia. This tool’s purpose is to show the size of any npm package, with its own dependencies if any. This makes our life much easier. In some cases we can even replace a dependency with a suggested smaller alternative, resulting in a win-win situation.
Looking forward
Our plan is to continue pushing for more improvements, where possible. It’s now not only a matter of making the application more performant for our users, but also our green mindset. Calculating our carbon footprint will take into account the web application and its services. If you want to know how we’re doing this as a business, please read more about Cornerstone & the environment.