[Performance] Reduce Homepage Bundle Size from Inactive Rotational Banners

Current Behavior

The Layer5 homepage transfers more than 3.5 MB of uncompressed JavaScript during the initial page load.

Lighthouse reports approximately 746 KiB of unused JavaScript on the initial homepage load, while the main app.js bundle is approximately 2.23 MB.

A significant portion of this work is associated with the homepage's rotational banner components.

Root Cause

The homepage currently imports and mounts all four banner variations even though only one banner is visible at a time.

In index.js, the rotational banner component renders all four banner variants:

<Banner4 className="banner1" />
<Banner1 className="banner2" />
<Banner2 className="banner3" />
<Banner3 className="banner4" />

Three of the four banners are hidden using CSS (display: none !important), but their React component trees and associated JavaScript are still included in the homepage bundle and evaluated during the initial page load.

This means the browser performs work for banner variations that are not visible to the user.

There is also a resource-priority issue: Banner1 currently uses a high-priority background SVG, while the default first-visit state renders Banner4. This can cause the browser to prioritize an asset belonging to an inactive banner.

Desired Situation

The initial homepage load should only incur the JavaScript and resource cost required for the banner that is actually displayed.

Inactive banner variations should not unnecessarily contribute to the critical homepage bundle, initial JavaScript execution, or high-priority resource loading.

The existing rotational banner experience should continue to work as intended.

Acceptance Criteria

• Only the active banner requires evaluation and mounting during the initial homepage load.
• Inactive banner components do not unnecessarily increase the initial homepage JavaScript workload.
• Inactive banner assets are not fetched with unnecessarily high network priority.
• The existing rotational banner behavior remains functional.
• Initial homepage JavaScript payload is measurably reduced.
• Lighthouse reports a measurable reduction in unused JavaScript.
• No visual or functional regression is introduced to the homepage.

Performance Evidence

Current Metrics

Metric	Current Value
Initial JavaScript transfer	>3.5 MB
app.js bundle	~2.23 MB
Unused JavaScript	~746 KiB
Desktop Performance Score	15/100

The homepage currently evaluates multiple banner implementations even though only one is visible at a time.

This contributes unnecessary JavaScript to the initial page load and increases the amount of code the browser must download, parse, and execute.

Primary Finding

The rotational banner implementation is a candidate for reducing the initial homepage JavaScript payload because inactive banner variants are currently included in the initial bundle despite not being visible.

Scope

This issue focuses specifically on the JavaScript and resource cost of inactive rotational banner components on the homepage.
Other homepage performance findings, including LCP, CLS, and unnecessary integrations search indexing, are tracked separately.

---

Related Screenshots

Lighthouse Bundle Evidence

The Lighthouse treemap shows a 3.8 MiB JavaScript payload, with the largest initial chunk accounting for approximately 2.1 MiB (57%) of the transferred JavaScript.

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.