Aller au contenu
Business Agile
Réalisations
Web · Photographie et film de mariage · juil. 2025

Maison Ozaé

Un portfolio de mariage bilingue, rapide malgré près de 4 000 photographies.

maisonozae.eu
Page d'accueil du site Maison Ozaé, photographie et film de mariage

Lighthouse bureau · mesuré le 22 septembre 2026

79
Performance
84
Accessibilité
100
Bonnes pratiques
100
SEO
LCP
3,2 s
Largest Contentful Paint
CLS
0
Cumulative Layout Shift
TBT
140 ms
Total Blocking Time

Maison Ozaé réunit Fabrice LABIT, photographe, et Grégory CAUZOT, vidéaste, autour de la photographie et du film de mariage, en France comme à l'étranger. Leur besoin : un portfolio qui montre leurs reportages en grand, se charge vite sur un téléphone et parle aussi bien aux couples francophones qu'aux couples anglophones. J'ai conçu et développé leur site, maisonozae.eu, en deux temps.

En images

maisonozae.eu
Grille des reportages de mariage de Maison Ozaé
La grille des reportages de la version en ligne : une maçonnerie de vignettes, chacune ouvrant un mariage.
Accueil de Maison Ozaé sur mobile
Sur téléphone, les photos s'affichent en plein écran, avec l'appel, l'e-mail et WhatsApp dans l'en-tête.

Le projet en détail

La première version, mise en ligne en juillet 2025, était une application Vite et React exportée en statique : une page par reportage, une galerie en maçonnerie, un formulaire de contact. Au fil des mois, j'y ai ajouté la vidéo d'accueil, les films intégrés à la grille des reportages et des galeries photo pour les mariages sans vidéo.

En septembre 2026, j'ai refait le site sur TanStack Start en prérendu statique, servi par nginx. Chaque page existe en français et en anglais, avec des adresses traduites, et la racine du site envoie le visiteur vers la langue de son navigateur. Le site compte 59 pages prérendues : une vingtaine de reportages, une page par membre du duo, une page de prestations et des pages légales qui nomment l'hébergeur et chaque prestataire depuis une source unique. Le formulaire de contact passe par une petite API FastAPI qui relaie les messages vers Brevo, avec limitation de débit. Cette nouvelle version est en recette ; la première reste en ligne jusqu'à sa mise en production.

Le sujet principal était la performance d'un site composé presque uniquement de photographies : près de 4 000 fichiers source. Au build, un script produit pour chaque image des variantes AVIF et WebP par largeur ainsi qu'une vignette floue. J'ai sorti ces vignettes du JavaScript envoyé au navigateur, corrigé un srcset qui dupliquait sa plus grande variante sur 566 images, chargé la police Adobe sans bloquer l'affichage et calculé quelles photos de la maçonnerie apparaissent en premier pour leur donner la priorité. Le score PageSpeed mobile de l'accueil est passé de 67 à plus de 80, celui des pages de reportage de 70 à 81, et le temps d'affichage simulé de la plus grande image est ramené à 4,1 secondes, sans baisser la qualité des photos.

Le référencement suit la même logique : un titre et une description par page, des données structurées, un sitemap généré à partir des pages réellement construites et un fichier llms.txt pour les moteurs de réponse. C'est le type de refonte de site vitrine que je mène quand le contenu est lourd : le design reste celui du client, le travail porte sur ce que le visiteur et les moteurs reçoivent réellement.

Ce qui a été fait

  1. 01

    Refonte en TanStack Start, prérendu statique servi par nginx

  2. 02

    Site bilingue avec adresses traduites et choix de langue automatique à la racine

  3. 03

    Variantes AVIF et WebP et vignettes floues générées au build

  4. 04

    PageSpeed mobile de l'accueil de 67 à plus de 80, reportages de 70 à 81

  5. 05

    Formulaire de contact relayé par une API FastAPI vers Brevo

Questions fréquentes

Comment garder un site photo rapide sans dégrader les images ?

En générant au build plusieurs largeurs de chaque photo en AVIF et WebP, en ne chargeant que la largeur utile à l'écran et en donnant la priorité aux seules photos visibles en premier. Sur Maison Ozaé, le score mobile de l'accueil est passé de 67 à plus de 80 sans baisser la qualité.

Comment faire un site vitrine bilingue français et anglais bien référencé ?

Chaque page de Maison Ozaé existe à sa propre adresse dans chaque langue, avec un slug traduit, des balises hreflang réciproques et un titre et une description traduits. La racine du site oriente le visiteur vers la langue de son navigateur sans empêcher les moteurs d'explorer les deux versions.

Comment les demandes de contact d'un site statique arrivent-elles par e-mail ?

Le formulaire envoie les messages à une petite API FastAPI qui les transmet par e-mail via Brevo, avec une limitation du nombre d'envois par visiteur. La clé du service d'envoi reste sur le serveur, jamais dans le code du site.

Autres réalisations

Un projet ? Parlons-en cette semaine.

Un brief court, une réponse sous 48 h, une estimation ferme après cadrage.

Décrire mon projet