How I Doubled My MacBook‘s Battery Life with One Simple Trick

As a seasoned full-stack developer, I spend an inordinate amount of time in a web browser. Whether I‘m coding, testing, debugging, or just researching, having multiple tabs open in Chrome is pretty much a given.

While Chrome is unparalleled in terms of developer tools and extensions, it‘s also notorious for its hefty appetite for RAM and CPU cycles. Over time, I started noticing my MacBook‘s battery life declining – what used to easily last a full day was now struggling to make it to the afternoon without a charge.

Fed up with constantly hunting for power outlets, I decided to investigate what was draining my battery and if there was anything I could do about it (short of switching to a more energy-efficient but less feature-rich browser). What I found was surprising – by closing a single browser tab, I was able to literally double my battery life. Here‘s how.

The Energy Impact of Web Browsing

First, some context. Studies have shown that for the average user, web browsing accounts for a significant portion of a laptop‘s energy consumption. A 2016 analysis by 7Days tested a MacBook Air‘s battery life under different usage scenarios and found that "browsing with Safari" yielded 6.5 hours, while "browsing with Chrome" only achieved 5 hours [source].

But why does web browsing, and Chrome in particular, consume so much power? A lot of it has to do with how modern web applications are built.

The JavaScript Factor

JavaScript, the programming language that powers most interactive features on the web, has come a long way since its humble beginnings. Modern JavaScript frameworks like React and Angular allow developers to build incredibly complex and dynamic applications that run entirely in the browser.

However, all that client-side computation comes at a cost. JavaScript is single-threaded, meaning it can only process one task at a time. When a page has a lot of scripts running (tracking user activity, updating dynamic content, animating elements, etc.), it can quickly max out a CPU core, leading to increased energy consumption.

In fact, a 2019 study by Greenspector found that JavaScript execution was responsible for an average of 50% of the total energy consumed while browsing popular websites [source].

Animations and Automatic Updates

Besides JavaScript, other common web development practices can also contribute to excess energy usage. CSS animations, while generally more efficient than their JavaScript equivalents, can still tax the CPU if overused or not optimized.

Similarly, pages that automatically refresh or update their content (think live blogs, stock tickers, etc.) keep the CPU busy even when you‘re not actively engaging with them.

Diagnosing the Issue

With this knowledge in mind, I set out to see what specific parts of my browsing habit were draining my battery the most. The first step was to consult Activity Monitor, a tool built into MacOS that shows the CPU, memory, energy, and disk usage of every running application and process.

Opening Activity Monitor and navigating to the Energy tab, I was greeted with this sight:

Application	Energy Impact (Avg.)
Google Chrome	112.8
Slack	26.3
Visual Studio Code	14.5
Finder	3.2
Everything else…	< 3

Google Chrome was far and away the biggest energy hog, with an average energy impact over 100. For context, Apple considers an "average" energy impact to be around 0-20.

Clearly, Chrome was a major contributor to my battery woes, but I wasn‘t about to ditch my primary development browser. I needed to go deeper.

Chrome‘s Task Manager

What many Chrome users don‘t realize is that the browser has its own built-in task manager (much like the Windows utility of the same name). It provides a detailed breakdown of the memory and CPU usage of every running Chrome process – each open tab, extension, and service gets its own entry.

To open Chrome‘s task manager, click the menu icon, navigate to "More tools", and select "Task manager" (or just press Shift+Esc with Chrome in focus). You‘ll be presented with a window like this:

Here, you can see the memory footprint and CPU usage of every Chrome process. Sorting the list by CPU, I quickly identified the main offender – a pinned tab for xe.com, a currency exchange rate website, was consistently consuming 20-30% of my CPU.

XE.com has several auto-updating elements (exchange rate charts, price tickers, etc.) which, while useful, apparently hammer the CPU even when the tab isn‘t active. By keeping this tab open all the time (it was pinned, after all), I was essentially forcing my laptop to continuously do needless work, wasting precious battery life.

