Web Performance • • 3 min read

Fixing CLS Caused by Footer Layout Shifts: A Core Web Vitals Case Study

Cumulative Layout Shift (CLS) issues are often attributed to fonts or images, but footers can also be a major culprit. In this case study, I share how I fixed a high CLS score caused by the footer, reducing it from a problematic level down to nearly zero—without impacting user experience or design.

Initial Situation: CLS Near 0.65, Footer Identified as Main Culprit

The Lighthouse report revealed that the .site-footer element contributed over 0.6 points to the CLS score. Other elements like .page-subtitle and a few small divs had minimal impact, and web fonts were no longer a significant factor.

The observed behavior was that the footer’s height changed after initial page load, causing the entire content above it to shift downward. This created a jarring experience, especially on mobile devices.

Root Causes of Footer CLS

From analysis, three common reasons cause footer-related CLS:

  • No reserved height for the footer, so it changes size suddenly as content or fonts load.

  • Footer content loaded dynamically via JavaScript, such as social icons or external embeds appearing late.

  • Images or icons inside the footer lack fixed dimensions, causing unexpected layout changes.

Solution: Reserve Footer Height and Stabilize Layout

1. Reserve Height for the Footer

The most important fix is to apply a proper min-height to the .site-footer so the browser can allocate enough space early and avoid layout shifts.

.site-footer {
  min-height: 180px; /* Reserve footer height to prevent layout shift */
}

Adjust the height value based on your footer’s actual final rendered size.

2. Stabilize Footer Text Layout

Set a fixed line-height for text and headings inside the footer to prevent vertical changes as fonts load or display.

.site-footer {
  line-height: 1.5;
}

.site-footer h3 {
  line-height: 1.3;
}
 

3. Fix Icon and Image Sizes

Ensure icons and images inside the footer have fixed width and height or use aspect-ratio to maintain layout stability:

.site-footer img,
.site-footer svg {
  width: 24px;
  height: 24px;
  aspect-ratio: 1 / 1;
}

4. Avoid JavaScript-Injected Footer Content (If Possible)

If the footer content is injected or changed dynamically by JavaScript after the initial render:

  • Prefer rendering the footer server-side in the HTML

  • If injection is unavoidable, make sure to reserve sufficient height with CSS to prevent CLS

Minor CLS Fixes for Other Elements

For small CLS caused by .page-subtitle, apply fixed line height and reserved height:

.p.page-subtitle {
  line-height: 1.4;
  min-height: 1.4em; /* Reserve space to prevent layout shift */
}

Results

Implementing these fixes reduced CLS from approximately 0.65 down to below 0.1, providing a much more stable loading experience. Lighthouse no longer flags the footer as a significant CLS source.

Key Takeaways

CLS is not only about fonts or images; footers, often overlooked, can cause major layout shifts. Reserving height and stabilizing footer layout are essential steps to improve Core Web Vitals scores effectively.

 

← Back to Blog