Vitesse et
accessibilité.

Le LCP avant tout.

Le Largest Contentful Paint est la métrique Core Web Vital la plus visible et la plus déterminante pour le ranking Google sur mobile. Sur les pages héros du site Renobat, le LCP est l'image principale du composant Hero (outils d'électricien sur fond clair).

Cette image est préchargée en AVIF avec <link rel="preload" as="image" type="image/avif" fetchpriority="high"> dans le head, avant même que le HTML ne soit entièrement parsé. Chaque page de ville a son propre preload, dimensionné pour le breakpoint actif (mobile 800w, desktop 1200w via media query).

Le format AVIF économise 40-60% de poids versus webp à qualité visuelle équivalente. Les images sont générées via un script dédié (scripts/optimize-images.mjs) qui produit les variantes 480/800/1200/1500w en avif + webp, plus le fallback original.

Le CLS à zéro.

Le Cumulative Layout Shift mesure les décalages visuels pendant le chargement — les boutons qui sautent, les images qui poussent le texte. Sur le site Renobat, toutes les images portent leurs width et height intrinsèques en attribut HTML, ce qui permet au navigateur de réserver l'espace avant même que la source ne charge.

Les fonts auto-hébergées sont déclarées avec font-display: swap + un fallback sans serif système qui métriques-match au plus proche — pas de FOIT (Flash Of Invisible Text), un FOUT (Flash Of Unstyled Text) minime sur la première frame.

L'INP : interaction fluide.

L'Interaction to Next Paint a remplacé le FID en 2024. Il mesure la réactivité réelle aux clics, taps et frappes clavier. Sur le site Renobat, toutes les animations GSAP utilisent will-change sur les bonnes propriétés (transform, opacity) pour éviter les repaints lourds.

Les ScrollTriggers sont configurés avec once: true sur les sections de reveal — l'animation ne se rejoue pas au scroll arrière, ce qui économise du CPU. Les listeners sont nettoyés via astro:before-swap pour éviter les memory leaks lors des navigations View Transitions.

L'accessibilité au sérieux.

Tous les composants interactifs portent un focus-visible nettement contrasté (couleur signal dédiée, distincte du brand) avec outline-offset pour ne pas écraser les bords. Les textes ont un ratio de contraste WCAG AA minimum, parfois AAA sur les éléments critiques (eyebrows, métriques).

Toutes les animations CSS et GSAP respectent prefers-reduced-motion: reduce — sur les sections avec animations char-level, l'état final est appliqué directement sans tween, le contenu reste lisible, le mouvement est coupé. C'est un détail trop souvent oublié sur les sites premium.

Les attributs ARIA sont utilisés là où le HTML sémantique seul ne suffit pas : aria-label sur les liens téléphone (lecture vocale du numéro), aria-current sur la navigation active, aria-hidden sur les éléments décoratifs (eyebrow marks, icônes SVG).

Le build statique : la base de la perf.

Le site est construit avec Astro en mode static — chaque page est générée en HTML pur au build, servie depuis CDN sans serveur applicatif. Pas de framework JS qui hydrate la page entière côté client. Seuls les composants qui ont vraiment besoin de JavaScript embarquent leur script (les heroes animés, les carousels, les rotations de citations).

Cette architecture a été choisie par le studio Tacelo précisément pour ce type de site — du contenu marketing/éditorial à fort enjeu SEO local, avec quelques zones interactives. Pas de surenchère technique : ce qu'il faut, là où il faut.