jwinterm 2e44b70e0b perf(site): lazy-load Turnstile — 450KB challenge leaves the mobile critical path
The contact form's Turnstile widget pulled ~450KB of Cloudflare challenge
scripts eagerly on every page load, including the homepage where the form
sits far below the fold. On slow-4G mobile that download competes with the
critical path during load (the biggest single drag on the mobile PageSpeed
score; desktop was unaffected, hence the 97-vs-75 split). The widget now
mounts only once its container is within 800px of the viewport; the existing
placeholder reserves layout, and on /contact it still loads immediately.
2026-07-06 09:53:56 -04:00

Such Software Website

Corporate website for Such Software LLC, a full-service software provider based in Kennett Square, PA.

Lighthouse Scores

Page Performance Accessibility SEO Best Practices
Home 99% 100% 100% 77%*
Services 98% 100% 100% 100%
About 99% 100% 100% 100%

*Home page Best Practices is 77% due to Cloudflare Turnstile third-party cookies.

Tech Stack

  • Next.js 15 with App Router
  • React 18 + TypeScript 5
  • Tailwind CSS 3 + Framer Motion 11
  • Radix UI accessible primitives
  • next-themes for dark/light mode
  • Zod for validation
  • Cloudflare Turnstile for bot protection
  • Turborepo + pnpm 9

Project Structure

such-software-site/
├── apps/web/               # Next.js website
│   ├── src/app/            # Pages (home, services, about)
│   ├── src/components/     # React components
│   ├── tests/              # Playwright a11y tests
│   └── public/             # Static assets
├── packages/ui/            # Shared UI components
└── packages/config/        # Shared config

Development

pnpm install    # Install dependencies
pnpm dev        # Start dev server at localhost:3000
pnpm build      # Production build
pnpm start      # Start production server

Testing

cd apps/web
pnpm test:a11y  # Run Playwright accessibility tests
pnpm test:ui    # Run tests with interactive UI

42 accessibility tests across Chromium, Firefox, and WebKit covering WCAG 2.2 AA criteria, heading hierarchy, color contrast, and keyboard navigation.

Accessibility

  • WCAG 2.2 AA — engineered to meet, audited against (Lighthouse measured 100%)
  • Skip-to-main link, semantic HTML5, ARIA labels
  • Proper heading hierarchy, color contrast (4.5:1+)
  • prefers-reduced-motion support
  • Keyboard navigation, focus indicators
  • Structured data (JSON-LD) and canonical URLs

Environment Variables

Create apps/web/.env.local:

NEXT_PUBLIC_TURNSTILE_SITE_KEY=your_site_key
TURNSTILE_SECRET_KEY=your_secret_key

See apps/web/.env.example for template.

License

Proprietary - Such Software LLC

S
Description
company website
Readme
47 MiB
Languages
TypeScript 81%
MDX 15.3%
CSS 2.8%
JavaScript 0.9%