Responsive Menu causing "Cumulative Layout Shift (CLS)"... and workaround

Hi there,

we are using Foundation-Sites 6.6.3 for our jobboard minijob-anzeigen.de. We are quite pleased with Foundation in general. A big thank you to all Foundation developers for your continued support!

However, GoogleSearchConsole reported some speed issues what they call “Cumulative Layout-Shifts (CLS)”.

We were able to track the cause of the problem down to Foundations “Responsive Navigation” component. There was a short period of time (about 200-300ms) when the menu items were all visible, causing the top-bar to stretch vertically beyond normal limits:

Soon after the page rendered as expected:

The problem was hardly perceptible for human users, but long enough to cause a failure in Googles Core Web Vitals metrics.

We were trying to solve or workaround the problem for several weeks now. Luckily, I found a clue to a similar problem in the Foundation docs for the “Responsive Toggle” component today…
See https://get.foundation/sites/docs/responsive-navigation.html#preventing-fouc

The problem seems to be that the menu component is rendered by the browser engine before foundation’s javascript is executed.

We implemented a workaround similar to the one suggested in the docs. In our HTML-Template we added a ‘no-js’ class to our top-bar-container which we remove later on by javascript when the page is loaded and javascript is present…

<div class="top-bar-container cell shrink header no-js">...</div>
...
<script type="text/javascript">
   $('div.top-bar-container').removeClass('no-js');
   $(document).foundation();
</script>

As a result the .no-js class attribute is only present while javascript is not yet available. This allowed us to hide the menu-component during the early rendering stages by providing special CSS-Handling in our SCSS settings file:

// CLS-Fix
@include breakpoint(medium) {
  .no-js {
    .menu {
      display: none;
    }
}

I have no clue whether it would be possible to solve the problem in the foundation source code. If so, I could write a feature request or issue for that topic.

For any web developers having similar problems with CLS and foundation, the above workaround might save you some hours (or days) in bug hunting.

Hope it helps. :wink:

Thanks for your input and outlining the solution for the mentioned issue.

PS: I have sent you a message here in the forum, you might want to check it.