Skip to main content

CLS by browser auto-translate

CLS by browser auto-translate without noise

Vasil Dachev avatar
Written by Vasil Dachev
Updated over a week ago


What is CLS by browser auto-translate

CLS by browser auto-translate shows how Cumulative Layout Shift (CLS) is affected by whether the browser automatically translated the page for the user.

Modern browsers like Chrome offer built-in translation when the detected page language differs from the user’s preference. While this improves accessibility, it can introduce unexpected layout changes — especially during or after the translation process.

Healthy CLS by browser auto-translate sample

In a healthy state:

  • Both translated and non-translated pages show low CLS

  • Translated content doesn’t trigger layout shifts — either because space was reserved or the layout gracefully adapts

  • Fonts and styling remain stable during translation

This means your design is robust across languages, even when text length or structure changes due to browser translation.

Unhealthy CLS by browser auto-translate sample

If translated pages show higher CLS:

  • It's likely due to text expansion or reflows from longer translated strings

  • Headers, buttons, and nav elements may shift as words wrap or overflow

  • Some frameworks may re-render elements after translation, causing instability

If non-translated pages are worse:

  • This usually points to deeper layout stability issues not related to translation — affecting all users

In either case, a consistent CLS gap between the two is a red flag and worth deeper inspection.

Resolving unhealthy CLS by browser auto-translate

Go-to action plan to resolve an unhealthy CLS by browser auto-translate:

  1. Ask Uxi to analyze your CLS by browser auto-translate values and suggest improvements

  2. Use Filters to view translated sessions only and pinpoint which pages or sections are unstable.

  3. Simulate CLS of the suspected lens to see if fixing it will resolve the CLS by browser auto-translate. If yes, this is where the resolution focus should be.

  4. Use an automated CLS optimization tool like Navigation AI to improve your CLS by browser auto-translate values

  5. Once you’ve improved CLS, set an alert to be the first to know if it starts worsening again.

Try it yourself

Discover how your website performs with real user data.
​​

Did this answer your question?