Le client et le contexte
- Client
- HPF Automobiles (SARL), Clary (Nord)
- Activité
- Vente de voitures sans permis neuves et d'occasion, atelier, pièces détachées, financement, nettoyage, dépannage et remorquage
- Type de projet
- Site vitrine avec catalogue de véhicules
- Réalisé par
- Nathan Vasseur (conception et développement)
- Année
- 2026 : conception et développement en mai et juin, optimisation en octobre
- Site
- hpf-automobiles.com
HPF Automobiles est une entreprise familiale installée à Clary, dans le Cambrésis. Son site la présente comme distributeur officiel Chatenet et Casalini, avec des véhicules neufs et d'occasion de toutes marques, livrés et entretenus dans son atelier.
Le site a été conçu et développé par Nathan Vasseur, pour ce client réel.
Le besoin
Pour un garage de voitures sans permis, la première question d'un visiteur est simple : « qu'avez-vous en stock, et à quel prix ? ». Le site devait donc :
- montrer les véhicules disponibles, avec photos, prix et caractéristiques ;
- aider à trouver le bon modèle rapidement, sur téléphone comme sur ordinateur ;
- présenter les autres services du garage (atelier, pièces, dépannage…) ;
- faciliter la prise de contact, véhicule par véhicule ;
- respecter le RGPD, sans traceur déposé avant l'accord du visiteur.
Ce qui a été réalisé
- Un catalogue qui se met à jour tout seul Les annonces ne sont pas écrites en dur dans les pages : elles sont chargées depuis le serveur. Ajouter ou retirer un véhicule ne demande donc pas de refaire le site.
- Des filtres utiles Motorisation, neuf ou occasion, recherche par modèle, budget et kilométrage. Chaque véhicule affiche clairement son état : neuf, occasion ou vendu.
- Une fiche par véhicule Galerie photos, vidéo quand il y en a une, équipements et caractéristiques, plus un formulaire pour poser une question sur ce véhicule précis.
- Un bandeau cookies honnête Le visiteur peut tout accepter, tout refuser ou personnaliser. La carte Google Maps ne se charge qu'après son accord : sans accord, aucun contenu externe n'est appelé.
- Polices et scripts hébergés sur le site Rien n'est téléchargé depuis Google Fonts ou un CDN : le navigateur du visiteur ne contacte que le serveur du site.
- Un référencement local soigné Titre et description pour chaque partage, données structurées « concessionnaire automobile » (adresse, téléphone, horaires) pour Google, plan du site et fichier robots.
Technologies
- React
- Tailwind CSS
- Framer Motion
- API JSON côté serveur
- Hébergement IONOS
Accueil et catalogue sur téléphone (390 px), captures du 14 octobre 2026.
Catalogue et filtres sur ordinateur, capture du 14 octobre 2026.
L'optimisation d'octobre 2026
Quelques mois après la mise en ligne, le site a été audité de bout en bout, puis amélioré par Nathan Vasseur avec l'accord du client. Rien ne change dans l'apparence pour les visiteurs : le travail porte sur la vitesse, la sécurité et le respect de la vie privée. Ce qui est en ligne aujourd'hui :
- Un site beaucoup plus rapide, surtout sur téléphone Les deux vidéos de présentation sont passées d'environ 170 Mo et 157 Mo à 13 Mo environ chacune, et le site est désormais préparé à l'avance au lieu d'être assemblé dans le navigateur de chaque visiteur.
- Une connexion sécurisée qui se renouvelle toute seule Le certificat SSL (le cadenas) est renouvelé automatiquement : plus de risque de message « site dangereux » à cause d'une échéance oubliée.
- Des protections renforcées Les fichiers internes du site ne sont plus exposés, et des en-têtes de sécurité (politique de contenu CSP, HSTS) limitent les attaques courantes.
- Des sauvegardes quotidiennes Le catalogue et les photos sont sauvegardés chaque jour, avec une copie chiffrée conservée hors du serveur.
- Le RGPD au quotidien Consentement explicite dans les formulaires, bandeau cookies conforme : « Tout accepter » et « Tout refuser » sont aussi faciles l'un que l'autre.
Le résultat
Le site est en ligne sur hpf-automobiles.com. Mesures faites avec Google Lighthouse (Chrome, mobile simulé en 4G lente), avant l'optimisation (19 octobre 2026) puis après la mise en ligne de la nouvelle version (20 octobre 2026) :
| Mesure | Avant | Après |
|---|---|---|
| Performance, accueil sur mobile | 24 / 100 | 93 / 100 |
| Performance, catalogue sur mobile | 34 / 100 | 98 / 100 |
| Performance, catalogue sur ordinateur | 86 / 100 | 100 / 100 |
| Affichage du contenu principal (LCP), accueil mobile | 11,5 s | 3,2 s |
| Poids de la page d'accueil, mobile | 6,3 Mo | 0,85 Mo |
Le référencement et les bonnes pratiques sont à 100/100, l'accessibilité à 100/100 sur l'accueil et 98/100 sur le catalogue. La mise en page ne bouge plus pendant le chargement (CLS à 0). Aucune requête vers un autre domaine n'est faite au chargement tant que le visiteur n'a rien accepté.
Mesures faites avec Lighthouse sur un PC Windows et un navigateur Chrome : une passe pour « avant », la médiane de trois passes pour « après ». Google PageSpeed Insights donne le même ordre de grandeur (98/100 sur le catalogue mobile). Les scores varient d'un passage à l'autre et selon la connexion.
Aussi mis en ligne en octobre
Une adresse propre pour chaque véhicule, des pages légales dédiées (mentions légales, confidentialité, cookies), une page d'erreur 404 soignée et une fiche véhicule plus lisible sur téléphone.
L'avis du client
« TEXTE EXACT DU CLIENT »
Prénom Nom, fonction, HPF Automobiles