{"id":16030,"date":"2021-04-01T19:30:06","date_gmt":"2021-04-01T19:30:06","guid":{"rendered":"https:\/\/www.dotcom-monitor.com\/blog\/2021\/04\/01\/graphique-waterfall-visualisation-des-donnees-pour-lanalyse-de-la-performance-web\/"},"modified":"2026-05-22T15:06:42","modified_gmt":"2026-05-22T15:06:42","slug":"graphique-waterfall-visualisation-des-donnees-pour-lanalyse-de-la-performance-web","status":"publish","type":"post","link":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/graphique-waterfall-visualisation-des-donnees-pour-lanalyse-de-la-performance-web\/","title":{"rendered":"Graphique waterfall : Visualisation des donn\u00e9es pour l\u2019analyse de la performance Web"},"content":{"rendered":"

Votre site web ne fonctionne pas de mani\u00e8re optimale, et vous ne comprenez pas s\u2019il s\u2019agit d\u2019un probl\u00e8me avec la taille de vos images, une mauvaise mise en cache ou si la lenteur est caus\u00e9e par un contenu tiers ou CDN lent. Il pourrait m\u00eame \u00eatre caus\u00e9 par un autre facteur tout \u00e0 fait.<\/p>\n

Un graphique en cascade, une forme de visualisation de donn\u00e9es qui cartographie l\u2019effet cumulatif des valeurs introduites s\u00e9quentiellement, peut aider. Lors du suivi des performances Web, un graphique cascade peut aider \u00e0 d\u00e9terminer combien de temps il faut pour chaque action entre le serveur Web et l\u2019utilisateur lorsqu\u2019un utilisateur acc\u00e8de \u00e0 un site Web. Ces donn\u00e9es peuvent aider les administrateurs de sites Web \u00e0 comprendre l\u2019impact des diff\u00e9rents \u00e9l\u00e9ments d\u2019un site sur les performances.<\/p>\n

\"Performance<\/a><\/p>\n

<\/p>\n

Graphiques cascade aider \u00e0 rep\u00e9rer les tra\u00een\u00e9es de performance<\/span><\/h3>\n

Les graphiques en cascade sont g\u00e9n\u00e9ralement affich\u00e9s sous forme de graphiques \u00e0 barres lors du suivi des performances Web. Comme indiqu\u00e9 dans le graphique cascade ci-dessus, chaque ligne repr\u00e9sente un objet diff\u00e9rent dans la page, comme le texte, une image ou un fichier JavaScript. Chaque objet fait son propre aller-retour entre le serveur et le navigateur, et le temps qu\u2019il faut pour le faire est captur\u00e9 dans le graphique cascade, repr\u00e9sent\u00e9 par une barre de couleur diff\u00e9rente pour chaque activit\u00e9. Les temps sont mesur\u00e9s pour la recherche DNS, connexion, SSL, demande, premier paquet et t\u00e9l\u00e9chargement que chaque objet est livr\u00e9 au navigateur. Chaque activit\u00e9 est indiqu\u00e9e dans la l\u00e9gende en bas du graphique. Certaines activit\u00e9s se d\u00e9roulent en parall\u00e8le.<\/p>\n

Apprenons \u00e0 lire un tableau de chute d\u2019eau en je je regardant chacune de ces mesures, et comment elles peuvent potentiellement avoir un impact sur les performances du site Web :<\/p>\n

1) La recherche DNS (orange) cartographie<\/b> le temps qu\u2019il faut au navigateur pour rechercher le domaine de l\u2019objet demand\u00e9. Si les temps semblent longs, la mise en cache peut \u00eatre d\u00e9sactiv\u00e9e ou n\u2019est pas efficace. Les d\u00e9veloppeurs peuvent \u00e9galement utiliser des \u00ab maintenus en vie \u00bb pour r\u00e9soudre ce probl\u00e8me. Les maintenus en vie vous permettent de v\u00e9rifier si la connexion TCP est toujours en cours d\u2019ex\u00e9cution ou si elle s\u2019est rompue.<\/p>\n

2) Connection (purple) cartographie<\/b> le temps qu\u2019il faut au navigateur et au serveur pour reconna\u00eetre l\u2019existence d\u2019une connexion entre eux. Limiter le nombre de connexions en les groupant peut aider \u00e0 am\u00e9liorer l\u00e9g\u00e8rement les performances.<\/p>\n

3) SSL (rouge)<\/b> cartographie le temps qu\u2019il faut au navigateur et au serveur pour \u00ab serrer la main \u00bb avant qu\u2019une connexion ne soit \u00e9tablie, si le composant est prot\u00e9g\u00e9 par SSL (cryptage des cl\u00e9s publiques\/priv\u00e9es). Si vous utilisez SSL, vous pouvez acc\u00e9l\u00e9rer les performances en cryptant uniquement les \u00e9l\u00e9ments essentiels, pas tous les objets.<\/p>\n

4) La demande (bleu clair)<\/b> est le temps qu\u2019il faut au navigateur pour envoyer la demande au serveur.<\/p>\n

5) Le premier paquet (vert bleu) est<\/b> le temps entre le moment o\u00f9 le contenu est demand\u00e9 \u00e0 partir d\u2019un serveur, et quand le premier bit arrive de retour. Les vitesses de connexion Internet peuvent \u00eatre un probl\u00e8me ici; si un utilisateur est limit\u00e9 par la bande passante, cela pourrait avoir un impact sur les performances. Votre code ou base de donn\u00e9es c\u00f4t\u00e9 serveur peut \u00e9galement causer des probl\u00e8mes de performances.<\/p>\n

6) T\u00e9l\u00e9charger (bleu fonc\u00e9)<\/b> est le temps qu\u2019il faut pour chaque morceau de contenu \u00e0 envoyer du serveur au navigateur. Trop de bleu signifie qu\u2019il y a trop d\u2019objets de page ou que chaque objet est trop grand. La compression, la minification, des algorithmes plus compacts et l\u2019\u00e9limination de la redondance peuvent tous aider.<\/p>\n

Dans le cas des cartes de chute d\u2019eau, moins c\u2019est toujours mieux. Moins il y a de lignes dans le graphique et plus chaque barre est courte, meilleures seront les performances de votre site Web. Vous \u00eates int\u00e9ress\u00e9 \u00e0 voir comment les \u00e9l\u00e9ments de votre site Web ont un impact sur les performances? Vous pouvez cr\u00e9er un graphique cascade pour votre<\/a> propre site Web en utilisant cet outil de test de vitesse site Web de Dotcom-Monitor.<\/p>\n","protected":false},"excerpt":{"rendered":"

Un graphique en cascade, une forme de visualisation de donn\u00e9es qui cartographie l\u2019effet cumulatif des valeurs introduites s\u00e9quentiellement, peut aider. Lors du suivi des performances Web, un graphique cascade peut aider \u00e0 d\u00e9terminer combien de temps il faut pour chaque action entre le serveur Web et l\u2019utilisateur lorsqu\u2019un utilisateur acc\u00e8de \u00e0 un site Web. Ces donn\u00e9es peuvent aider les administrateurs de sites Web \u00e0 comprendre l\u2019impact des diff\u00e9rents \u00e9l\u00e9ments d\u2019un site sur les performances.<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3464],"tags":[],"class_list":["post-16030","post","type-post","status-publish","format-standard","hentry","category-vitesse-de-chargement-de-la-page"],"_links":{"self":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/16030","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/comments?post=16030"}],"version-history":[{"count":0,"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/16030\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/media?parent=16030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/categories?post=16030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/tags?post=16030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}