Fixing Cumulative Layout Shift (CLS) in Nuxt 3
Cumulative Layout Shift (CLS) is a measurement of how much a webpage’s content unexpectedly moves around while it loads. It is one of the Core Web Vitals measured by Google in both its Lighthouse tool and the Chrome User Experience Report (CrUX). Now that Google uses Core Web Vitals as a ranking factor, CLS is more important than ever.
Unfortunately, I recently experienced an issue where some of the CSS in my Nuxt 3 application (Random Episodes) was loading late, causing a jarring visible jump when the styles loaded and exceedingly high CLS scores. In fact, every single URL was failing the Core Web Vitals assessment in Google Search Console. The CLS scores in PageSpeed Insights ranged from 0.417 to 0.86 depending on page and device (for reference, anything above 0.25 is considered poor).
When I inspected the styles that were responsible, I saw that they were being placed near the end of the <head> tag, after almost all of the other scripts and stylesheets. This caused them to load too late, triggering the layout shifts. After some research, I learned that Nuxt ships both inline styles and separate CSS files by default. The CSS files load later because they should be redundant, but for some reason in my case the inline styles were failing to include all of the CSS. I also found that due to differences in bundling behavior for the development server, the issue only affects production builds.
