[Performance] Eliminate Cumulative Layout Shifts from Partners Carousel and Features SVGs

[PARTH-TUSSLE]

Current Behavior

The Layer5 homepage currently experiences significant Cumulative Layout Shift (CLS), particularly on desktop.

PageSpeed Insights reports:

• Desktop CrUX CLS (75th percentile): 0.63 — Core Web Vitals failure
• Desktop Lighthouse CLS: 0.49
• Mobile Lighthouse CLS: 0.75

Lighthouse identifies the largest layout shifts around the Partners section and Features section.

The largest contributors include:

• PartnersItemWrapper — approximately 0.26 shift score
• Partners carousel (.slick-slider > .slick-list) — approximately 0.17
• Feature SVG/image elements that do not consistently reserve their final dimensions
• A smaller shift from the hero/video container

Root Cause

The homepage layout changes during and after client-side hydration.

Partners Section

The Partners carousel uses responsive react-slick configuration with an unslick breakpoint around the desktop width.

This can cause the carousel to initialize in one layout during the initial render and then switch to another layout during hydration, resulting in the surrounding content being repositioned.

Lighthouse also identifies partner images as unsized image elements, indicating that their rendered dimensions are not consistently reserved before the images are displayed.

Features Section

Feature SVG and diagram images do not consistently define explicit dimensions or an equivalent aspect-ratio reservation before they are rendered.

As these assets are loaded and their dimensions become available, surrounding content can be repositioned, contributing to CLS.

Desired Behavior

The homepage should maintain a stable layout from the initial render through hydration and subsequent image/content loading.

The Partners and Features sections should reserve the space required by their content before that content is rendered or replaced, preventing visible movement of surrounding elements.

Acceptance Criteria

• Desktop Lighthouse CLS is reduced to < 0.10.
• Mobile Lighthouse CLS is reduced to < 0.10.
• The Partners section no longer produces significant layout shifts during hydration or carousel initialization.
• Partner images do not cause layout shifts when they load or change.
• Feature SVGs and diagram images do not cause surrounding content to move when rendered.
• No new hydration mismatch or visual regression is introduced.
• Existing Partners carousel behavior and Features section functionality are preserved.

Performance Evidence

Current Metrics

Metric	Desktop	Mobile
CrUX CLS (75th percentile)	0.63	—
Lighthouse CLS	0.49	0.75
Desktop Performance Score	15/100	—

The desktop CrUX value of 0.63 currently fails the Core Web Vitals CLS threshold.

Lighthouse diagnostics identify the Partners section and Features assets as the primary sources of layout instability.

Primary Findings

The largest observed layout shifts are associated with:

1. Partners carousel / wrapper — approximately 0.26 shift score
2. Partners carousel list — approximately 0.17 shift score
3. Feature SVG/image rendering — dimensions are not consistently reserved before rendering

---

Related Screenshot

---

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.