perf(marketing): improve mobile Lighthouse score from 42 to 90

[saddlepaddle]

Summary

• Dynamic import below-fold sections — VideoSection, TrustedBySection, FeaturesSection, WallOfLoveSection, FAQSection, CTASection are now lazy-loaded via next/dynamic, code-splitting ~304 KiB of unused JS out of the initial bundle
• Remove Three.js ShaderAnimation — The hero background was rendering at opacity 0.01 (nearly invisible) but pulling in the entire Three.js library (~600 KiB). Removed entirely.
• Disable PostHog session recording — Marketing doesn't need session recording. disable_session_recording: true prevents loading ~88 KiB of posthog-recorder.js
• Defer Tally script — Changed from afterInteractive to lazyOnload to keep it off the critical path
• Remove aggressive image preloading — TrustedBySection logos had priority + loading="eager" despite being below the fold on mobile. Video thumbnail also had priority unnecessarily.
• Add optimizePackageImports — Tree-shakes barrel exports from framer-motion, react-icons, lucide-react

Results (Lighthouse mobile, production build)

Metric	Before	After	Target
Score	42	90	—
LCP	6,927ms	1,700ms	< 2,500ms
TBT	4,517ms	370ms	< 200ms
Speed Index	4,908ms	2,300ms	< 3,400ms
TTI	9,731ms	6,600ms	< 3,800ms
FCP	1,685ms	1,700ms	< 1,800ms
CLS	0.003	0.004	< 0.1

Test plan

• bun run lint — clean
• bun run typecheck --filter=@superset/marketing — passes
• bun test — 1193 pass, 0 fail
• Production build + Lighthouse audit — score 90
• Visual check: hero section still looks correct without shader background
• Verify PostHog pageview/event capture still works (session recording intentionally disabled)
• Verify Tally forms still load on pages that use them

Summary by CodeRabbit

Release Notes

• Performance

  • Optimized image loading strategies across pages
  • Implemented lazy-loading for page sections to improve initial load times
  • Enhanced external widget script loading timing

• Accessibility

  • Added accessibility labels to toolbar controls

• Visual Updates

  • Refined testimonial card spacing
  • Removed shader animation from hero section

• Privacy

  • Disabled session recording

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR optimizes the marketing site's performance and UX through multiple targeted adjustments: removing a shader animation component, converting static component imports to lazy-loaded dynamic imports for below-the-fold sections, removing image loading priority flags, adjusting script load timing, disabling session recording in analytics, improving accessibility, and refining button spacing.

Changes

Cohort / File(s)	Summary
Component Animation Removal apps/marketing/src/app/components/HeroSection/HeroSection.tsx	Removed dynamic ShaderAnimation component import and rendering, eliminating shader animation from the hero section.
Image Loading Optimization apps/marketing/src/app/components/TrustedBySection/TrustedBySection.tsx, apps/marketing/src/app/components/VideoSection/VideoSection.tsx	Removed priority and eager loading flags from Image components, relying on default lazy-loading behavior for logo and video thumbnail images.
Dynamic Component Loading apps/marketing/src/app/page.tsx	Converted static imports to dynamic lazy-loaded imports for VideoSection, TrustedBySection, FeaturesSection, WallOfLoveSection, FAQSection, and CTASection to optimize initial bundle size.
Script & Analytics Configuration apps/marketing/src/app/layout.tsx, apps/marketing/src/instrumentation-client.ts	Changed Tally embed script loading from afterInteractive to lazyOnload; disabled PostHog session recording via configuration flag.
Accessibility & UI Adjustments apps/marketing/src/app/components/FeaturesSection/components/OpenInDemo/OpenInDemo.tsx, apps/marketing/src/app/components/WallOfLoveSection/WallOfLoveSection.tsx	Added aria-label to IDE selector button for accessibility; added vertical padding (py-2) to TestimonialCard button for improved spacing.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• PR 1002: Modifies image loading props in TrustedBySection, directly related to similar image optimization changes in this PR.
• PR 1053: Adjusts ShaderAnimation usage in HeroSection, contrasting with this PR's removal of the component.
• PR 937: Modifies HeroSection and VideoSection components that are also affected in this PR.

Poem

🐰 The shell grows lean, the bundles light,
With lazy springs and scripts just right,
Shaders fade to whispers past,
While images at last come last. ✨
Performance hops, accessibility soars—
Marketing magic opens new doors!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the primary change: a significant performance improvement to the marketing app's mobile Lighthouse score, moving from 42 to 90.
Description check	✅ Passed	The PR description is comprehensive and follows the template structure with all key sections properly filled: summary of changes, results table, and test plan with explicit checkmarks and pending items.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch investigate-and-fix-mobile-performance-issues-on-m

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🧹 Preview Cleanup Complete

The following preview resources have been cleaned up:

• ✅ Neon database branch
• ✅ Electric Fly.io app

Thank you for your contribution! 🎉