Runtime
- HTML5
- CSS3
- JavaScript vanilla
Lavage automobile premium à domicile · résultat showroom — Toulouse, Blagnac, Colomiers, Balma, Tournefeuille, Muret.
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.
Landing locale ultra-légère, pipeline image calibré, SEO structuré pour le local.
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.
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.
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.
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.
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.
Le bento initial perturbait le rythme visuel. Refonte en galerie 3 colonnes / 8 cards, alignement strict, équilibre visuel restauré.
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.
scripts/recrop.ts — y-center par sujet pour éviter object-fit:cover sur portraits.
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")