Google's search ranking algorithm directly factors in Core Web Vitals: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). Many client-side translation scripts severely damage these scores by swapping text after initial page rendering, causing noticeable visual jumps.
Eliminating Cumulative Layout Shift (CLS)
When English text is replaced by German or French text after the browser has rendered the page, elements expand and push surrounding layout downwards, triggering high CLS penalties.
TranslateBeam TDN prevents layout shifts through two architectures:
- Edge SSR Reverse Proxy: In proxy mode, HTML arrives at the browser pre-translated. The initial paint uses the translated copy, resulting in 0.00 CLS.
- Pre-Paint DOM Mutation (JS Embed): In client embed mode,
tdn.jsintercepts DOM nodes during parsing before layout calculation, preventing visual text swapping.
Minimizing Interaction to Next Paint (INP)
By keeping the client library under 4KB and avoiding heavy external dependencies, TDN executes in under 2ms of main thread time, ensuring smooth user interactions across low-powered mobile devices.
