A solo tax practitioner site was scoring PSI mobile performance 74 with LCP 5.2 seconds and CLS 0.135 on the highest-traffic blog post. The brand is solid, the content is solid, but Google ranking signal was getting pulled down by render-path issues that took 90 minutes to find and fix. Here is exactly what was wrong and exactly what we did.

Short answer: The hero H1 was being hidden by a GSAP opacity: 0 entrance animation, pushing LCP to the moment the animation completed. The blog CLS was font-swap reflow on web fonts loaded without metric overrides. Three external CDN scripts were adding round-trips that did not need to exist. Four small changes; PSI 74 -> 91, LCP 5.2s -> 3.16s, CLS 0.135 -> 0.000.

Starting state

The LCP killer

The hero H1 had a data-hero attribute. The site animations.js ran a GSAP reveal animation that started every [data-hero] element at opacity: 0 and animated to opacity: 1 over 900 milliseconds with a 100-millisecond initial delay. Lighthouse measures LCP as the moment the largest visible content reaches full opacity. The H1 was the largest text element in the viewport, so LCP could not fire until the GSAP timeline finished.

The fix: convert the entrance animation to transform-only.

// Before
gsap.fromTo(
  kids,
  { opacity: 0, y: 16 },
  { opacity: 1, y: 0, duration: 0.9, stagger: 0.12, delay: 0.1 }
);

// After
gsap.fromTo(
  kids,
  { y: 16 },
  { y: 0, duration: 0.9, stagger: 0.12, delay: 0.1, immediateRender: false }
);

The H1 now paints at opacity 1 from the first frame. The entrance animation still runs as a 16-pixel vertical lift, visually identical.

The third-party CDN drag

The HTML loaded three external CDN scripts: GSAP from cdnjs, ScrollTrigger from cdnjs, anime.js from cdnjs, and Lucide icons from unpkg. Total: about 150 KB across four domains with separate DNS resolution and TLS handshakes.

Anime.js was loaded but never referenced in any JavaScript file. Pure dead weight. Dropped.

The other three were moved to local /assets/js/vendor/. Same code, no third-party DNS lookup.

The CLS culprit

Blog post CLS 0.135 came from web font swap. The site uses Playfair Display 600 and Inter 400, self-hosted with font-display: swap. On first paint, browser used Georgia and Arial fallbacks. When the web fonts loaded, the swap shifted every line of body text.

The fix uses the size-adjust pattern. See my deep-dive on the size-adjust pattern for the full mechanics.

Missing font preloads

The H1 used three fonts: Playfair Display 600 (preloaded), Cormorant Garamond Italic (not preloaded), Inter 500 (not preloaded). The two non-preloaded fonts loaded after the CSS parse, delaying H1 final-paint LCP by another 1.2 seconds on mobile 4G simulation.

Added two <link rel="preload"> hints. LCP dropped another 1.2 seconds after this single change.

Final numbers

Total intervention: 90 minutes of work, four code changes, zero design changes, zero downtime.

Lessons

• Entrance animations that set opacity: 0 on LCP-eligible elements are the most common LCP killer on small business sites built in the last three years.
• Web fonts loaded without metric-override fallbacks are the most common CLS source on content sites with serif headings.
• Missing font preloads for fonts actually used in the hero are the most common reason LCP stalls between 3 and 5 seconds.

If a site you own is in similar shape, ThatDevPro offers a free written audit. Same diagnostic loop regardless of stack.

For the full case study, see the original at thatdevpro.com.

Posted from ThatDevPro, SDVOSB veteran-owned web development and AI engineering studio. Originally diagnosed and shipped on the ThatDeveloperGuy Debian + nginx stack.