We ran Lighthouse on the Stackra homepage. Desktop performance scored 94. Mobile scored 63, with a Largest Contentful Paint of over 6 seconds. Our server response time was 72 milliseconds. A fast server response rules out the backend. The delay was happening in the browser after the page arrived.

What scroll animations actually do to visibility

Our homepage uses scroll-reveal animations. When a section enters the viewport, it fades up into view. The CSS behind this pattern is straightforward: the element starts at opacity 0 and transforms up into place when a visible class is added. That opacity 0 applies at CSS parse time, before any JavaScript runs. Every section using this pattern starts completely invisible on the page.

Why the first section was the problem

Google's LCP metric identifies the largest visible element in the viewport when the page loads. Our primary heading was inside the first section below the URL input, and that section used the scroll-reveal pattern. The heading was in the DOM, but invisible. LCP does not start its clock when an element enters the DOM. It measures when the element becomes visible to the user. Our heading was hidden at opacity 0 until JavaScript loaded, React hydrated, and an IntersectionObserver fired to add the visible class. On mobile, that sequence takes several seconds. That is where the 6-second LCP was coming from.

The fix

We removed the scroll-reveal animation from the first section. It now renders at full opacity immediately when CSS applies, before JavaScript runs at all. Scroll animations are designed for content a user discovers while scrolling. They should not apply to the primary content section at the top of the page. All sections below the fold still animate in as the visitor scrolls. We also moved the entire below-fold marketing component into a separate JavaScript chunk that loads after the main bundle, so the primary content hydrates without waiting for the rest of the page.

What to check on your own site

If your mobile LCP is slow but your server responds quickly, look at your CSS for opacity: 0 or visibility: hidden on above-fold elements. Scroll animations, fade-in effects, and reveal-on-load patterns all share this issue. If your LCP element starts invisible and waits for JavaScript to reveal it, every millisecond of JavaScript execution time adds directly to your LCP. Google PageSpeed Insights will show you what element is being measured. If it is a text heading rather than an image, a JavaScript-dependent visibility pattern is a likely cause.

What Stackra reports for this

When Stackra runs a performance audit on your site, it captures your LCP score and the timing breakdown. A slow LCP on a fast server is a signal worth investigating. The Speed and Security pillar score reflects this directly, and the Action Plan will flag it if your LCP falls outside the recommended threshold.