Régression visuelle
Comparer pixel à pixel la capture de chaque page mesurée avec celle du déploiement précédent, et alerter au-delà du seuil que vous choisissez.
Plan Pro et au-delàMis à jour le 11 septembre 2026
Sur cette page
La page blanche, le CSS qui n'est pas parti, le bloc de prix qui a disparu : tout cela répond 200. Après chaque déploiement de production, PostShip compare la capture d'écran de chaque page mesurée à celle du déploiement précédent, surligne ce qui a changé, et — si vous posez un seuil — vous prévient comme pour une panne quand une page n'a plus la même tête.
Ce que PostShip compare
La capture vient de la mesure PageSpeed : Lighthouse rend une image de fin de chargement, en mobile, pour jusqu'à trois pages par déploiement. Un seul appel donne donc le budget de performance et l'avant / après visuel.
- L'avant est la capture de la même page au déploiement de production précédent qui en porte une — PostShip remonte jusqu'à dix déploiements, pour qu'une mesure ratée ne fasse pas perdre la comparaison.
- La comparaison est faite pixel à pixel, avec une sensibilité qui absorbe le bruit JPEG et écarte les bords anti-crénelés. Deux captures de tailles différentes sont comparées sur leur zone commune, et chaque pixel qui n'existe que d'un côté compte comme changé : une page qui s'allonge de 300 px a changé de 300 px.
- Le résultat est un ratio de pixels changés, une image des différences (le changement en rouge sur la page grisée, absente quand le rendu est identique), et une phrase : « Rendu identique » sous 0,5 %, sinon « Rendu modifié de 34 % (haut de page, milieu) », les zones nommées de la plus touchée à la moins touchée, « toute la page » quand les trois tiers sont concernés.
Une preview est comparée à la dernière capture de production : ce que la pull request va changer, avant qu'elle parte. Sans note ni alerte.
Régler
Projet → Paramètres → Règles, carte Régression visuelle, un seul réglage, Alerte :
| Choix | Ce que ça veut dire |
|---|---|
| Montrer le diff, ne jamais alerter | Le défaut. La comparaison est visible sur la page du ship, personne n'est réveillé |
| Alerter au-delà de 1 % de la page | Une date qui change, une image de carrousel |
| Alerter au-delà de 5 % de la page | Un bloc qui a bougé |
| Alerter au-delà de 20 % de la page | Une page qui n'a plus la même tête |
| Alerter au-delà de 50 % de la page | Une page blanche ou une erreur pleine largeur |
Quatre valeurs et pas un champ libre : le pourcentage n'a de sens qu'en ordre de grandeur. Le seuil est inclusif ; un rendu strictement identique ne dépasse jamais rien.
Les zones ignorées
Un carrousel, une horloge, un flux d'avis : ces zones changent à chaque chargement sans que la page ait changé, et feraient sonner le seuil à chaque déploiement. Sur la page d'une URL, carte Zones ignorées du diff visuel, dessinez jusqu'à 10 rectangles en pourcentage de la capture (x, y, largeur, hauteur), puis Ajouter la zone. Un rectangle qui déborde est ramené au bord.
Le masque est peint en gris sur les deux images avant la comparaison : deux zones grises identiques ne comptent pas, et le gris se lit sur l'image des différences comme « ici, on ne regarde pas ». Sans zone : « Aucune zone ignorée : toute la capture est comparée. »
Ce que vous voyez
Sur la page du ship (diff de ship), pour chaque page mesurée : la capture d'avant, celle d'après, l'image des différences et la phrase. Les captures vivent dans un stockage privé et suivent la rétention du plan (données).
Ce qui déclenche une alerte
Quand au moins une page de production dépasse le seuil choisi :
- Un message part sur vos salons Discord, Slack et Telegram (canaux) et par email si vos alertes email sont actives — pas sur le webhook sortant : « Acme : une page n'a plus la même tête depuis le déploiement » — ou « 2 pages n'ont plus la même tête » — avec une ligne par page (« https://www.acme.fr/tarifs — Rendu modifié de 34 % (haut de page) ») et le lien Voir l'avant / après.
- Le Ship Score perd 15 points, une seule fois quel que soit le nombre de pages, raison « rendu modifié au-delà du seuil ». Le Check GitHub reçoit ce score.
Sans seuil, rien ne part, jamais. Aucun incident n'est ouvert : la page répond.
Limites et plans
| Free | Pro | Team | |
|---|---|---|---|
| Comparaison visuelle après un déploiement | Non | Oui | Oui |
| Seuil d'alerte et zones ignorées | Non | Oui | Oui |
| Pages comparées par déploiement | — | 3 | 3 |
Voir les plans. Les déploiements détectés par empreinte ne sont pas capturés.
Dépannage
Pourquoi « rien à comparer » sur ce déploiement ?
C'est le premier déploiement mesuré pour cette page, ou aucun des dix précédents ne porte de capture (PageSpeed n'a pas répondu). Le prochain déploiement aura un avant.
Pourquoi ça alerte à chaque déploiement alors que rien n'a changé ?
Une zone de la page change à chaque chargement : carrousel, compteur, publicité. Ouvrez l'image des différences, repérez le rouge, et dessinez une zone ignorée dessus. Si le rouge est partout, une bannière de consentement apparaît sur une capture et pas sur l'autre.
Pourquoi la capture ne ressemble pas à mon site ?
Lighthouse capture en mobile, après le chargement, sans faire défiler ni cliquer. Une page qui dépend d'une interaction est capturée dans son état initial — stable d'un déploiement à l'autre, ce qui est tout ce dont la comparaison a besoin.