Optimizing LCP for high-resolution industrial product galleries on mobile?

Google Workspace Developers Q&A
1

Hi everyone,

I am currently working on a performance optimization project for a B2B manufacturing site (live site: (URL Removed by Staff)). The site is media-heavy because we need to display high-resolution 4K interior renders and complex technical specification tables for our modular units.

I am seeing some significant challenges with Core Web Vitals, specifically on mobile devices using 4G/LTE in remote areas:

  1. LCP (Largest Contentful Paint): Our hero images are large high-res PNGs of porta cabins. Even with WebP conversion and loading="eager", the LCP remains above 3.5s. Would implementing Priority Hints (fetchpriority="high") be the best move here, or should I consider a low-quality image placeholder (LQIP) strategy?

  2. CLS (Cumulative Layout Shift): Because our technical tables (see the “Specifications” sections on the link) are dynamically rendered, they are causing layout shifts as the CSS settles. Is there a recommended way to pre-allocate aspect-ratio boxes for complex data grids in a responsive layout?

  3. Interaction to Next Paint (INP): Our “Request a Quote” modal triggers a slight delay. I suspect the main thread is blocked by the high-density image decoding.

I want to ensure that our industrial clients can access our specs smoothly, regardless of their hardware. Any advice from the Google Dev community on balancing high-fidelity B2B assets with modern performance standards would be amazing!

Thanks!

1 Like