Client local2026·Sessions multiples avril 2026·Dev full-stack + UX + SEO + image pipeline

Lavage premium à domicile, résultat showroom.

Lavage automobile premium à domicile · résultat showroom — Toulouse, Blagnac, Colomiers, Balma, Tournefeuille, Muret.

  • 100/93/100/100Lighthouse Desktop
  • 10 villesZone couverte Toulouse + périphérie
  • 4.9 / 547 avis clients
Contexte

Une landing locale qui doit performer sur SEO et image.

Mission Magis — lavage automobile premium à domicile sur Toulouse et 5 villes en périphérie (Blagnac, Colomiers, Balma, Tournefeuille, Muret, et 5 autres communes). Téléphone +33 7 43 63 24 66. URL missionmagis.com.

Brief : une page unique qui charge instantanément, qui se positionne sur les requêtes « lavage auto Toulouse » et qui montre du résultat showroom en photo. Pas de CMS, pas de framework JS lourd — chaque kilo-octet compte, et chaque image doit recadrer proprement sur les portraits comme sur les plans larges.

Architecture

Trois couches, une décision par couche.

Landing locale ultra-légère, pipeline image calibré, SEO structuré pour le local.

  1. L1

    Single-page vanilla

    HTML/CSS/JS pur, zero framework. LCP et TTFB imbattables sur landing locale. Vercel sert le HTML statique avec cache long et headers de sécurité (vercel.json). Plus Jakarta Sans 300-800 en font auto-hébergée.

  2. L2

    Image pipeline sharp

    Recrop 952×714 en 4:3, y-centers calibrés par sujet (portrait / capot / plan large). sharp(src).extract({ left:0, top, width:952, height:714 }).webp({ quality:88, effort:6 }). Évite les écrasements object-fit sur portraits.

  3. L3

    SEO + JSON-LD LocalBusiness

    Geo 43.5777, 1.4529. areaServed listé 10 villes. aggregateRating 4.9/5 (47 reviews). Open Graph + Twitter Card + sitemap + robots. GA4 (G-1GDN15QF8B) et EmailJS sur le form contact.

Stack

Choisi pour la performance brute, pas pour un README.

01

Runtime

  • HTML5
  • CSS3
  • JavaScript vanilla
02

Hosting

  • Vercel
  • vercel.json cache + security headers
03

Pipeline

  • sharp
  • WebP quality 88
  • Plus Jakarta Sans 300-800
04

Outils

  • GA4 G-1GDN15QF8B
  • EmailJS
  • JSON-LD LocalBusiness
Décisions clés

Quatre choix qui ont défini le livrable.

  1. 01

    Vanilla > framework

    Pour une landing locale SEO-friendly, Next.js ou équivalent est over-engineered. HTML statique servi par Vercel = LCP/TTFB imbattables et zero hydration cost.

  2. 02

    Recrop sharp calibré sujet

    Chaque image source est recroppée en 952×714 4:3 avec un y-center adapté au sujet (portrait, capot, plan large). object-fit:cover sur portraits dans slots horizontaux casse l’image — le pré-crop landscape est obligatoire.

  3. 03

    Bento absorbé en galerie 8 cards

    Le bento initial perturbait le rythme visuel. Refonte en galerie 3 colonnes / 8 cards, alignement strict, équilibre visuel restauré.

  4. 04

    JSON-LD LocalBusiness complet

    Schema.org LocalBusiness avec geo, areaServed (10 villes), aggregateRating 4.9/5 (47 reviews). Pré-requis pour les rich snippets Google sur requêtes locales.

Métriques

Ce qui s’est mesuré, pas ce qui se raconte.

100/93/100/100
Lighthouse Desktop
perf · a11y · best practices · SEO
0
Cards galerie
3 colonnes alignées
4.9 / 5
Rating client
47 reviews aggregées
0
Villes couvertes
Toulouse + périphérie
75 - 400 €
Tarifs prestations
fourchette publique
Code

Image pipeline sharp · recrop 952×714 calibré sujet

scripts/recrop.ts — y-center par sujet pour éviter object-fit:cover sur portraits.

typescript
import sharp from "sharp";
import { readdir } from "node:fs/promises";
import path from "node:path";

type YCenter = "portrait" | "capot" | "wide";

// y-center calibré par sujet pour préserver le cadrage
const Y_TOP: Record<YCenter, number> = {
  portrait: 80,   // garde la tête, coupe les pieds
  capot: 320,     // centré sur le capot/calandre
  wide: 240,      // plan large neutre
};

async function recrop(src: string, sujet: YCenter) {
  const out = src.replace(/\.[^.]+$/, ".webp");
  await sharp(src)
    .extract({ left: 0, top: Y_TOP[sujet], width: 952, height: 714 })
    .webp({ quality: 88, effort: 6 })
    .toFile(out);
  return out;
}

// usage : recrop("source/equipe-01.jpg", "portrait")

Lessons / Next

Ce que ce projet a gravé.

  1. Vanilla > framework pour une landing locale ultra-légère SEO. Pas tous les projets méritent Next.js.
  2. Vercel recreate when corrupted — 7e recréation gérée, ne pas s’acharner sur un projet Vercel corrompu, recréer.
  3. Mobile carousel snap pattern validé en prod — réutilisable pour les prochaines landing pages mobiles.
  4. object-fit:cover sur portraits dans slots horizontaux écrase la composition. Pré-crop landscape obligatoire en amont.