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

All GreenCode Tech Tips

  • Tip #31
  • For Developers
  • Category Web and front-end
  • Format short video
GreenCode

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

Get in touch