Tech Tip #31: Ship less JavaScript

Every page loads your whole app's JavaScript. Why?

Video created by explainapaper.com

The problem

Bundles grow until every page downloads, parses and runs code for features it never shows. Parsing and executing JavaScript costs processor time on every visitor's device.

The fix you can use today

  • Code-split so each page loads only what it uses.
  • Tree-shake and remove unused libraries; check for duplicate copies.
  • Load third-party tags only when needed, for example after consent.

GreenCode researchers list big JavaScript bundles as a waste. GreenCode's own site loads scripts only where they are needed.

Tools that help

  • GreenCode Constitution skill (GreenCode researchers): open-source energy principles and a catalogue of 37 energy anti-patterns that an AI coding agent can follow to find and fix waste like this
  • Lighthouse: audits a page for total byte weight, unused JavaScript and CSS, image formats and offscreen images
  • WebPageTest: loads a real page and shows every request, its size and when it loaded

How GreenCode helps

GreenCode helps tackle this by loading scripts on greencode.ai only on the pages that use them. With WebP images, purged styles and one self-hosted font, that cut the home page's first view from 80 requests to 33. More on this.

Tags

#javascript#web-performance#frontend

Sources

Transcript

Every page loads your whole app's JavaScript. Why? Bundles grow and grow. Soon every page downloads code for features it never shows. The visitor's device must then read and run all of it. That costs processor time, often on an older phone. JavaScript is paid for twice: once to send, once to run. Here is the fix you can use today. Split your code, so each page loads only what it uses. Shake out unused code, remove unused libraries, and look for duplicate copies. Load third-party tags only when needed, for example after consent. GreenCode researchers list big JavaScript bundles as a waste. GreenCode's Constitution skill can help an AI coding agent find and fix this. Then spot unused code and heavy requests, using tools like Lighthouse and WebPageTest. GreenCode helps tackle this by loading scripts on its own site only where used. Its home page's first view fell from eighty requests to thirty-three. That was GreenCode Tech Tip number thirty-one. Follow for the next tip, and find more on greencode.ai/tech-tips.

All GreenCode Tech Tips · All GreenCode videos

  • Tip #31
  • For Developers
  • Length 1:11
  • Category Web and front-end
GreenCode

Want this checked on your own system? Talk to the GreenCode team.

Get in touch