The Fix

The solution, once I had identified the problem, was simple – I closed the xe.com tab. Checking Activity Monitor again, Chrome‘s average energy impact had dropped by over half and was now comparable to my other apps.

Over the next few days, I kept an eye on Chrome‘s task manager, closing any tabs that were consuming an unusual amount of CPU time. The result was staggering – my MacBook, which previously struggled to make it past lunch on a charge, was now easily lasting until the end of the workday with power to spare.

By simply being mindful of which tabs I kept open (and closing the resource-intensive ones when not in use), I was able to roughly double my battery life with no other changes to my workflow.

Lessons for Developers

As web developers, we have a responsibility to ensure our applications are as resource-efficient as possible. With the proliferation of laptops, tablets, and smartphones, more and more of our users are browsing on battery power – wasting their limited energy on unnecessary computation isn‘t just inconsiderate, it‘s bad for business.

Here are some tips for keeping your web apps lean and energy-friendly:

Optimize Your JavaScript

JavaScript is often the biggest culprit when it comes to excess CPU usage. Audit your scripts and look for opportunities to optimize:

• Use efficient algorithms and data structures
• Minimize DOM manipulation
• Debounce event handlers
• Lazy-load non-critical resources
• Avoid memory leaks

Tools like Google‘s Lighthouse can help identify potential JavaScript performance issues.

Use CSS for Animations

Whenever possible, use CSS animations instead of JavaScript. CSS animations are handled by the browser‘s compositor thread, which is separate from the main JavaScript thread and much more efficient.

If you must use JavaScript for animation, consider leveraging the requestAnimationFrame API, which allows the browser to optimize animation timing.

Be Mindful of Background Processes

If your application has any kind of background activity (data polling, automatic updates, etc.), make sure it‘s truly necessary. If it is, use efficient polling techniques like long polling or websockets to minimize unnecessary server requests.

For content that needs to update in real-time (like stock tickers or live blogs), consider giving users the option to pause the updates when they‘re not actively viewing the page.

Leverage Browser APIs

Modern browsers offer a variety of APIs that can help reduce your application‘s energy impact. For example:

• The Page Visibility API allows you to detect when a page is not visible (e.g. the tab is inactive or the browser is minimized) and pause unnecessary processes.
• The Battery Status API provides information about the device‘s battery level and charging status, allowing you to adapt your application‘s behavior accordingly (e.g. reducing the frequency of background tasks on low battery).

Tips for Users

Even if you‘re not a developer, there are still steps you can take as a user to minimize the energy impact of your browsing:

Use Chrome‘s Task Manager

Periodically check Chrome‘s task manager (Shift+Esc) to see if any tabs or extensions are using an inordinate amount of CPU. Close tabs that are consuming a lot of resources when you‘re not actively using them.

Suspend Inactive Tabs

Extensions like The Great Suspender or TabMemFree can automatically unload tabs that have been inactive for a set period of time, freeing up memory and CPU cycles.

Block Ads and Trackers

Many online advertisements and tracking scripts are poorly optimized and can consume significant CPU time. Using an ad blocker or privacy extension can help reduce this overhead.

Disable Unnecessary Extensions

Browser extensions can have a significant impact on Chrome‘s resource usage. Periodically review your installed extensions and disable or remove any that you no longer need.

Conclusion

Web browsing, especially on resource-heavy sites, can have a major impact on a laptop‘s battery life. By being mindful of which tabs and extensions we keep active, and by closing resource-intensive ones when not in use, we can significantly extend our unplugged runtime.

As developers, it‘s our responsibility to build applications that are as energy-efficient as possible. By optimizing our JavaScript, leveraging efficient APIs and techniques, and giving users control over background processes, we can help ensure that our apps are good citizens in the battery-constrained world of mobile computing.

Hopefully, my experience and these tips help you get the most out of your laptop‘s battery! Remember – a little mindfulness about your browsing habits can go a long way.