Performance de Page fournit une vue d'ensemble instantanée des performances de n'importe quelle page web — métriques de timing de chargement (FCP, DOMContentLoaded, chargement complet, TTI), statistiques DOM (nombre d'éléments, profondeur d'imbrication, écouteurs d'événements) et une répartition des ressources indiquant le nombre et la taille des JavaScript, CSS, images, polices et autres ressources. Un score de performance avec code couleur donne un indicateur de santé rapide.
Le profilage des performances avec Lighthouse ou WebPageTest offre une analyse approfondie, mais prend du temps et produit des rapports surchargés. Parfois, vous avez juste besoin d'une réponse rapide : « Cette page est-elle rapide ou lente ? Quel est le principal problème ? » Performance de Page vous donne cette vue d'ensemble instantanée. L'outil lit les données de timing depuis la Performance API et la Navigation Timing API du navigateur (données déjà collectées — aucun rechargement de page supplémentaire n'est nécessaire) et les présente dans un tableau de bord clair et visuel. La section supérieure affiche les métriques de timing clés : First Contentful Paint (quand le premier contenu apparaît), DOMContentLoaded (quand le HTML est entièrement analysé), Full Load (quand toutes les ressources sont chargées) et Time to Interactive (quand la page devient interactive). Chaque métrique est colorée — vert pour rapide, jaune pour modéré, rouge pour lent — selon les seuils des Web Vitals. En dessous, une répartition des ressources montre la bande passante consommée par JavaScript, CSS, images, polices et autres types de ressources, avec des graphiques en barres visuels pour une comparaison facile. La section des statistiques DOM affiche le nombre total d'éléments, la profondeur d'imbrication maximale et le nombre d'écouteurs d'événements — des indicateurs de la complexité DOM qui affectent les performances de rendu.
Affiche First Contentful Paint (FCP), DOMContentLoaded, Full Page Load et Time to Interactive (TTI) — les quatre métriques de performance les plus importantes. Chacune est colorée : vert (rapide), jaune (modéré), rouge (lent) selon les seuils établis des Web Vitals.
Graphique en barres visuel affichant le nombre et la taille totale de chaque type de ressource : fichiers JavaScript, feuilles de style CSS, images, polices et autres ressources. Voyez instantanément quel type de ressource contribue le plus au poids de la page.
Affiche le nombre total d'éléments DOM, la profondeur d'imbrication maximale et le nombre total d'écouteurs d'événements. Les DOM volumineux (2000+ éléments) et les imbrications profondes (15+ niveaux) sont signalés comme des goulots d'étranglement potentiels des performances.
Un score unique de 0 à 100 résume la santé des performances de la page, coloré en vert (85+), jaune (50-84) ou rouge (0-49). Basé sur une combinaison pondérée des métriques de timing et de l'efficacité des ressources.
Affiche la taille combinée de toutes les ressources téléchargées en Mo. Décomposé par catégorie pour que vous puissiez voir, par exemple, que 842 Ko sont du JavaScript, 245 Ko sont des images et 128 Ko sont du CSS — identifiant les contributeurs les plus lourds.
Lit les données de performance depuis la Performance API du navigateur — des données déjà collectées lors du chargement normal de la page. Aucun re-test synthétique, aucune requête réseau supplémentaire et aucun impact sur les performances lors de l'utilisation de l'outil.
Ouvrez n'importe quelle page et obtenez une vue d'ensemble instantanée des performances. Est-elle rapide (score vert), modérée (jaune) ou lente (rouge) ? Le tableau de bord répond à cette question en moins d'une seconde — pas besoin d'attendre l'exécution de Lighthouse.
Si la page est lente, la répartition des ressources en montre la raison. 1,2 Mo de JavaScript ? C'est le goulot d'étranglement. 800 Ko d'images non optimisées ? C'est ce qu'il faut corriger. La répartition visuelle rend les contributeurs les plus lourds évidents.
Exécutez Performance de Page avant d'effectuer des optimisations, notez les métriques. Apportez vos modifications, rechargez et relancez l'outil. Comparez FCP, le temps de chargement et le poids total de la page pour vérifier que vos optimisations ont eu l'impact attendu.
Exécutez Performance de Page sur votre site et sur ceux de vos concurrents. Comparez les temps de chargement, les poids de page et les répartitions des ressources. Les concurrents livrent-ils moins de JavaScript ? Leurs images sont-elles mieux optimisées ?
Exécutez l'outil sur les pages clés régulièrement pendant le développement. Si le score de performance chute ou si le poids de la page augmente soudainement, vous avez introduit une régression — détectez-la avant qu'elle n'atteigne la production.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône Performance de Page. Le tableau de bord apparaît instantanément avec les données de performance du chargement actuel de la page.
Vérifiez les quatre métriques de timing clés en haut : FCP, DOMContentLoaded, Full Load et TTI. Les valeurs vertes sont rapides, le jaune est modéré, le rouge nécessite une amélioration.
Regardez le graphique en barres des ressources pour voir quel type de ressource est le plus lourd. JavaScript est souvent le contributeur principal — si JS dépasse 500 Ko, il peut valoir la peine de faire du code-splitting ou du lazy-loading.
Examinez les statistiques DOM. Si le nombre d'éléments dépasse 1500 ou si la profondeur d'imbrication dépasse 15, envisagez de simplifier le balisage pour améliorer les performances de rendu.
Le score global donne un repère rapide. Exécutez l'outil avant et après les optimisations pour mesurer les améliorations.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
