Carrosserie Kris: performance and spam-hardening on a small stack

Stack and constraints

React on the frontend, a Node.js backend, Tailwind for styling. Nothing exotic. The interesting decisions here are about discipline, not architecture novelty.

The site is mobile-first by traffic reality, not by trend: most visitors land from a Google search on their phone, so every performance decision was made with that as the primary target, desktop as the secondary one.

Performance work

Largest Contentful Paint was the metric that mattered, since it correlates directly with whether a mobile visitor bounces before the page is even usable.

// Simplified image loading strategy: above-the-fold images get priority,
// everything else defers until it's actually near the viewport.
<Image
  src={heroImage}
  alt="Carrosserie Kris"
  priority
  sizes="(min-width: 768px) 50vw, 100vw"
/>

Form hardening without hurting conversion

A contact form that's "secure" but annoying to fill out is a worse business outcome than one with slightly weaker anti-spam. The constraint was: harden against spam without adding friction a real visitor notices.

// Honeypot field: invisible to real users, irresistible to bots that
// fill every input they can find in the DOM.
if (formData.honeypot) {
  return { ok: true }; // pretend success, send nothing, log server-side
}

Decisions that mattered

• Mobile-first layout system, with desktop treated as a progressive enhancement rather than the baseline
• Image and asset pipeline tuned specifically for LCP, not generic "optimization"
• Spam hardening implemented as a honeypot rather than a CAPTCHA, trading a small amount of bot-resistance for zero added friction
• A small, boring stack chosen deliberately. The client relationship is the long-term asset, and a stack nobody has to relearn every two years protects that