How to Fix CLS Caused by Footer Layout Shifts: A Practical 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.

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