How loading.tsx in Next.js Caused Massive CLS Issues (and Hurt My SEO)

HomieLab — Sun, 13 Jul 2025 10:59:07 +0000

Recently, I ran into a serious SEO issue on AudioAZ.com, a Next.js site I’ve been building with the App Router. The problem: over 35,000 mobile URLs flagged in Google Search Console with a Cumulative Layout Shift (CLS) score greater than 0.25.

It took a while to trace the root cause, but the surprising culprit turned out to be Next.js’s loading.tsx file.

The Problem

Here’s what I saw in Search Console:

At first, I assumed it was ads or unoptimized images. But after profiling with Chrome DevTools, it became clear: layout shifts were happening before the content was even visible - during route loading.

The Real Cause: loading.tsx

In Next.js App Router, loading.tsx is automatically rendered while a route is loading - even on first visit. If your loading.tsx contains a small element (like a spinner or centered message) and your final page has much taller content, the page will jump when the real content replaces the loader.

That’s exactly what was happening on my site. My loading.tsx was minimal, but the actual pages were long and dynamic. The result: massive CLS spikes, especially on mobile.

The Fix

To eliminate layout shift, I did the following:

Removed loading.tsx completely
Handled route transitions manually using router.events or useTransition() (depending on context)
Used skeleton components that mimic the final page layout (same min-height, spacing, etc.)
Ensured all images have fixed aspect ratios using Tailwind’s aspect-* utilities and Next.js

Now, layout shifts are gone - and Google is slowly validating the improvements.

Takeaways

If you’re using Next.js App Router:
Don’t use loading.tsx unless you mimic the real layout’s height and structure
Prefer client-side loading logic and full-height skeletons
Always reserve space for ads, images, and dynamic content

Results

Since deploying the fix, CLS scores have dropped significantly in both local tests and real-user metrics. Google Search Console is now validating the changes.

Final Thoughts

Core Web Vitals matter more than ever. I learned the hard way that even small UX improvements - like using loading.tsx - can backfire if not implemented carefully. If you’re seeing similar SEO or UX issues, check your layout shifts and don’t overlook your loaders.