# Rapport Lighthouse — QRamen Mesure du **26 octobre 2026, entre 22 h 50 et 23 h 05 (Europe/Paris)**, sur le site en production `https://qramen.fr` (Cloudflare Pages, projet `qramen-soutenance`), avec Lighthouse fourni par le dépôt `portfolio-refonte` (CLI `lighthouse`, Chromium système, `--headless=new`). Méthode : six exécutions **séquentielles** (une page à la fois, jamais deux mesures en parallèle), trois pages publiques × deux profils (mobile émulé par défaut, `--preset=desktop`). Script reproductible : `outils/lh-campagne.sh` (sortie JSON dans `/tmp/lh-qramen2`). ## Résultats après correctif (23 h 05) | Page | Profil | Performance | Accessibilité | Bonnes pratiques | SEO | | --- | --- | --- | --- | --- | --- | | `/` | mobile | 99 | 100 | 100 | 100 | | `/` | bureau | 100 | 100 | 100 | 100 | | `/menu/` | mobile | 95 | 100 | 100 | 100 | | `/menu/` | bureau | 99 | 100 | 100 | 100 | | `/avis/` | mobile | 100 | 100 | 100 | 100 | | `/avis/` | bureau | 100 | 100 | 100 | 100 | Repères mesurés : FCP 1,5 s et LCP 1,5 à 2,1 s en mobile émulé ; FCP 0,5 s et LCP 0,5 à 0,8 s en bureau. Aucune erreur d’accessibilité ni de bonnes pratiques relevée sur ces six passages. ## Correctif appliqué pendant la mesure `public/robots.txt` était **absent** : la règle de repli de Cloudflare Pages renvoyait la page d’accueil en HTML à l’adresse `/robots.txt`, ce que l’audit SEO signalait comme deux erreurs (score SEO 91-92). Le fichier a été ajouté (`Allow: /`, `Disallow: /panel`, `/cuisine`, `/api/`), le site reconstruit et redéployé. Le SEO est passé à 100 sur les six passages. Vérification : `https://qramen.fr/robots.txt` répond **200** en `text/plain`. ## Limite connue et assumée Sur `/menu/` en mobile, le **CLS mesuré est 0,12** (bureau : 0). Cause identifiée : la carte est rendue **côté client** par `src/features/parcours/client.ts` dans un conteneur `#app` vide livré par le HTML statique (5,4 Ko) ; le pied de page est visible au premier rendu puis poussé vers le bas quand les 40 produits sont insérés. Le décalage est attribué au nœud `body > footer.container`. Pistes, non appliquées à cette heure : rendu serveur du catalogue par Astro, ou réservation d’espace (`min-height`) dans `#app`. Le score de performance reste de 95 en mobile, avec accessibilité, bonnes pratiques et SEO à 100 : le défaut est cosmétique, il ne bloque ni la commande ni la lecture. ## Ce que ces chiffres ne disent pas Ces mesures portent sur un poste unique, un réseau fixe et trois pages publiques. Elles ne constituent ni un audit de performance complet, ni une mesure sur appareil réel, ni un test de charge. Les écrans du personnel (`/panel`, `/cuisine`) ne sont pas mesurés : ils sont protégés par Basic Auth et exclus de l’indexation par `robots.txt`. ## Troisième passage — 27 octobre 2026, après corrections Les écrans ont été modifiés (carte relue en direct, page salle, page QR, panier avec e-mail optionnel). Mesures refaites sur `https://qramen.fr` en série, pages publiques, deux profils. | Page | Profil | Performance | Accessibilité | Bonnes pratiques | SEO | | --- | --- | --- | --- | --- | --- | | Accueil | bureau | 100 | 100 | 100 | 100 | | Accueil | mobile | 99 | 100 | 100 | 100 | | La carte | bureau | 99 (CLS corrigé) | 100 | 100 | 100 | | La carte | mobile | 99 (CLS corrigé) | 100 | 100 | 100 | | Avis | bureau | 100 | 100 | 100 | 100 | | Avis | mobile | 100 | 100 | 100 | 100 | Le décalage cumulé de `/menu` (0,12 à 0,129, pied de page poussé vers le bas) est **corrigé** : le conteneur de la carte réserve désormais sa hauteur avant le rendu par JavaScript (`#app` : `min-height: 62vh`). Le CLS mesuré passe à **0** sur les deux profils, et la performance mobile de la page carte passe de **95 à 99**. Les quatre notes restent vertes sur les trois pages publiques. Les pages du personnel (`/panel`, `/cuisine`, `/salle`) ne sont pas mesurées : elles sont derrière une authentification et ne font pas partie du parcours client exposé. ## Quatrième passage — 27 octobre 2026, après la refonte visuelle (Kōban Vitrine) Même méthode (Lighthouse 13, Chromium headless, page en production `https://qramen.fr`). | Page | Performance | Accessibilité | Bonnes pratiques | SEO | | --- | --- | --- | --- | --- | | Accueil | 98 | 100 | 100 | 100 | | Carte (`/menu/`) | 99 | 100 | 100 | 100 | | Panier | 99 | 100 | 100 | 100 | Deux régressions trouvées et corrigées dans ce passage : 1. **Contrastes** — la nouvelle palette sombre avait ramené l'accessibilité de 100 à 95/96 : les prix et les étiquettes du thème clair passaient sous le rapport 4,5:1, et le premier écran gardait un fond sombre codé en dur sous des textes du thème clair. Variables de texte dédiées (`--texte-sable`, `--texte-accent`, `--texte-doux`), fonds hérités neutralisés, et le nom accessible des liens de plats ne double plus leur texte visible. Retour à 100 sur les trois pages. 2. **LCP de la carte** — 4,1 s après l'arrivée de la carte publique relue en direct : le rafraîchissement redessinait les 40 produits même quand rien n'avait changé, ce qui repoussait le plus grand élément. Le rendu n'a lieu que si une signature (identifiant, disponibilité, prix) a bougé : LCP à 1,6 s et CLS à 0. Les écrans du personnel (`/panel`, `/cuisine`, `/salle`) ne sont pas mesurables par Lighthouse sans identifiants : ils sont contrôlés à la main dans Chromium (captures dans `docs/parcours-client/`). ## Nouvelle mesure — 28 octobre 2026, après la refonte d'interface Lighthouse 13.6.0, production `qramen.fr`, mobile émulé et bureau. | Page | Profil | Performance | Accessibilité | Bonnes pratiques | SEO | LCP | CLS | | --- | --- | --- | --- | --- | --- | --- | --- | | `/` | mobile | 99 | 100 | 100 | 100 | 1,6 s | 0 | | `/menu/` | mobile | 100 | 100 | 100 | 100 | 0,9 s | 0 | | `/panier/` | mobile | 100 | 100 | 100 | 100 | 0,9 s | 0 | | `/confirmation/` | mobile | 100 | 100 | 100 | 100 | 1,0 s | 0 | | `/avis/` | mobile | 100 | 100 | 100 | 100 | 1,0 s | 0 | | `/qr/` | mobile | 100 | 100 | 100 | 100 | 1,0 s | 0 | | `/` | bureau | 97 | 100 | 100 | 100 | 1,0 s | 0 | | `/menu/` | bureau | 98 | 100 | 100 | 100 | 0,9 s | 0 | | `/qr/` | bureau | 98 | 100 | 100 | 100 | 0,9 s | 0 | Deux régressions ont été introduites par la refonte puis corrigées avant cette mesure : - **Accessibilité 95 sur `/menu`** : les lettres des tuiles monogrammes étaient posées en `var(--accent)` avec `opacity:.6`, soit 2,64:1 (seuil 3:1). Passées en `var(--muted)` pleine opacité. - **CLS 0,098 en bureau sur `/menu`** : la suppression de `min-height:62vh` sur `#app` (faite pour tuer une bande vide sur l'accueil) laissait le pied de page remonter avant le rendu client. La réserve de place est rétablie, et neutralisée uniquement sur l'accueil via `.app-home{min-height:0}`. La performance bureau était alors à 97-98, levier identifié : la **taille des images** (tuiles de 96 px servant des WebP de 800 à 900 px). ### Variantes d'images livrées le 28 octobre Trois variantes `-192`, `-400` et `-800` générées pour les 21 WebP de plats, `srcset` + `sizes` câblés dans les cartes du menu (96 px), les cartes de l'accueil (64 px), les trois plats vedettes et le visuel de tête. Aucun original n'est modifié. Mesures après livraison, trois passages par page pour écarter le bruit : | Page | Profil | Performance (3 passages) | Médiane | LCP | Poids de page | | --- | --- | --- | --- | --- | --- | | `/menu/` | bureau | 100, 100, 100 | **100** | 0,31 à 0,41 s | 153 Ko | | `/menu/` | mobile | 100, 98, 100 | **100** | 0,89 à 1,15 s | 103 Ko | | `/` | mobile | 100, 100, 100 | **100** | 1,46 à 1,51 s | 363 Ko | Une tuile de plat télécharge **11 Ko** (`-192`) au lieu de 155 Ko : le `currentSrc` relevé en navigateur confirme que c'est bien la variante 192 qui est choisie. Le poids du menu passe d'environ 1,5 Mo à 103 Ko. Accessibilité, bonnes pratiques et SEO restent à 100, CLS à 0. Un passage isolé peut afficher 96 ou 98 : c'est du bruit d'exécution, pas une régression — d'où les trois passages. Les scores doivent être lus en médiane. ### Série finale du 28 octobre (9 pages) Mesurée à la suite, sans pause entre les passages, donc sur une machine déjà chargée : | Page | Perf | A11y | BP | SEO | CLS | | --- | --- | --- | --- | --- | --- | | Accueil mobile | 100 | 100 | 100 | 100 | 0 | | Carte mobile | 100 | 100 | 100 | 100 | 0 | | Panier mobile | 100 | 100 | 100 | 100 | 0 | | Confirmation mobile | 100 | 100 | 100 | 100 | 0 | | Avis mobile | 100 | 100 | 100 | 100 | 0,015 | | QR mobile | 100 | 100 | 100 | 100 | 0 | | Accueil bureau | 97 | 100 | 100 | 100 | 0 | | Carte bureau | 98 | 100 | 100 | 100 | 0 | | QR bureau | 98 | 100 | 100 | 100 | 0 | Écart avec les passages répétés : mesurée seule et trois fois de suite, `/menu/` en bureau donne **100 / 100 / 100** avec un LCP de 0,31 à 0,41 s, contre 98 et 0,9 s dans la série. La différence vient de la charge machine quand les audits s'enchaînent, pas du site. À lire en médiane de passages espacés. ## Cinquième passage — 28 octobre 2026, couverture photo complète La carte est passée de 12 à 40 photos (28 visuels générés, découpés en 192/400/800). Trois passages successifs sur `https://qramen.fr/menu/`, preset mobile, à quelques minutes d'intervalle : | Passage | Perf | Accessibilité | Poids | LCP | CLS | |---|---|---|---|---|---| | 1 | 98 | 100 | 220 Ko | 1,15 s | 0 | | 2 | 100 | 100 | 220 Ko | 0,91 s | 0 | | 3 | 100 | 100 | 220 Ko | 0,88 s | 0 | Médiane **100**, fourchette **98-100**. Le poids de page passe de 103-104 Ko (12 photos) à **220 Ko** (40 photos) : la hausse est le coût des vignettes supplémentaires, et elle ne coûte aucun point parce que les tuiles continuent de recevoir la variante `-192`. Le premier passage est le plus lent (LCP 1,15 s) ; les suivants se stabilisent sous 0,95 s. Annoncer la fourchette, jamais le meilleur passage seul : c'est 98 à 100 selon la charge machine.