LCP optimization drop during dynamic DOM updates on external web app

Google Cloud Database
1

Hello Google Developer Community,

We are optimizing Core Web Vitals metrics for a dynamic web intake application (hdclaims.co.uk) to ensure compliance with Chrome INP (Interaction to Next Paint) benchmarks.

Issue Description:

When users progress through dynamic multi-step form views, the Largest Contentful Paint (LCP) element shifts unexpectedly during async POST requests. While Lighthouse desktop audits yield a 95+ score, real-user monitoring (CrUX dataset) indicates frame drops on mobile WebKit and Chromium engines.

Technical Setup:

  • Platform Engine: Dynamic JavaScript / Single Page Application

  • Target Domain: (hdclaims.co.uk)

  • Performance Metric: INP < 200ms, LCP < 2.5s

  • Browsers Affected: Chrome Mobile v125, Safari iOS 17

Steps Taken:

  1. Preloaded key web font assets and critical CSS inline to prevent layout thrashing.

  2. Deferring non-critical JavaScript payloads via Web Workers to keep the main thread idle.

  3. Inspected Chrome DevTools Performance panel; long tasks (>50ms) trigger during dynamic DOM node reconciliation when processing payload responses.

Is there a recommended JavaScript scheduler pattern (scheduler.postTask) or Web Vitals hydration strategy for dynamic .co.uk web applications to minimize main thread blocking?

Any technical insights from Web Performance developers would be greatly appreciated!