Portfolio performance

Web Performance Lab

Un laboratoire Next.js et React pour comprendre, reproduire, mesurer puis corriger les principaux problemes de performance web. Chaque experience suivra une logique bad to good: une page lente, une page optimisee, et une explication mesurable.

Ouvrir le catalogue Reference Core Web Vitals

Metriques a explorer

Les Core Web Vitals forment le socle de l'experience utilisateur mesuree sur le terrain. Lighthouse ajoute des metriques lab utiles pour diagnostiquer les causes avant de construire les pages slow/optimized.

TTFB

Time to First Byte

À venir · Diagnostic

Temps entre la requete navigateur et le premier octet de reponse serveur. Il aide a comprendre le cout serveur, reseau, cache et edge.

Guide d’analyse TTFB à venir

Poids: Pas de poids direct dans le score Lighthouse.
SEO: Impact surtout indirect: un mauvais TTFB retarde souvent FCP et LCP.

Outils: Chrome DevTools / WebPageTest / Datadog RUM

Version slow Version optimized

FCP

First Contentful Paint

À venir · Lighthouse

Moment ou le premier contenu visible apparait: texte, image, SVG ou canvas non vide.

Guide d’analyse FCP à venir

Poids: 10% du score Performance Lighthouse.
SEO: Pas un Core Web Vital, mais un FCP lent signale souvent un rendu initial trop tardif.

Outils: Lighthouse / Chrome DevTools / PageSpeed Insights

Version slow Version optimized

LCP

Largest Contentful Paint

Disponible · Core Web Vital

Temps necessaire pour afficher le plus grand element de contenu visible dans le viewport.

Guide d’analyse LCP à venir

Poids: 25% du score Performance Lighthouse.
SEO: Fait partie des Core Web Vitals utilises comme signal d'experience de page.

Outils: PageSpeed Insights / Chrome DevTools / Datadog RUM

Version slow Version optimized

CLS

Cumulative Layout Shift

À venir · Core Web Vital

Mesure les decalages visuels inattendus pendant la vie de la page.

Guide d’analyse CLS à venir

Poids: 25% du score Performance Lighthouse.
SEO: Fait partie des Core Web Vitals: il aide a qualifier la stabilite percue.

Outils: Lighthouse / Chrome DevTools / CrUX

Version slow Version optimized

INP

Interaction to Next Paint

Disponible · Core Web Vital

Evalue la latence globale des interactions utilisateur, pas seulement la premiere interaction.

Guide d’analyse INP

Poids: Pas de poids direct dans Lighthouse; TBT sert souvent d'indicateur lab.
SEO: Core Web Vital depuis mars 2024: utile pour juger la reactivite reelle.

Outils: Chrome DevTools / Web Vitals extension / Datadog RUM

Version slow Version optimized

TBT

Total Blocking Time

À venir · Lighthouse

Somme des periodes ou le thread principal reste bloque assez longtemps pour retarder les interactions.

Guide d’analyse TBT à venir

Poids: 30% du score Performance Lighthouse.
SEO: Pas un signal SEO direct, mais souvent correle aux problemes d'INP.

Outils: Lighthouse / Chrome DevTools Performance / WebPageTest

Version slow Version optimized

Speed Index

À venir · Lighthouse

Resume la vitesse a laquelle le contenu visible se remplit pendant le chargement.

Guide d’analyse Speed Index à venir

Poids: 10% du score Performance Lighthouse.
SEO: Indicateur lab utile pour diagnostiquer le ressenti visuel, sans statut Core Web Vital.

Outils: Lighthouse / WebPageTest

Version slow Version optimized