diff options
Diffstat (limited to 'files/fr/learn/performance')
| -rw-r--r-- | files/fr/learn/performance/css/index.md | 96 | ||||
| -rw-r--r-- | files/fr/learn/performance/html/index.md | 121 | ||||
| -rw-r--r-- | files/fr/learn/performance/index.md | 128 | ||||
| -rw-r--r-- | files/fr/learn/performance/measuring_performance/index.md | 118 | ||||
| -rw-r--r-- | files/fr/learn/performance/multimedia/index.md | 174 | ||||
| -rw-r--r-- | files/fr/learn/performance/why_web_performance/index.md | 120 |
6 files changed, 382 insertions, 375 deletions
diff --git a/files/fr/learn/performance/css/index.md b/files/fr/learn/performance/css/index.md index f2f3f0dfa2..d07d7fe267 100644 --- a/files/fr/learn/performance/css/index.md +++ b/files/fr/learn/performance/css/index.md @@ -3,82 +3,80 @@ title: Optimisation des performances en CSS slug: Learn/Performance/CSS translation_of: Learn/Performance/CSS --- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/Performance/html", "Learn/Performance/fonts", "Learn/Performance")}} {{draft}}</p> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Performance/html", "Learn/Performance/fonts", "Learn/Performance")}} {{draft}} -<p>Peindre une page non stylisée, puis la repeindre une fois les styles analysés constituerait une mauvaise expérience pour l'utilisateur. C'est pourquoi les feuilles de style CSS bloquent le rendu, sauf si le navigateur sait que les feuilles de style CSS ne sont pas nécessaires. Le navigateur peut peindre la page une fois qu'il a téléchargé le CSS et construit le modèle objet CSS. Les navigateurs suivent un chemin de rendu spécifique : la peinture n'intervient qu'après la mise en page, qui intervient après la création de l'arbre de rendu, qui nécessite à son tour les arbres DOM et CSSOM. Pour optimiser la construction du CSSOM, il faut supprimer les styles inutiles, les minifier, les compresser et les mettre en cache, et répartir les CSS qui ne sont pas nécessaires au chargement de la page dans des fichiers supplémentaires afin de réduire le blocage du rendu CSS.</p> +Peindre une page non stylisée, puis la repeindre une fois les styles analysés constituerait une mauvaise expérience pour l'utilisateur. C'est pourquoi les feuilles de style CSS bloquent le rendu, sauf si le navigateur sait que les feuilles de style CSS ne sont pas nécessaires. Le navigateur peut peindre la page une fois qu'il a téléchargé le CSS et construit le modèle objet CSS. Les navigateurs suivent un chemin de rendu spécifique : la peinture n'intervient qu'après la mise en page, qui intervient après la création de l'arbre de rendu, qui nécessite à son tour les arbres DOM et CSSOM. Pour optimiser la construction du CSSOM, il faut supprimer les styles inutiles, les minifier, les compresser et les mettre en cache, et répartir les CSS qui ne sont pas nécessaires au chargement de la page dans des fichiers supplémentaires afin de réduire le blocage du rendu CSS. -<h3 id="optimizing_for_render_blocking">Optimiser le temps de bloquage du rendu</h3> +### Optimiser le temps de bloquage du rendu -<p>Les CSS peuvent adapter les styles à des conditions particulières grâce aux requêtes média. Les requêtes média sont importantes pour une conception Web adaptative et nous aident à optimiser un chemin de rendu critique. Le navigateur bloque le rendu jusqu'à ce qu'il analyse tous ces styles, mais il ne bloque pas le rendu des styles qu'il sait qu'il n'utilisera pas, comme les feuilles de style d'impression. En divisant le CSS en plusieurs fichiers basés sur des requêtes média, vous pouvez empêcher le blocage du rendu pendant le téléchargement du CSS inutilisé. Pour créer un lien CSS non bloquant, déplacez les styles qui ne sont pas immédiatement utilisés, tels que les styles d'impression, dans un fichier distinct, ajoutez une balise HTML <code><a href="/fr/docs/Web/HTML/Element/link"><link></a></code>, et ajoutez une requête média, indiquant dans ce cas qu'il s'agit d'une feuille de style d'impression.</p> +Les CSS peuvent adapter les styles à des conditions particulières grâce aux requêtes média. Les requêtes média sont importantes pour une conception Web adaptative et nous aident à optimiser un chemin de rendu critique. Le navigateur bloque le rendu jusqu'à ce qu'il analyse tous ces styles, mais il ne bloque pas le rendu des styles qu'il sait qu'il n'utilisera pas, comme les feuilles de style d'impression. En divisant le CSS en plusieurs fichiers basés sur des requêtes média, vous pouvez empêcher le blocage du rendu pendant le téléchargement du CSS inutilisé. Pour créer un lien CSS non bloquant, déplacez les styles qui ne sont pas immédiatement utilisés, tels que les styles d'impression, dans un fichier distinct, ajoutez une balise HTML [`<link>`](/fr/docs/Web/HTML/Element/link), et ajoutez une requête média, indiquant dans ce cas qu'il s'agit d'une feuille de style d'impression. -<pre class="brush: html"><link rel="stylesheet" href="styles.css"> <!-- bloquant --> -<link rel="stylesheet" href="print.css" media="print"> <!-- non bloquant --> -<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"> <!-- non bloquant sur grand écran --></pre> +```html +<link rel="stylesheet" href="styles.css"> <!-- bloquant --> +<link rel="stylesheet" href="print.css" media="print"> <!-- non bloquant --> +<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"> <!-- non bloquant sur grand écran --> +``` -<p>Par défaut, le navigateur suppose que chaque feuille de style spécifiée bloque le rendu. Indiquez au navigateur quand la feuille de style doit être appliquée en ajoutant un attribut <code>media</code> avec la <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">requête média</a>. Lorsque le navigateur voit une feuille de style, il sait qu'il n'a besoin de l'appliquer que pour un scénario spécifique, il télécharge quand même la feuille de style, mais ne rend pas le bloc. En séparant la feuille de style en plusieurs fichiers, le fichier principal bloquant le rendu, dans ce cas <code>styles.css</code>, est beaucoup plus petit, ce qui réduit le temps de blocage du rendu.</p> +Par défaut, le navigateur suppose que chaque feuille de style spécifiée bloque le rendu. Indiquez au navigateur quand la feuille de style doit être appliquée en ajoutant un attribut `media` avec la [requête média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries). Lorsque le navigateur voit une feuille de style, il sait qu'il n'a besoin de l'appliquer que pour un scénario spécifique, il télécharge quand même la feuille de style, mais ne rend pas le bloc. En séparant la feuille de style en plusieurs fichiers, le fichier principal bloquant le rendu, dans ce cas `styles.css`, est beaucoup plus petit, ce qui réduit le temps de blocage du rendu. -<h3 id="animating_on_the_gpu">Les animations sur le GPU</h3> +### Les animations sur le GPU -<p>Les navigateurs sont déjà optimisés pour manipuler les animations CSS, ainsi que les propriétés d'animation qui ne provoquent pas de réorganisation soudaine du document (ces autres propriétés nécessiteront alors un nouveau rendu). Cette optimisation s'effectue en plaçant les éléments animés sur un autre fil d'exécution que l'on peut alors envoyer sur le GPU, bien plus rapide pour ce genre de tâche. Pour profiter de cette optimisation, il faut alors animer de préférence avec les propriétés de transformation 3D (<code><a href="/fr/docs/Web/CSS/transform">transform: translateZ()</a></code>, <code><a href="/fr/docs/Web/CSS/transform-function/rotate3d()">rotate3d()</a></code>, etc.), de transformation 2D ainsi que les propriétés <code><a href="/fr/docs/Web/CSS/opacity">opacity</a></code>, <code><a href="/fr/docs/Web/CSS/position">position: fixed</a></code>, <code><a href="/fr/docs/Web/CSS/will-change">will-change</a></code> et <code><a href="/fr/docs/Web/CSS/filter">filter</a></code>. D'autres éléments, parmi lesquels <code><a href="/fr/docs/Web/HTML/Element/video"><video></a></code>, <code><a href="/fr/docs/Web/HTML/Element/canvas"><canvas></a></code> ou encore <code><a href="/fr/docs/Web/HTML/Element/iframe"><iframe></a></code>, fonctionnent aussi sur leur propre fil d'exécution. Cette technique permet donc de tirer profit de la vitesse d'exécution du GPU pour chaque élément géré sur un nouveau fil d'exécution, et permet d'obtenir de bien meilleures performances, en particulier sur mobile.</p> +Les navigateurs sont déjà optimisés pour manipuler les animations CSS, ainsi que les propriétés d'animation qui ne provoquent pas de réorganisation soudaine du document (ces autres propriétés nécessiteront alors un nouveau rendu). Cette optimisation s'effectue en plaçant les éléments animés sur un autre fil d'exécution que l'on peut alors envoyer sur le GPU, bien plus rapide pour ce genre de tâche. Pour profiter de cette optimisation, il faut alors animer de préférence avec les propriétés de transformation 3D ([`transform: translateZ()`](/fr/docs/Web/CSS/transform), [`rotate3d()`](</fr/docs/Web/CSS/transform-function/rotate3d()>), etc.), de transformation 2D ainsi que les propriétés [`opacity`](/fr/docs/Web/CSS/opacity), [`position: fixed`](/fr/docs/Web/CSS/position), [`will-change`](/fr/docs/Web/CSS/will-change) et [`filter`](/fr/docs/Web/CSS/filter). D'autres éléments, parmi lesquels [`<video>`](/fr/docs/Web/HTML/Element/video), [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) ou encore [`<iframe>`](/fr/docs/Web/HTML/Element/iframe), fonctionnent aussi sur leur propre fil d'exécution. Cette technique permet donc de tirer profit de la vitesse d'exécution du GPU pour chaque élément géré sur un nouveau fil d'exécution, et permet d'obtenir de bien meilleures performances, en particulier sur mobile. -<h3 id="will-change_property">La propriété <code>will-change</code></h3> +### La propriété `will-change` -<p>La propriété CSS <a href="/fr/docs/Web/CSS/will-change"><code>will-change</code></a> indique au navigateur les propriétés CSS d'un élément qui sont susceptibles d'être modifiées par la suite (lors d'animations par exemple), afin que le navigateur puisse s'y préparer et optimiser ces changements. Cela permet principalement d'améliorer les performances en réalisant en amont des calculs parfois gourmands.</p> +La propriété CSS [`will-change`](/fr/docs/Web/CSS/will-change) indique au navigateur les propriétés CSS d'un élément qui sont susceptibles d'être modifiées par la suite (lors d'animations par exemple), afin que le navigateur puisse s'y préparer et optimiser ces changements. Cela permet principalement d'améliorer les performances en réalisant en amont des calculs parfois gourmands. -<pre class="brush: css">will-change: opacity, transform;</pre> +```css +will-change: opacity, transform; +``` -<h3 id="the_cssxreffont-display_property">La propriété <code>font-display</code></h3> +### La propriété `font-display` -<p>Insérée dans une règle <a href="/fr/docs/Web/CSS/@font-face"><code>@font-face</code></a>, la propriété CSS <a href="/fr/docs/Web/CSS/@font-face/font-display"><code>font-display</code></a> permet de définir la logique de chargement et d'affichage des polices par le navigateur. Elle permet par exemple d'afficher le texte avec une police par défaut le temps que l'autre charge ou lorsque le chargement échoue. Cela permet de rendre le texte visible sans l'attente du chargement des polices, mais a pour défaut un flash brusque de changement de police une fois la ressource chargée.</p> +Insérée dans une règle [`@font-face`](/fr/docs/Web/CSS/@font-face), la propriété CSS [`font-display`](/fr/docs/Web/CSS/@font-face/font-display) permet de définir la logique de chargement et d'affichage des polices par le navigateur. Elle permet par exemple d'afficher le texte avec une police par défaut le temps que l'autre charge ou lorsque le chargement échoue. Cela permet de rendre le texte visible sans l'attente du chargement des polices, mais a pour défaut un flash brusque de changement de police une fois la ressource chargée. -<pre class="brush: css">@font-face { +```css +@font-face { font-family: someFont; src: url(/path/to/fonts/someFont.woff) format('woff'); font-weight: 400; font-style: normal; font-display: fallback; -}</pre> +} +``` -<p>Dans cet exemple, la dernière règle <code>font-display: fallback;</code> permet justement d'afficher le texte avec une police par défaut en attendant le chargement de la police <code>someFont.woff</code>.</p> +Dans cet exemple, la dernière règle `font-display: fallback;` permet justement d'afficher le texte avec une police par défaut en attendant le chargement de la police `someFont.woff`. -<h3 id="the_cssxrefcontain_property">La propriété <code>contain</code></h3> +### La propriété `contain` -<p>La propriété CSS <a href="/fr/docs/Web/CSS/contain"><code>contain</code></a> permet quant à elle de spécifier au navigateur qu'un élément et son contenu sont, dans la mesure du possible, indépendants du reste de l'arborescence du document. Ceci offre la possibilité au navigateur de recalculer la mise en page, le style, le rendu, la taille ou toute combinaison de ces propriétés seulement pour une portion de l'arborescence DOM, sans avoir à étendre ces calculs à la totalité de la page.</p> +La propriété CSS [`contain`](/fr/docs/Web/CSS/contain) permet quant à elle de spécifier au navigateur qu'un élément et son contenu sont, dans la mesure du possible, indépendants du reste de l'arborescence du document. Ceci offre la possibilité au navigateur de recalculer la mise en page, le style, le rendu, la taille ou toute combinaison de ces propriétés seulement pour une portion de l'arborescence DOM, sans avoir à étendre ces calculs à la totalité de la page. -<h2 id="conclusion">Conclusion</h2> +## Conclusion -<p>Optimiser les performances en CSS revient ainsi à améliorer deux étapes cruciales et chronophages du rendu de page :</p> +Optimiser les performances en CSS revient ainsi à améliorer deux étapes cruciales et chronophages du rendu de page : -<ul> - <li>d'une part le chargement des ressources CSS de la page (en compressant, en divisant le fichier, ou encore en l'enregistrant dans le cache par exemple) ;</li> - <li>d'autre part le rendu, en établissant une stratégie ingénieuse de chargement et d'interprétation des ressources, notamment en distinguant les ressources essentielles pour le rendu et les autres ressources annexes, qui peuvent attendre.</li> -</ul> +- d'une part le chargement des ressources CSS de la page (en compressant, en divisant le fichier, ou encore en l'enregistrant dans le cache par exemple) ; +- d'autre part le rendu, en établissant une stratégie ingénieuse de chargement et d'interprétation des ressources, notamment en distinguant les ressources essentielles pour le rendu et les autres ressources annexes, qui peuvent attendre. -<p>Enfin, les outils de développement du navigateur sont à votre disposition pour vous aider à cibler les étapes chronophages qui ralentissent le rendu de vos pages et gagner encore en efficacité, au prix parfois de quelques compromis.</p> +Enfin, les outils de développement du navigateur sont à votre disposition pour vous aider à cibler les étapes chronophages qui ralentissent le rendu de vos pages et gagner encore en efficacité, au prix parfois de quelques compromis. -<p>{{PreviousMenuNext("Learn/Performance/html", "Learn/Performance/fonts", "Learn/Performance")}}</p> +{{PreviousMenuNext("Learn/Performance/html", "Learn/Performance/fonts", "Learn/Performance")}} -<h2 id="in_this_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/Performance/why_web_performance">Le « pourquoi » des performances web</a></li> - <li><a href="/fr/docs/Learn/Performance/What_is_web_performance">Que sont les performances web ?</a></li> - <li><a href="/fr/docs/Learn/Performance/Perceived_performance">Comment les internautes perçoivent-ils les performances ?</a></li> - <li><a href="/fr/docs/Learn/Performance/Measuring_performance">Mesurer les performances</a></li> - <li><a href="/fr/docs/Learn/Performance/Multimedia">Multimédia : images</a></li> - <li><a href="/fr/docs/Learn/Performance/video">Multimédia : vidéos</a></li> - <li><a href="/fr/docs/Learn/Performance/JavaScript">Bonnes pratiques Javascript en matière de performance</a></li> - <li><a href="/fr/docs/Learn/Performance/HTML">Fonctionnalité HTML pour la performance</a></li> - <li><a href="/fr/docs/Learn/Performance/CSS">Optimisation des performances en CSS</a></li> - <li><a href="/fr/docs/Learn/Performance/Fonts">Performance et polices</a></li> - <li><a href="/fr/docs/Learn/Performance/Mobile">Performance sur mobile</a></li> - <li><a href="/fr/docs/Learn/Performance/business_case_for_performance">Placer le focus sur les performances</a></li> -</ul> +- [Le « pourquoi » des performances web](/fr/docs/Learn/Performance/why_web_performance) +- [Que sont les performances web ?](/fr/docs/Learn/Performance/What_is_web_performance) +- [Comment les internautes perçoivent-ils les performances ?](/fr/docs/Learn/Performance/Perceived_performance) +- [Mesurer les performances](/fr/docs/Learn/Performance/Measuring_performance) +- [Multimédia : images](/fr/docs/Learn/Performance/Multimedia) +- [Multimédia : vidéos](/fr/docs/Learn/Performance/video) +- [Bonnes pratiques Javascript en matière de performance](/fr/docs/Learn/Performance/JavaScript) +- [Fonctionnalité HTML pour la performance](/fr/docs/Learn/Performance/HTML) +- [Optimisation des performances en CSS](/fr/docs/Learn/Performance/CSS) +- [Performance et polices](/fr/docs/Learn/Performance/Fonts) +- [Performance sur mobile](/fr/docs/Learn/Performance/Mobile) +- [Placer le focus sur les performances](/fr/docs/Learn/Performance/business_case_for_performance) -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li> - <p><a href="/fr/docs/Web/Performance/CSS_JavaScript_animation_performance">CSS animation performance</a></p> - </li> -</ul> +- [CSS animation performance](/fr/docs/Web/Performance/CSS_JavaScript_animation_performance) diff --git a/files/fr/learn/performance/html/index.md b/files/fr/learn/performance/html/index.md index 2c6ae834d6..b2f063073b 100644 --- a/files/fr/learn/performance/html/index.md +++ b/files/fr/learn/performance/html/index.md @@ -3,80 +3,83 @@ title: Fonctionnalités de performances liées à HTML slug: Learn/Performance/HTML translation_of: Learn/Performance/HTML --- -<p>{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/javascript_performance", "Learn/Performance/CSS", "Learn/Performance")}} {{draft}}</p> +{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/javascript_performance", "Learn/Performance/CSS", "Learn/Performance")}} {{draft}} -<p>HTML est par défaut rapide et accessible. Il est du devoir de toute personne développant des sites web et des applications de s'assurer que ces deux caractéristiques sont préservées lors de la création ou de la modification de code HTML. Des difficultés peuvent apparaître par exemple lorsque la taille de fichier d'un élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a> est trop importante, ou lorsqu'une page web n'est pas optimisée pour les appareils mobiles. Ce module a pour but de présenter les fonctionnalités clés de HTML qui sont liées aux performances, et qui peuvent améliorer drastiquement la qualité de vos pages web.</p> +HTML est par défaut rapide et accessible. Il est du devoir de toute personne développant des sites web et des applications de s'assurer que ces deux caractéristiques sont préservées lors de la création ou de la modification de code HTML. Des difficultés peuvent apparaître par exemple lorsque la taille de fichier d'un élément [`<video>`](/fr/docs/Web/HTML/Element/video) est trop importante, ou lorsqu'une page web n'est pas optimisée pour les appareils mobiles. Ce module a pour but de présenter les fonctionnalités clés de HTML qui sont liées aux performances, et qui peuvent améliorer drastiquement la qualité de vos pages web. <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> - <td>Bases de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base</a> installés et connaissances de base <a href="/fr/docs/Learn/Getting_started_with_the_web">des technologies web opérant côté client</a>.</td> + <th scope="row">Prérequis :</th> + <td> + Bases de l'informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >logiciels de base</a + > + installés et connaissances de base + <a href="/fr/docs/Learn/Getting_started_with_the_web" + >des technologies web opérant côté client</a + >. + </td> </tr> <tr> - <th scope="row">Objectifs :</th> - <td>En savoir davantage sur l'impact des éléments et attributs HTML le l'optimisation des performances pour le web.</td> + <th scope="row">Objectifs :</th> + <td> + En savoir davantage sur l'impact des éléments et attributs HTML le + l'optimisation des performances pour le web. + </td> </tr> </tbody> </table> -<h2 id="elements_attributes_impacting_performance">Éléments & attributs ayant un impact sur les performances</h2> +## Éléments & attributs ayant un impact sur les performances -<ul> - <li><a href="/fr/docs/Web/HTML/Element/picture">L'élément <code><picture></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/video">L'élément <code><video></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/Source">L'élément <code><source></code></a></li> - <li> - <a href="/fr/docs/Web/HTML/Element/Img#attributes">L'élément et l'attribut <code><img> srcset</code></a> - <ul> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images adaptatives</a></li> - </ul> - </li> - <li><a href="/fr/docs/orphaned/Web/HTML/Preloading_content">Préchargement du contenu avec <code>rel="preload"</code></a> - <a href="https://w3c.github.io/preload/">(https://w3c.github.io/preload/ - en anglais</a>)</li> - <li>Attributs <code>async</code> / <code>defer</code></li> - <li><a href="/fr/docs/Web/HTML/Element/iframe">L'élément <code><iframe></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/object">L'élément <code><object></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/script">L'élément <code><script></code></a></li> - <li><a href="/fr/docs/Web/HTML/Attributes/rel">L'attribut <code>rel</code></a></li> -</ul> +- [L'élément `<picture>`](/fr/docs/Web/HTML/Element/picture) +- [L'élément `<video>`](/fr/docs/Web/HTML/Element/video) +- [L'élément `<source>`](/fr/docs/Web/HTML/Element/Source) +- [L'élément et l'attribut `<img> srcset`](/fr/docs/Web/HTML/Element/Img#attributes) -<h2 id="conclusion">Conclusion</h2> + - [Images adaptatives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) -<p>{{PreviousMenuNext("Learn/Performance/javascript_performance", "Learn/Performance/CSS", "Learn/Performance")}}</p> +- [Préchargement du contenu avec `rel="preload"`](/fr/docs/orphaned/Web/HTML/Preloading_content) - [(https://w3c.github.io/preload/ - en anglais](https://w3c.github.io/preload/)) +- Attributs `async` / `defer` +- [L'élément `<iframe>`](/fr/docs/Web/HTML/Element/iframe) +- [L'élément `<object>`](/fr/docs/Web/HTML/Element/object) +- [L'élément `<script>`](/fr/docs/Web/HTML/Element/script) +- [L'attribut `rel`](/fr/docs/Web/HTML/Attributes/rel) -<h2 id="in_this_module">Dans ce module</h2> +## Conclusion -<ul> - <li><a href="/fr/docs/Learn/Performance/why_web_performance">Le « pourquoi » des performances web</a></li> - <li><a href="/fr/docs/Learn/Performance/What_is_web_performance">Qu'est-ce que sont les performances web ?</a></li> - <li><a href="/fr/docs/Learn/Performance/Perceived_performance">Comment les visiteurs perçoivent-ils les performances ?</a></li> - <li><a href="/fr/docs/Learn/Performance/Measuring_performance">Mesurer les performances</a></li> - <li><a href="/fr/docs/Learn/Performance/Multimedia">Multimédia : images</a></li> - <li><a href="/fr/docs/Learn/Performance/video">Multimédia : vidéos</a></li> - <li><a href="/fr/docs/Learn/Performance/JavaScript">Bonnes pratiques de performances pour JavaScript</a></li> - <li><a href="/fr/docs/Learn/Performance/HTML">Fonctionnalités de HTML liées aux performances</a></li> - <li><a href="/fr/docs/Learn/Performance/CSS">Fonctionnalités de CSS liées aux performances</a></li> - <li><a href="/fr/docs/Learn/Performance/Fonts">Performances et polices d'écriture</a></li> - <li><a href="/fr/docs/Learn/Performance/Mobile">Performances sur mobile</a></li> - <li><a href="/fr/docs/Learn/Performance/business_case_for_performance">Placer le focus sur les performances</a></li> -</ul> +{{PreviousMenuNext("Learn/Performance/javascript_performance", "Learn/Performance/CSS", "Learn/Performance")}} -<h2 id="see_also">Voir aussi</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Web/HTML/Element/picture">L'élément <code><picture></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/video">L'élément <code><video></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/Source">L'élément <code><source></code></a></li> - <li> - <a href="/fr/docs/Web/HTML/Element/Img#attributes">L'élément et l'attribut <code><img> srcset</code></a> - <ul> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images adaptatives</a></li> - </ul> - </li> - <li><a href="/fr/docs/orphaned/Web/HTML/Preloading_content">Préchargement du contenu avec <code>rel="preload"</code></a> - <a href="https://w3c.github.io/preload/">(https://w3c.github.io/preload/ - en anglais</a>)</li> - <li>Attributs <code>async</code> / <code>defer</code></li> - <li><a href="/fr/docs/Web/HTML/Element/iframe">L'élément <code><iframe></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/object">L'élément <code><object></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/script">L'élément <code><script></code></a></li> - <li><a href="/fr/docs/Web/HTML/Attributes/rel">L'attribut <code>rel</code></a></li> -</ul> +- [Le « pourquoi » des performances web](/fr/docs/Learn/Performance/why_web_performance) +- [Qu'est-ce que sont les performances web ?](/fr/docs/Learn/Performance/What_is_web_performance) +- [Comment les visiteurs perçoivent-ils les performances ?](/fr/docs/Learn/Performance/Perceived_performance) +- [Mesurer les performances](/fr/docs/Learn/Performance/Measuring_performance) +- [Multimédia : images](/fr/docs/Learn/Performance/Multimedia) +- [Multimédia : vidéos](/fr/docs/Learn/Performance/video) +- [Bonnes pratiques de performances pour JavaScript](/fr/docs/Learn/Performance/JavaScript) +- [Fonctionnalités de HTML liées aux performances](/fr/docs/Learn/Performance/HTML) +- [Fonctionnalités de CSS liées aux performances](/fr/docs/Learn/Performance/CSS) +- [Performances et polices d'écriture](/fr/docs/Learn/Performance/Fonts) +- [Performances sur mobile](/fr/docs/Learn/Performance/Mobile) +- [Placer le focus sur les performances](/fr/docs/Learn/Performance/business_case_for_performance) + +## Voir aussi + +- [L'élément `<picture>`](/fr/docs/Web/HTML/Element/picture) +- [L'élément `<video>`](/fr/docs/Web/HTML/Element/video) +- [L'élément `<source>`](/fr/docs/Web/HTML/Element/Source) +- [L'élément et l'attribut `<img> srcset`](/fr/docs/Web/HTML/Element/Img#attributes) + + - [Images adaptatives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) + +- [Préchargement du contenu avec `rel="preload"`](/fr/docs/orphaned/Web/HTML/Preloading_content) - [(https://w3c.github.io/preload/ - en anglais](https://w3c.github.io/preload/)) +- Attributs `async` / `defer` +- [L'élément `<iframe>`](/fr/docs/Web/HTML/Element/iframe) +- [L'élément `<object>`](/fr/docs/Web/HTML/Element/object) +- [L'élément `<script>`](/fr/docs/Web/HTML/Element/script) +- [L'attribut `rel`](/fr/docs/Web/HTML/Attributes/rel) diff --git a/files/fr/learn/performance/index.md b/files/fr/learn/performance/index.md index 56b6ccb0f0..a785a493d8 100644 --- a/files/fr/learn/performance/index.md +++ b/files/fr/learn/performance/index.md @@ -12,70 +12,64 @@ tags: - TopicStub translation_of: Learn/Performance --- -<p>{{LearnSidebar}}</p> - -<p>La création de sites Web nécessite HTML, CSS, et JavaScript. Pour créer des sites Web et des applications que les gens veulent utiliser, qui attirent et fidélisent les utilisateurs, vous devez créer une bonne expérience utilisateur. Une bonne expérience utilisateur consiste à s'assurer que le contenu est rapide à charger et réactif à l'interaction de l'utilisateur. Ceci est connu sous le nom de <strong>performance web</strong>, et dans ce module, vous vous concentrerez sur les principes fondamentaux de la création de sites Web performants.</p> - -<p>Le reste de notre matériel d'apprentissage pour débutants a essayé de s'en tenir autant que possible aux meilleures pratiques du Web telles que les performances et l'<a href="/fr/docs/Apprendre/a11y">accessibilité</a>,cependant, il est bon de se concentrer spécifiquement sur ces sujets et de s'assurer que vous les connaissez bien.</p> - -<h2 id="Parcours_dapprentissage">Parcours d'apprentissage</h2> - -<p>Bien que la connaissance de HTML, CSS et JavaScript soit nécessaire pour mettre en œuvre de nombreuses recommandations d'amélioration des performances Web, savoir comment créer des applications n'est pas une condition préalable nécessaire pour comprendre et mesurer les performances Web. Nous vous recommandons cependant, avant de commencer à utiliser ce module, d'avoir au moins une idée de base du développement Web en consultant notre module <a href="/fr/docs/Apprendre/Commencer_avec_le_web">Commencer avec le web</a>.</p> - -<p>Il serait également utile d'approfondir un peu ces sujets, avec des modules tels que:</p> - -<ul> - <li><a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a></li> - <li><a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a></li> -</ul> - -<p>Une fois que vous aurez parcouru ce module, vous serez probablement ravi d'approfondir les performances Web — vous pouvez trouver de nombreux autres enseignement dans notre <a href="/fr/docs/Web/Performance">section principale de performance Web MDN</a>, y compris des aperçus des API de performance, des outils de test et d'analyse, et goulots d'étranglement des performances.</p> - -<h2 id="Guides">Guides</h2> - -<p>Cette rubrique contient les guides suivants. Voici un ordre suggéré pour les parcourir; vous devriez certainement commencer par le premier.</p> - -<dl> - <dt><a href="/fr/docs/Learn/Performance/pourquoi_performance_web">Le "pourquoi" des performances Web</a></dt> - <dd>Cet article explique pourquoi les performances Web sont importantes pour l'accessibilité, l'expérience utilisateur et vos objectifs commerciaux.</dd> - <dt><a href="/fr/docs/Learn/Performance/What_is_web_performance">Qu'est-ce que la performance Web ?</a></dt> - <dd>Vous savez que les performances Web sont importantes, mais en quoi consistent les performances Web ? Cet article présente les composants de la performance, du chargement et du rendu de la page Web, en passant par la manière dont votre contenu est intégré dans le navigateur de votre utilisateur pour être visualisé, aux groupes de personnes dont nous devons tenir compte lors de la réflexion sur les performances.</dd> - <dt><a href="/fr/docs/Learn/Performance/Perceived_performance">Comment les utilisateurs perçoivent-ils les performances ?</a></dt> - <dd>La vitesse à laquelle vos utilisateurs perçoivent votre site est plus importante que la vitesse de votre site Web en millisecondes. Ces perceptions sont affectées par le temps de chargement réel de la page, l'inactivité, la réactivité à l'interaction de l'utilisateur et la fluidité du défilement et d'autres animations. Dans cet article, nous discutons des différentes métriques de chargement, de l'animation et de la réactivité, ainsi que des meilleures pratiques pour améliorer la perception de l'utilisateur, sinon les timings réels.</dd> -</dl> - -<dl> - <dt><a href="/fr/docs/Learn/Performance/Measuring_performance">Mesurer les performances</a></dt> - <dd>Maintenant que vous comprenez quelques métriques de performance, nous nous penchons plus en profondeur sur les outils de performance, les métriques et les API et comment nous pouvons intégrer les performances dans le flux de travail de développement Web.</dd> - <dt><a href="/fr/docs/Learn/Performance/Multimedia">Multimédia: images</a></dt> - <dd>Le fruit le plus bas de la performance Web est souvent l'optimisation des médias. Il est possible de diffuser différents fichiers multimédias en fonction de la capacité, de la taille et de la densité de pixels de chaque agent utilisateur. Dans cet article, nous discutons de l'impact des images sur les performances et des méthodes pour réduire le nombre d'octets envoyés par image.</dd> - <dt><a href="/fr/docs/Learn/Performance/video">Multimédia: vidéo</a></dt> - <dd>Le fruit le plus bas de la performance Web est souvent l'optimisation des médias. Dans cet article, nous discutons de l'impact du contenu vidéo sur les performances, et des astuces telles que la suppression de pistes audio des vidéos d'arrière-plan peuvent améliorer les performances.</dd> - <dt><a href="/fr/docs/Learn/Performance/JavaScript">Meilleures pratiques en matière de performances JavaScript</a></dt> - <dd>JavaScript, lorsqu'il est utilisé correctement, peut permettre des expériences Web interactives et immersives - ou il peut considérablement nuire au temps de téléchargement, au temps de rendu, aux performances dans l'application, à l'autonomie de la batterie et à l'expérience utilisateur. Cet article décrit certaines bonnes pratiques JavaScript à prendre en compte pour garantir que même un contenu complexe est aussi performant que possible.</dd> - <dt><a href="/fr/docs/Learn/Performance/HTML">Fonctionnalités de performances HTML</a></dt> - <dd>Certains attributs et l'ordre source de votre balisage peuvent avoir un impact sur les performances de votre site Web. En minimisant le nombre de nœuds DOM, en vous assurant que le meilleur ordre et les meilleurs attributs sont utilisés pour inclure du contenu tel que des styles, des scripts, des médias et des scripts tiers, vous pouvez considérablement améliorer l'expérience utilisateur. Cet article examine en détail comment le HTML peut être utilisé pour garantir des performances optimales.</dd> - <dt><a href="/fr/docs/Learn/Performance/CSS">Optimisation des performances en CSS</a></dt> - <dd>Le CSS peut être un objectif d'optimisation moins important pour améliorer les performances, mais certaines fonctionnalités CSS ont un impact plus important sur les performances que d'autres. Dans cet article, nous examinons certaines propriétés CSS qui ont un impact sur les performances et suggérons des méthodes de gestion des styles pour garantir que les performances ne sont pas affectées négativement.</dd> - <dt><a href="/fr/docs/Learn/Performance/Fonts">Polices et performances</a></dt> - <dd>Examinez si vous devez inclure des polices externes et, le cas échéant, comment inclure les polices dont votre conception a besoin avec le moins d'impact sur les performances de vos sites.</dd> -</dl> - -<dl> - <dt><a href="/fr/docs/Learn/Performance/Mobile">Performances mobiles</a></dt> - <dd>L'accès Web sur les appareils mobiles étant si populaire et toutes les plates-formes mobiles ayant des navigateurs Web à part entière, mais éventuellement une bande passante, un processeur et une autonomie de batterie limités, il est important de prendre en compte les performances de votre contenu Web sur ces plates-formes. Cet article examine les considérations de performances spécifiques aux mobiles.</dd> - <dt><a href="/fr/docs/Learn/Performance/business_case_for_performance">Mettre l'accent sur la performance</a></dt> - <dd>Un développeur peut faire de nombreuses choses différentes pour améliorer les performances, mais à quelle vitesse est-il assez rapide? Comment pouvez-vous convaincre les pouvoirs de l'importance de ces efforts? Une fois optimisé, comment pouvez-vous vous assurer que le ballonnement ne revient pas? Dans cet article, nous examinons des directions convaincantes, développons une culture de performance et un budget de performance, et introduisons des moyens de garantir que les régressions ne se faufilent pas dans votre base de code.</dd> -</dl> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<dl> - <dt><a href="/fr/docs/Learn/Performance/Web_Performance_Basics">Ressources de performance Web</a></dt> - <dd>Outre les composants frontaux des fichiers HTML, CSS, JavaScript et multimédia, il existe des fonctionnalités qui peuvent ralentir les applications et des fonctionnalités qui peuvent rendre les applications subjectivement et objectivement plus rapides. Il existe de nombreuses API, outils de développement, bonnes pratiques et mauvaises pratiques relatives aux performances Web. Ici, nous présenterons bon nombre de ces fonctionnalités au niveau de base et fournirons des liens vers des plongées plus approfondies pour améliorer les performances de chaque sujet.</dd> - <dt><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images responsives</a></dt> - <dd>Dans cet article, nous découvrirons le concept d'images responsives - des images qui fonctionnent bien sur des appareils avec des tailles d'écran, des résolutions et d'autres fonctionnalités très différentes - et nous examinerons les outils fournis par HTML pour les implémenter. Cela permet d'améliorer les performances sur différents appareils. Les images responsives ne sont qu'une partie du <a href="/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design">responsive design</a>, un futur sujet CSS à apprendre.</dd> - <dt><a href="/fr/docs/Web/Performance">Section principale des performances Web sur MDN</a></dt> - <dd>Notre section principale sur les performances Web - vous trouverez ici beaucoup plus de détails sur les performances Web, y compris des aperçus des API de performance, des outils de test et d'analyse et des problèmes de goulots d'étranglement des performances.</dd> -</dl> +{{LearnSidebar}} + +La création de sites Web nécessite HTML, CSS, et JavaScript. Pour créer des sites Web et des applications que les gens veulent utiliser, qui attirent et fidélisent les utilisateurs, vous devez créer une bonne expérience utilisateur. Une bonne expérience utilisateur consiste à s'assurer que le contenu est rapide à charger et réactif à l'interaction de l'utilisateur. Ceci est connu sous le nom de **performance web**, et dans ce module, vous vous concentrerez sur les principes fondamentaux de la création de sites Web performants. + +Le reste de notre matériel d'apprentissage pour débutants a essayé de s'en tenir autant que possible aux meilleures pratiques du Web telles que les performances et l'[accessibilité](/fr/docs/Apprendre/a11y),cependant, il est bon de se concentrer spécifiquement sur ces sujets et de s'assurer que vous les connaissez bien. + +## Parcours d'apprentissage + +Bien que la connaissance de HTML, CSS et JavaScript soit nécessaire pour mettre en œuvre de nombreuses recommandations d'amélioration des performances Web, savoir comment créer des applications n'est pas une condition préalable nécessaire pour comprendre et mesurer les performances Web. Nous vous recommandons cependant, avant de commencer à utiliser ce module, d'avoir au moins une idée de base du développement Web en consultant notre module [Commencer avec le web](/fr/docs/Apprendre/Commencer_avec_le_web). + +Il serait également utile d'approfondir un peu ces sujets, avec des modules tels que: + +- [Introduction au HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML) +- [Premiers pas avec CSS](/fr/docs/Learn/CSS/First_steps) +- [Premiers pas en JavaScript](/fr/docs/Learn/JavaScript/First_steps) + +Une fois que vous aurez parcouru ce module, vous serez probablement ravi d'approfondir les performances Web — vous pouvez trouver de nombreux autres enseignement dans notre [section principale de performance Web MDN](/fr/docs/Web/Performance), y compris des aperçus des API de performance, des outils de test et d'analyse, et goulots d'étranglement des performances. + +## Guides + +Cette rubrique contient les guides suivants. Voici un ordre suggéré pour les parcourir; vous devriez certainement commencer par le premier. + +- [Le "pourquoi" des performances Web](/fr/docs/Learn/Performance/pourquoi_performance_web) + - : Cet article explique pourquoi les performances Web sont importantes pour l'accessibilité, l'expérience utilisateur et vos objectifs commerciaux. +- [Qu'est-ce que la performance Web ?](/fr/docs/Learn/Performance/What_is_web_performance) + - : Vous savez que les performances Web sont importantes, mais en quoi consistent les performances Web ? Cet article présente les composants de la performance, du chargement et du rendu de la page Web, en passant par la manière dont votre contenu est intégré dans le navigateur de votre utilisateur pour être visualisé, aux groupes de personnes dont nous devons tenir compte lors de la réflexion sur les performances. +- [Comment les utilisateurs perçoivent-ils les performances ?](/fr/docs/Learn/Performance/Perceived_performance) + - : La vitesse à laquelle vos utilisateurs perçoivent votre site est plus importante que la vitesse de votre site Web en millisecondes. Ces perceptions sont affectées par le temps de chargement réel de la page, l'inactivité, la réactivité à l'interaction de l'utilisateur et la fluidité du défilement et d'autres animations. Dans cet article, nous discutons des différentes métriques de chargement, de l'animation et de la réactivité, ainsi que des meilleures pratiques pour améliorer la perception de l'utilisateur, sinon les timings réels. + +<!----> + +- [Mesurer les performances](/fr/docs/Learn/Performance/Measuring_performance) + - : Maintenant que vous comprenez quelques métriques de performance, nous nous penchons plus en profondeur sur les outils de performance, les métriques et les API et comment nous pouvons intégrer les performances dans le flux de travail de développement Web. +- [Multimédia: images](/fr/docs/Learn/Performance/Multimedia) + - : Le fruit le plus bas de la performance Web est souvent l'optimisation des médias. Il est possible de diffuser différents fichiers multimédias en fonction de la capacité, de la taille et de la densité de pixels de chaque agent utilisateur. Dans cet article, nous discutons de l'impact des images sur les performances et des méthodes pour réduire le nombre d'octets envoyés par image. +- [Multimédia: vidéo](/fr/docs/Learn/Performance/video) + - : Le fruit le plus bas de la performance Web est souvent l'optimisation des médias. Dans cet article, nous discutons de l'impact du contenu vidéo sur les performances, et des astuces telles que la suppression de pistes audio des vidéos d'arrière-plan peuvent améliorer les performances. +- [Meilleures pratiques en matière de performances JavaScript](/fr/docs/Learn/Performance/JavaScript) + - : JavaScript, lorsqu'il est utilisé correctement, peut permettre des expériences Web interactives et immersives - ou il peut considérablement nuire au temps de téléchargement, au temps de rendu, aux performances dans l'application, à l'autonomie de la batterie et à l'expérience utilisateur. Cet article décrit certaines bonnes pratiques JavaScript à prendre en compte pour garantir que même un contenu complexe est aussi performant que possible. +- [Fonctionnalités de performances HTML](/fr/docs/Learn/Performance/HTML) + - : Certains attributs et l'ordre source de votre balisage peuvent avoir un impact sur les performances de votre site Web. En minimisant le nombre de nœuds DOM, en vous assurant que le meilleur ordre et les meilleurs attributs sont utilisés pour inclure du contenu tel que des styles, des scripts, des médias et des scripts tiers, vous pouvez considérablement améliorer l'expérience utilisateur. Cet article examine en détail comment le HTML peut être utilisé pour garantir des performances optimales. +- [Optimisation des performances en CSS](/fr/docs/Learn/Performance/CSS) + - : Le CSS peut être un objectif d'optimisation moins important pour améliorer les performances, mais certaines fonctionnalités CSS ont un impact plus important sur les performances que d'autres. Dans cet article, nous examinons certaines propriétés CSS qui ont un impact sur les performances et suggérons des méthodes de gestion des styles pour garantir que les performances ne sont pas affectées négativement. +- [Polices et performances](/fr/docs/Learn/Performance/Fonts) + - : Examinez si vous devez inclure des polices externes et, le cas échéant, comment inclure les polices dont votre conception a besoin avec le moins d'impact sur les performances de vos sites. + +<!----> + +- [Performances mobiles](/fr/docs/Learn/Performance/Mobile) + - : L'accès Web sur les appareils mobiles étant si populaire et toutes les plates-formes mobiles ayant des navigateurs Web à part entière, mais éventuellement une bande passante, un processeur et une autonomie de batterie limités, il est important de prendre en compte les performances de votre contenu Web sur ces plates-formes. Cet article examine les considérations de performances spécifiques aux mobiles. +- [Mettre l'accent sur la performance](/fr/docs/Learn/Performance/business_case_for_performance) + - : Un développeur peut faire de nombreuses choses différentes pour améliorer les performances, mais à quelle vitesse est-il assez rapide? Comment pouvez-vous convaincre les pouvoirs de l'importance de ces efforts? Une fois optimisé, comment pouvez-vous vous assurer que le ballonnement ne revient pas? Dans cet article, nous examinons des directions convaincantes, développons une culture de performance et un budget de performance, et introduisons des moyens de garantir que les régressions ne se faufilent pas dans votre base de code. + +## Voir aussi + +- [Ressources de performance Web](/fr/docs/Learn/Performance/Web_Performance_Basics) + - : Outre les composants frontaux des fichiers HTML, CSS, JavaScript et multimédia, il existe des fonctionnalités qui peuvent ralentir les applications et des fonctionnalités qui peuvent rendre les applications subjectivement et objectivement plus rapides. Il existe de nombreuses API, outils de développement, bonnes pratiques et mauvaises pratiques relatives aux performances Web. Ici, nous présenterons bon nombre de ces fonctionnalités au niveau de base et fournirons des liens vers des plongées plus approfondies pour améliorer les performances de chaque sujet. +- [Images responsives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) + - : Dans cet article, nous découvrirons le concept d'images responsives - des images qui fonctionnent bien sur des appareils avec des tailles d'écran, des résolutions et d'autres fonctionnalités très différentes - et nous examinerons les outils fournis par HTML pour les implémenter. Cela permet d'améliorer les performances sur différents appareils. Les images responsives ne sont qu'une partie du [responsive design](/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design), un futur sujet CSS à apprendre. +- [Section principale des performances Web sur MDN](/fr/docs/Web/Performance) + - : Notre section principale sur les performances Web - vous trouverez ici beaucoup plus de détails sur les performances Web, y compris des aperçus des API de performance, des outils de test et d'analyse et des problèmes de goulots d'étranglement des performances. diff --git a/files/fr/learn/performance/measuring_performance/index.md b/files/fr/learn/performance/measuring_performance/index.md index 402e218d4c..e17b0761ce 100644 --- a/files/fr/learn/performance/measuring_performance/index.md +++ b/files/fr/learn/performance/measuring_performance/index.md @@ -1,101 +1,111 @@ --- title: Mesure des performances slug: Learn/Performance/Measuring_performance -translation_of: 'Learn/Performance/Measuring_performance' +translation_of: Learn/Performance/Measuring_performance --- -<div>{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}}</div> +{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}} -<p>La mesure des performance fournit un indicateur important pour vous aider à assurer le succès de votre application, site ou service web.</p> +La mesure des performance fournit un indicateur important pour vous aider à assurer le succès de votre application, site ou service web. -<p>Par exemple, vous pouvez utiliser les indicateurs de performances pour déterminer la manière dont votre application se charge par rapport à vos concurrents, ou par rapport à vos versions précédentes. Il est recommandé de choisir des indicateurs pertinents en fonction de vos utilisatrices et utilisateurs, du contexte de votre site et de vos objectifs commerciaux. Ces indicateurs doivent être collectés et mesurés de façon cohérente et analysés à partir d'un format qui peut être lu et compris par des parties prenantes non techniques.</p> +Par exemple, vous pouvez utiliser les indicateurs de performances pour déterminer la manière dont votre application se charge par rapport à vos concurrents, ou par rapport à vos versions précédentes. Il est recommandé de choisir des indicateurs pertinents en fonction de vos utilisatrices et utilisateurs, du contexte de votre site et de vos objectifs commerciaux. Ces indicateurs doivent être collectés et mesurés de façon cohérente et analysés à partir d'un format qui peut être lu et compris par des parties prenantes non techniques. -<p>Cet article présente les indicateurs de performances web que vous pouvez utiliser afin de mesurer et optimiser les performances de votre site.</p> +Cet article présente les indicateurs de performances web que vous pouvez utiliser afin de mesurer et optimiser les performances de votre site. <table class="standard-table"> <tbody> <tr> - <th scope="row">Pré-requis :</th> - <td>Bases de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base</a> installés et connaissances de base <a href="/fr/docs/Learn/Getting_started_with_the_web">des technologies web opérant côté client</a>.</td> + <th scope="row">Pré-requis :</th> + <td> + Bases de l'informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >logiciels de base</a + > + installés et connaissances de base + <a href="/fr/docs/Learn/Getting_started_with_the_web" + >des technologies web opérant côté client</a + >. + </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> - <p>Proposer des informations sur les indicateurs de performance web que vous pouvez collecter avec les différentes API de performances web et présenter des outils qui permettent de visualiser ces données.</p> + <p> + Proposer des informations sur les indicateurs de performance web que + vous pouvez collecter avec les différentes API de performances web et + présenter des outils qui permettent de visualiser ces données. + </p> </td> </tr> </tbody> </table> -<h2 id="performance_APIs">Les API de mesure des performances</h2> +## Les API de mesure des performances -<p>Si vous êtes en capacité d'écrire du code pour le web, sachez qu'il existe un grand nombre <a href="/fr/docs/Web/API">d'API Web</a> destinées à créer vos propres outils de mesure de performances.</p> +Si vous êtes en capacité d'écrire du code pour le web, sachez qu'il existe un grand nombre [d'API Web](/fr/docs/Web/API) destinées à créer vos propres outils de mesure de performances. -<p>Vous pouvez utiliser <a href="/fr/docs/Web/API/Navigation_timing_API">l'API d'horodatage de navigation</a> pour mesurer les performances web côté client. Cela comprend le volume de temps nécessaire pour décharger la page précédente, le temps que prendra la résolution du nom de domaine, le total du temps passé à exécuter le chargement de la page, et bien plus encore. Vous pouvez utiliser les API pour créer des indicateurs de mesure de tous les évènements liés à la navigation affichés dans le diagramme présenté ci-dessous.</p> +Vous pouvez utiliser [l'API d'horodatage de navigation](/fr/docs/Web/API/Navigation_timing_API) pour mesurer les performances web côté client. Cela comprend le volume de temps nécessaire pour décharger la page précédente, le temps que prendra la résolution du nom de domaine, le total du temps passé à exécuter le chargement de la page, et bien plus encore. Vous pouvez utiliser les API pour créer des indicateurs de mesure de tous les évènements liés à la navigation affichés dans le diagramme présenté ci-dessous. -<p><img alt="Voici les différents gestionnaires que l'API d'horodatage de la navigation peut prendre en charge, incluant les gestionnaires suivants (en anglais) : Prompt for unload ; redirect ; unload ; App cache ; DNS ; TCP ; Request ; Response ; Processing ; onLoad ; navigationStart ; redirectStart ; redirectEnd ; fetchStart ; domainLookupEnd ; domainLookupStart ; connectStart (secureConnectionStart) ; connectEnd ; requestStart ; responseStart ; responseEnd ; unloadStart ; unloadEnd ; domLoading ; domInteractive ; domContentLoaded ; domComplete ; loadEventStart ; loadEventEnd." src="navigationtimingapi.jpg"></p> + -<p><a href="/fr/docs/Web/API/Performance_API/Using_the_Performance_API">L'API de performances</a> propose un accès aux informations liées aux performances, ce qui comprend <a href="/fr/docs/Web/API/Performance_Timeline">l'API de chronologie des performances</a>, <a href="/fr/docs/Web/API/Navigation_timing_API">l'API d'horodatage de la navigation</a>, <a href="/fr/docs/Web/API/User_Timing_API">l'API d'horodatage du visiteur</a> ainsi que <a href="/fr/docs/Web/API/Resource_Timing_API">l'API d'horodatage des ressources</a>. Ces interfaces permettent de mesurer précisément le temps que prennent les tâches JavaScript pour se dérouler.</p> +[L'API de performances](/fr/docs/Web/API/Performance_API/Using_the_Performance_API) propose un accès aux informations liées aux performances, ce qui comprend [l'API de chronologie des performances](/fr/docs/Web/API/Performance_Timeline), [l'API d'horodatage de la navigation](/fr/docs/Web/API/Navigation_timing_API), [l'API d'horodatage du visiteur](/fr/docs/Web/API/User_Timing_API) ainsi que [l'API d'horodatage des ressources](/fr/docs/Web/API/Resource_Timing_API). Ces interfaces permettent de mesurer précisément le temps que prennent les tâches JavaScript pour se dérouler. -<p>L'objet <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> fait partie de la <em>chronologie des performances</em>. Une entrée <em>performance</em> peut directement être créée en utilisant <em>{{domxref("PerformanceMark","PerformanceMark")}}</em> ou une <em>{{domxref("PerformanceMeasure","PerformanceMeasure")}}</em> (par exemple en appelant la méthode {{domxref("Performance.mark","mark()")}}) sur un point explicite de l'application. Les entrées de performances peuvent aussi être créées de façon indirecte, par exemple lors du chargement d'une ressource graphique.</p> +L'objet [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) fait partie de la _chronologie des performances_. Une entrée _performance_ peut directement être créée en utilisant _{{domxref("PerformanceMark","PerformanceMark")}}_ ou une _{{domxref("PerformanceMeasure","PerformanceMeasure")}}_ (par exemple en appelant la méthode {{domxref("Performance.mark","mark()")}}) sur un point explicite de l'application. Les entrées de performances peuvent aussi être créées de façon indirecte, par exemple lors du chargement d'une ressource graphique. -<p><a href="/fr/docs/Web/API/PerformanceObserver">L'API PerformanceObserver</a> peut être utilisée pour observer le déroulement d'évènements de mesure des performances et permet de vous notifier de nouvelles <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performances</a> lorsqu'elles enregistrent la chronologie des performances dans le navigateur.</p> +[L'API PerformanceObserver](/fr/docs/Web/API/PerformanceObserver) peut être utilisée pour observer le déroulement d'évènements de mesure des performances et permet de vous notifier de nouvelles [entrées de performances](/fr/docs/Web/API/PerformanceEntry) lorsqu'elles enregistrent la chronologie des performances dans le navigateur. -<p>Si cet article n'a pas pour but de proposer une documentation complète de ces API, il est bon de savoir qu'elles existent. Vous pouvez vous référer à l'article concernant <a href="/fr/docs/Web/Performance/Navigation_and_resource_timings">l'horodatage de navigation</a> pour aller plus loin et découvrir plus d'exemples concernant les API liées à la mesure des performances.</p> +Si cet article n'a pas pour but de proposer une documentation complète de ces API, il est bon de savoir qu'elles existent. Vous pouvez vous référer à l'article concernant [l'horodatage de navigation](/fr/docs/Web/Performance/Navigation_and_resource_timings) pour aller plus loin et découvrir plus d'exemples concernant les API liées à la mesure des performances. -<h2 id="tools_and_metrics">Outils de mesure</h2> +## Outils de mesure -<p>Il y a beaucoup d'outils disponibles pour vous aider à améliorer les performances de vos sites. Ils sont généralement classés dans deux catégories :</p> +Il y a beaucoup d'outils disponibles pour vous aider à améliorer les performances de vos sites. Ils sont généralement classés dans deux catégories : -<ul> - <li>Les outils qui indiquent ou mesurent les performances, tels que <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a> ou le <a href="/fr/docs/Tools/Network_Monitor">moniteur réseau</a> et le <a href="/fr/docs/Tools/Performance">moniteur de performances</a> de Firefox. Ces outils vous montrent la vitesse de chargement de votre site ou de votre application. Ils vous indiquent également les points sur lesquels votre application web peut être améliorée.</li> - <li>Les outils qui corrigent le code de votre application web ou de votre site afin d'améliorer ses performances. Par exemple, certains outils de construction empaquettent le code réparti sur plusieurs fichiers en un seul fichier unique afin de réduire le nombre de requêtes HTTP. Il existe aussi des minificateurs qui suppriment tous les espaces de votre code pour réduire la taille des fichiers.</li> -</ul> +- Les outils qui indiquent ou mesurent les performances, tels que [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) ou le [moniteur réseau](/fr/docs/Tools/Network_Monitor) et le [moniteur de performances](/fr/docs/Tools/Performance) de Firefox. Ces outils vous montrent la vitesse de chargement de votre site ou de votre application. Ils vous indiquent également les points sur lesquels votre application web peut être améliorée. +- Les outils qui corrigent le code de votre application web ou de votre site afin d'améliorer ses performances. Par exemple, certains outils de construction empaquettent le code réparti sur plusieurs fichiers en un seul fichier unique afin de réduire le nombre de requêtes HTTP. Il existe aussi des minificateurs qui suppriment tous les espaces de votre code pour réduire la taille des fichiers. -<p>Sur cette page, ces deux catégories d'outils seront abordées. Par ailleurs, en parlant des mesures de performances, nous aborderons bien entendu les indicateurs que vous allez utiliser pour déterminer si les performances de votre site s'améliorent ou non.</p> +Sur cette page, ces deux catégories d'outils seront abordées. Par ailleurs, en parlant des mesures de performances, nous aborderons bien entendu les indicateurs que vous allez utiliser pour déterminer si les performances de votre site s'améliorent ou non. -<h3 id="general_performance_reporting_tools">Outils de rapport de performances génériques</h3> +### Outils de rapport de performances génériques -<p>Les outils tels que <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a> sont faits pour mesurer les performances des sites. Vous saisissez une URL, puis vous obtenez un rapport de performances en quelques secondes. Le rapport contient les scores obtenus par votre site, que ce soit sur mobile ou sur ordinateur de bureau. C'est un bon point de départ pour savoir d'où vous partez et pour connaître les points d'amélioration.</p> +Les outils tels que [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) sont faits pour mesurer les performances des sites. Vous saisissez une URL, puis vous obtenez un rapport de performances en quelques secondes. Le rapport contient les scores obtenus par votre site, que ce soit sur mobile ou sur ordinateur de bureau. C'est un bon point de départ pour savoir d'où vous partez et pour connaître les points d'amélioration. -<p>Au moment de l'écriture de cette page, voici à quoi ressemblait le rapport de performances du site MDN :</p> +Au moment de l'écriture de cette page, voici à quoi ressemblait le rapport de performances du site MDN : -<p><img alt="Une capture d'écran montrant le rapport PageSpeed Insights de la page d'accueil de Mozilla." src="pagespeed-insight-mozilla-homepage.png"></p> + -<p>Un rapport de performances contient des informations concernant le temps d'attente des visiteurs avant que quelque chose ne s'affiche, le nombre d'octets à télécharger pour afficher la page, et bien plus encore. Cela vous permet également de savoir si les mesures réalisées sont positives ou négatives.</p> +Un rapport de performances contient des informations concernant le temps d'attente des visiteurs avant que quelque chose ne s'affiche, le nombre d'octets à télécharger pour afficher la page, et bien plus encore. Cela vous permet également de savoir si les mesures réalisées sont positives ou négatives. -<p><a href="https://webpagetest.org">webpagetest.org</a> est un autre exemple d'outil capable de tester automatiquement votre site et d'afficher des indicateurs utiles.</p> +[webpagetest.org](https://webpagetest.org) est un autre exemple d'outil capable de tester automatiquement votre site et d'afficher des indicateurs utiles. -<p>Essayez vos sites favoris sur webpagetest.org et PageSpeed Insights, vous connaîtrez leurs scores de performances.</p> +Essayez vos sites favoris sur webpagetest.org et PageSpeed Insights, vous connaîtrez leurs scores de performances. -<h3 id="network_tools">Outils réseau</h3> +### Outils réseau -<p>La plupart des navigateurs ont des outils avec lesquels vous pouvez tester les pages web en cours de chargement pour déterminer leurs performances. Par exemple, le <a href="/fr/docs/Tools/Network_Monitor">moniteur réseau</a> de Firefox retourne des informations détaillées sur toutes les ressources téléchargées sur le réseau ainsi qu'un graphique montrant la durée de téléchargement de chaque ressource.</p> +La plupart des navigateurs ont des outils avec lesquels vous pouvez tester les pages web en cours de chargement pour déterminer leurs performances. Par exemple, le [moniteur réseau](/fr/docs/Tools/Network_Monitor) de Firefox retourne des informations détaillées sur toutes les ressources téléchargées sur le réseau ainsi qu'un graphique montrant la durée de téléchargement de chaque ressource. -<p><img alt="" src="network-monitor.png"></p> + -<p>Vous pouvez aussi utiliser le <a href="/fr/docs/Tools/Performance">moniteur de performances</a> pour mesurer les performances de l'interface de votre application ou de votre site pendant que vous réalisez différentes actions. Cela permet d'identifier les fonctionnalités qui ralentissent le plus votre interface.</p> +Vous pouvez aussi utiliser le [moniteur de performances](/fr/docs/Tools/Performance) pour mesurer les performances de l'interface de votre application ou de votre site pendant que vous réalisez différentes actions. Cela permet d'identifier les fonctionnalités qui ralentissent le plus votre interface. -<p><img alt="" src="perf-monitor.png"></p> + -<h2 id="conclusion">Conclusion</h2> +## Conclusion -<p>Cet article était destiné à proposer une vue d'ensemble rapide des indicateurs de performance web que vous pouvez mesurer sur un site ou une application web. Dans le prochain article, nous verrons comment travailler sur la performance perçue et nous découvrirons des techniques permettant de rendre les éléments les plus longs à charger un peu moins lents pour le visiteur, voire pour les masquer complètement.</p> +Cet article était destiné à proposer une vue d'ensemble rapide des indicateurs de performance web que vous pouvez mesurer sur un site ou une application web. Dans le prochain article, nous verrons comment travailler sur la performance perçue et nous découvrirons des techniques permettant de rendre les éléments les plus longs à charger un peu moins lents pour le visiteur, voire pour les masquer complètement. -<p>{{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}}</p> +{{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}} -<h2 id="in_this_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/Performance/why_web_performance">Le « pourquoi » des performances web</a></li> - <li><a href="/fr/docs/Learn/Performance/What_is_web_performance">Qu'est-ce que sont les performances web ?</a></li> - <li><a href="/fr/docs/Learn/Performance/Perceived_performance">Comment les visiteurs perçoivent-ils les performances ?</a></li> - <li><a href="/fr/docs/Learn/Performance/Measuring_performance">Mesurer les performances</a></li> - <li><a href="/fr/docs/Learn/Performance/Multimedia">Multimédia : images</a></li> - <li><a href="/fr/docs/Learn/Performance/video">Multimédia : vidéos</a></li> - <li><a href="/fr/docs/Learn/Performance/JavaScript">Bonnes pratiques de performances pour JavaScript</a></li> - <li><a href="/fr/docs/Learn/Performance/HTML">Fonctionnalités de HTML liées aux performances</a></li> - <li><a href="/fr/docs/Learn/Performance/CSS">Fonctionnalités de CSS liées aux performances</a></li> - <li><a href="/fr/docs/Learn/Performance/Fonts">Performances et polices d'écriture</a></li> - <li><a href="/fr/docs/Learn/Performance/Mobile">Performances sur mobile</a></li> - <li><a href="/fr/docs/Learn/Performance/business_case_for_performance">Placer le focus sur les performances</a></li> -</ul> +- [Le « pourquoi » des performances web](/fr/docs/Learn/Performance/why_web_performance) +- [Qu'est-ce que sont les performances web ?](/fr/docs/Learn/Performance/What_is_web_performance) +- [Comment les visiteurs perçoivent-ils les performances ?](/fr/docs/Learn/Performance/Perceived_performance) +- [Mesurer les performances](/fr/docs/Learn/Performance/Measuring_performance) +- [Multimédia : images](/fr/docs/Learn/Performance/Multimedia) +- [Multimédia : vidéos](/fr/docs/Learn/Performance/video) +- [Bonnes pratiques de performances pour JavaScript](/fr/docs/Learn/Performance/JavaScript) +- [Fonctionnalités de HTML liées aux performances](/fr/docs/Learn/Performance/HTML) +- [Fonctionnalités de CSS liées aux performances](/fr/docs/Learn/Performance/CSS) +- [Performances et polices d'écriture](/fr/docs/Learn/Performance/Fonts) +- [Performances sur mobile](/fr/docs/Learn/Performance/Mobile) +- [Placer le focus sur les performances](/fr/docs/Learn/Performance/business_case_for_performance) diff --git a/files/fr/learn/performance/multimedia/index.md b/files/fr/learn/performance/multimedia/index.md index 56b98c3888..e35a3c9543 100644 --- a/files/fr/learn/performance/multimedia/index.md +++ b/files/fr/learn/performance/multimedia/index.md @@ -3,142 +3,144 @@ title: 'Multimédia : Images' slug: Learn/Performance/Multimedia translation_of: Learn/Performance/Multimedia --- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}} -<p>Les fichiers média, et plus précisément les images et les vidéos, représentent plus de 70 % des octets téléchargés sur un site web classique. En termes de performance lors du téléchargement des ressources d'une page, la suppression des fichiers média et la réduction de la taille des fichiers est la solution de facilité pour produire des sites performants. Cet article s'intéresse à l'optimisation des images et des vidéos dans le but d'améliorer les performances.</p> +Les fichiers média, et plus précisément les images et les vidéos, représentent plus de 70 % des octets téléchargés sur un site web classique. En termes de performance lors du téléchargement des ressources d'une page, la suppression des fichiers média et la réduction de la taille des fichiers est la solution de facilité pour produire des sites performants. Cet article s'intéresse à l'optimisation des images et des vidéos dans le but d'améliorer les performances. <table class="standard-table"> <tbody> <tr> <th scope="row">Pré-requis :</th> - <td>Bases de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base</a> installés et connaissances de base <a href="/fr/docs/Learn/Getting_started_with_the_web">des technologies web opérant côté client</a>.</td> + <td> + Bases de l'informatique, + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >logiciels de base</a + > + installés et connaissances de base + <a href="/fr/docs/Learn/Getting_started_with_the_web" + >des technologies web opérant côté client</a + >. + </td> </tr> <tr> <th scope="row">Objectifs :</th> - <td>Connaître les différents formats d'images, apprendre leur impact sur les performances et savoir comment réduire l'impact des images sur le temps de chargement général d'une page web.</td> + <td> + Connaître les différents formats d'images, apprendre leur impact sur les + performances et savoir comment réduire l'impact des images sur le temps + de chargement général d'une page web. + </td> </tr> </tbody> </table> -<div class="note"> - <p><strong>Note :</strong> Cet article est une introduction à l'optimisation des éléments multimédia sur le web, couvrant les principes généraux et les techniques de base. Pour aller plus loin, consultez des ressources plus spécialisées, telles que <a href="https://images.guide">https://images.guide (en anglais)</a>.</p> -</div> +> **Note :** Cet article est une introduction à l'optimisation des éléments multimédia sur le web, couvrant les principes généraux et les techniques de base. Pour aller plus loin, consultez des ressources plus spécialisées, telles que [https://images.guide (en anglais)](https://images.guide). -<h2 id="why_optimize_your_multimedia">Pourquoi optimiser vos éléments multimédia ?</h2> +## Pourquoi optimiser vos éléments multimédia ? -<p>On considère que pour un site classique, en moyenne 51 % de la bande passante utilisée provient des images, et 25 % provient des vidéos (<a href="https://discuss.httparchive.org/t/state-of-the-web-top-image-optimization-strategies/1367">source</a>, en anglais). Il est donc raisonnable de dire qu'il est important de porter une attention particulière à l'optimisation du contenu multimédia.</p> +On considère que pour un site classique, en moyenne 51 % de la bande passante utilisée provient des images, et 25 % provient des vidéos ([source](https://discuss.httparchive.org/t/state-of-the-web-top-image-optimization-strategies/1367), en anglais). Il est donc raisonnable de dire qu'il est important de porter une attention particulière à l'optimisation du contenu multimédia. -<p>Il est aussi important de prendre en considération la consommation de données. De nombreuses personnes utilisent des forfaits de connexion internet limités voir même des connexions facturées à la donnée téléchargée, où chaque octet de données consommé est facturé. Et cela ne concerne pas que les pays émergents. En 2018, 24 % des habitants du Royaume-Uni utilisaient ce type de connexion internet (<a href="https://www.ofcom.org.uk/__data/assets/pdf_file/0021/113169/Technology-Tracker-H1-2018-data-tables.pdf">source</a>, en anglais).</p> +Il est aussi important de prendre en considération la consommation de données. De nombreuses personnes utilisent des forfaits de connexion internet limités voir même des connexions facturées à la donnée téléchargée, où chaque octet de données consommé est facturé. Et cela ne concerne pas que les pays émergents. En 2018, 24 % des habitants du Royaume-Uni utilisaient ce type de connexion internet ([source](https://www.ofcom.org.uk/__data/assets/pdf_file/0021/113169/Technology-Tracker-H1-2018-data-tables.pdf), en anglais). -<p>En outre, il est important de prendre en compte la mémoire utilisée, car de nombreux appareils mobiles ont une RAM limitée. N'oubliez pas que quand les images sont téléchargées, elles sont stockées dans la mémoire vive de l'appareil.</p> +En outre, il est important de prendre en compte la mémoire utilisée, car de nombreux appareils mobiles ont une RAM limitée. N'oubliez pas que quand les images sont téléchargées, elles sont stockées dans la mémoire vive de l'appareil. -<h2 id="optimizing_image_delivery">L'optimisation de la distribution des images</h2> +## L'optimisation de la distribution des images -<p>Bien qu'il s'agisse de l'élément consommant le plus de bande passante, l'impact du téléchargement des images sur la <a href="/fr/docs/Learn/Performance/Perceived_performance">performance perçue</a> et largement moins important que ce à quoi l'on pourrait s'attendre, principalement du fait que le contenu de la page est téléchargé immédiatement et que les personnes qui visitent le site voient les images s'afficher au fur et à mesure du chargement. Mais si l'on veut proposer la meilleure expérience possible, il reste important d'afficher le plus tôt possible des images complètement chargées.</p> +Bien qu'il s'agisse de l'élément consommant le plus de bande passante, l'impact du téléchargement des images sur la [performance perçue](/fr/docs/Learn/Performance/Perceived_performance) et largement moins important que ce à quoi l'on pourrait s'attendre, principalement du fait que le contenu de la page est téléchargé immédiatement et que les personnes qui visitent le site voient les images s'afficher au fur et à mesure du chargement. Mais si l'on veut proposer la meilleure expérience possible, il reste important d'afficher le plus tôt possible des images complètement chargées. -<h3 id="loading_strategy">Stratégie de chargement</h3> +### Stratégie de chargement -<p>Une des plus grandes améliorations utilisable sur la plupart des sites web est le <a href="/fr/docs/Web/Performance/Lazy_loading">chargement différé</a> des images se situant en dessous de la ligne de flottaison, plutôt que de toutes les téléchargées directement sans se soucier de l'emplacement où elles se trouvent par rapport à l'écran de la personne qui visite le site (elle pourrait même ne jamais faire défiler son écran jusqu'à certaines images situées plus bas dans la page !). Plusieurs bibliothèques JavaScript peuvent implémenter cela pour vous, par exemple <a href="https://github.com/aFarkas/lazysizes">lazysizes (en anglais)</a>, mais sachez que les navigateurs travaillent sur l'attribut <code>lazyload</code>, qui est actuellement en phase d'expérimentation.</p> +Une des plus grandes améliorations utilisable sur la plupart des sites web est le [chargement différé](/fr/docs/Web/Performance/Lazy_loading) des images se situant en dessous de la ligne de flottaison, plutôt que de toutes les téléchargées directement sans se soucier de l'emplacement où elles se trouvent par rapport à l'écran de la personne qui visite le site (elle pourrait même ne jamais faire défiler son écran jusqu'à certaines images situées plus bas dans la page !). Plusieurs bibliothèques JavaScript peuvent implémenter cela pour vous, par exemple [lazysizes (en anglais)](https://github.com/aFarkas/lazysizes), mais sachez que les navigateurs travaillent sur l'attribut `lazyload`, qui est actuellement en phase d'expérimentation. -<p>En plus de charger un sous-ensemble d'images, vous devriez ensuite vous attarder sur les formats d'images que vous utilisez :</p> +En plus de charger un sous-ensemble d'images, vous devriez ensuite vous attarder sur les formats d'images que vous utilisez : -<ul> - <li>Chargez-vous le format de fichier le plus optimal ?</li> - <li>Avez-vous bien compressé vos images ?</li> - <li>Chargez-vous des tailles d'images adaptées ?</li> -</ul> +- Chargez-vous le format de fichier le plus optimal ? +- Avez-vous bien compressé vos images ? +- Chargez-vous des tailles d'images adaptées ? -<h4 id="the_most_optimal_format">Le format le plus optimisé</h4> +#### Le format le plus optimisé -<p>Le format de fichier le plus optimisé dépend directement du type d'image à charger.</p> +Le format de fichier le plus optimisé dépend directement du type d'image à charger. -<div class="note"> - <p><strong>Note :</strong> Pour obtenir des informations plus générales sur les types d'images, consultez le <a href="/fr/docs/Web/Media/Formats/Image_types">guide des types d'images et de formats d'images</a>.</p> -</div> +> **Note :** Pour obtenir des informations plus générales sur les types d'images, consultez le [guide des types d'images et de formats d'images](/fr/docs/Web/Media/Formats/Image_types). -<p>Le format <a href="/fr/docs/Web/Media/Formats/Image_types#svg">SVG</a> est le plus approprié pour les images qui ne comprennent que quelques couleurs et qui n'ont pas la complexité d'une photographie. Cela nécessite la mise à disposition d'une source dans un format vectoriel. Si cette image n'est disponible qu'en format bitmap, alors le format <a href="/fr/docs/Web/Media/Formats/Image_types#png">PNG</a> sera la solution de repli idéale. De bons exemples d'images idéalement fournies en SVG sont les logos, les illustrations, les graphiques ou les icônes (veuillez noter qu'il vaut mieux utiliser des images au format SVG que des polices d'icônes !). Qu'il s'agisse de SVG ou de PNG, les deux formats prennent en charge la transparence.</p> +Le format [SVG](/fr/docs/Web/Media/Formats/Image_types#svg) est le plus approprié pour les images qui ne comprennent que quelques couleurs et qui n'ont pas la complexité d'une photographie. Cela nécessite la mise à disposition d'une source dans un format vectoriel. Si cette image n'est disponible qu'en format bitmap, alors le format [PNG](/fr/docs/Web/Media/Formats/Image_types#png) sera la solution de repli idéale. De bons exemples d'images idéalement fournies en SVG sont les logos, les illustrations, les graphiques ou les icônes (veuillez noter qu'il vaut mieux utiliser des images au format SVG que des polices d'icônes !). Qu'il s'agisse de SVG ou de PNG, les deux formats prennent en charge la transparence. -<p>Les images peuvent être enregistrées au format PNG à l'aide de trois différentes combinaison de traitements :</p> +Les images peuvent être enregistrées au format PNG à l'aide de trois différentes combinaison de traitements : -<ul> - <li>Couleurs 24 bits + 8 bits de transparence — propose une précision complète des couleurs et des niveaux de transparence progressifs, mais au détriment de la taille du fichier. WebP est probablement une meilleure solution (voir ci-après) ;</li> - <li>Couleurs 8 bits color + 8 bits de transparence — ne propose que 255 couleurs mais maintient des niveaux de transparence progressifs. La taille des fichiers n'est pas trop importante. Il s'agit du meilleur cas d'usage du format PNG ;</li> - <li>Couleurs 8 bits + 1 bit de transparence — ne propose que 255 couleurs et ne propose pas ou peu de transparence par pixels, ce qui rend les limites des zones transparentes visibles et peu esthétiques. La taille de fichier est réduite mais au prix d'importantes dégradations visuelles.</li> -</ul> +- Couleurs 24 bits + 8 bits de transparence — propose une précision complète des couleurs et des niveaux de transparence progressifs, mais au détriment de la taille du fichier. WebP est probablement une meilleure solution (voir ci-après) ; +- Couleurs 8 bits color + 8 bits de transparence — ne propose que 255 couleurs mais maintient des niveaux de transparence progressifs. La taille des fichiers n'est pas trop importante. Il s'agit du meilleur cas d'usage du format PNG ; +- Couleurs 8 bits + 1 bit de transparence — ne propose que 255 couleurs et ne propose pas ou peu de transparence par pixels, ce qui rend les limites des zones transparentes visibles et peu esthétiques. La taille de fichier est réduite mais au prix d'importantes dégradations visuelles. -<p><a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a> est un bon outil pour optimiser les SVG en ligne. Pour les PNG il existe <a href="https://imageoptim.com/online">ImageOptim online</a> ou <a href="https://squoosh.app/">Squoosh</a>.</p> +[SVGOMG](https://jakearchibald.github.io/svgomg/) est un bon outil pour optimiser les SVG en ligne. Pour les PNG il existe [ImageOptim online](https://imageoptim.com/online) ou [Squoosh](https://squoosh.app/). -<p>Pour les motifs photographiques qui ne contiennent pas de transparence, il y a un grand nombre de formats disponibles. Si vous voulez jouer la sécurité, alors optez pour le format compressé <strong>JPEG progressif</strong>. Par rapport aux JPEG normaux, les JPEG progressifs s'affichent progressivement (d'où le nom) ce qui veut dire que le visiteur verra d'abord une version basse résolution, puis l'image gagnera en clarté au fur et à mesure que l'image se charge, au lieu de devoir attendre que l'image soit complètement chargée de haut en bas avant qu'elle ne puisse s'afficher. <strong>MozJPEG</strong> est un bon outil de compression. Il est utilisé par l'outil d'optimisation d'images en ligne <a href="https://squoosh.app/">Squoosh</a>. Les meilleurs résultats sont obtenus avec une optimisation à 75 %.</p> +Pour les motifs photographiques qui ne contiennent pas de transparence, il y a un grand nombre de formats disponibles. Si vous voulez jouer la sécurité, alors optez pour le format compressé **JPEG progressif**. Par rapport aux JPEG normaux, les JPEG progressifs s'affichent progressivement (d'où le nom) ce qui veut dire que le visiteur verra d'abord une version basse résolution, puis l'image gagnera en clarté au fur et à mesure que l'image se charge, au lieu de devoir attendre que l'image soit complètement chargée de haut en bas avant qu'elle ne puisse s'afficher. **MozJPEG** est un bon outil de compression. Il est utilisé par l'outil d'optimisation d'images en ligne [Squoosh](https://squoosh.app/). Les meilleurs résultats sont obtenus avec une optimisation à 75 %. -<p>D'autres formats proposent des compressions encore plus efficaces que le format JPEG, mais ils ne sont pas toujours compatibles avec tous les navigateurs.</p> +D'autres formats proposent des compressions encore plus efficaces que le format JPEG, mais ils ne sont pas toujours compatibles avec tous les navigateurs. -<ul> - <li><a href="/fr/docs/Web/Media/Formats/Image_types#webp">WebP</a> : un choix excellent pour les images, qu'elles soient fixes ou animées. WebP offre une meilleure compression que PNG ou JPEG et prend en charge les grandes profondeurs de couleurs, les animations, la transparence et de nombreuses autres fonctionnalités, à l'exception de l'affichage progressif. WebP est pris en charge par tous les navigateurs les plus utilisés à l'exception de Safari 14 sur macOS 14 sur ordinateur. - <div class="note"> - <p><strong>Note :</strong> en dépit de <a href="https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174">la prise en charge annoncée de WebP sur Safari 14</a>, les images <code>.webp</code> ne s'affiche pas bien sur macOS sur ordinateur, alors qu'elles s'affichent bien sur iOS 14 sur mobile.</p> - </div> - </li> - <li><a href="/fr/docs/Web/Media/Formats/Image_types#avif">AVIF</a> : un bon choix pour les images fixes ou animées, du fait du haut niveau de performances et du fait qu'il est libre de droits. AVIF est encore plus efficient que WebP, mais il n'est pas aussi bien pris en charge : il est actuellement pris en charge sur Chrome, Opera et Firefox (à l'aide des <a href="/fr/docs/Mozilla/Firefox/Experimental_features#avif_av1_image_file_format_support">réglages de préférences</a>). <br />Vous pouvez utiliser cet <a href="https://avif-converter.online">outil en ligne pour convertir différents formats d'images en AVIF</a>.</li> - <li><strong>JPEG-XR</strong> : un format créé par Microsoft et disponible uniquement sur Internet Explorer en les versions de Edge basées sur EdgeHTML. Ce format ne prend pas en charge l'affichage progressif et le décodage de l'image n'est pas accélérée par matérielle du système et donc consommateur de ressources pour le <a href="/fr/docs/Glossary/Main_thread">fil d'exécution principal</a> du navigateur. Les JPEG progressifs situés au-dessus de la ligne de flottaison s'affichent progressivement (d'où leur nom), ce qui signifie que l'internaute voit d'abord une version en basse résolution, qui gagne progressivement en netteté au fur et à mesure que l'image se télécharge, au lieu d'avoir une image qui se charge en pleine résolution du haut vers le bas (ou directement en une seule fois).</li> - <li><strong>JPEG2000</strong> il était prévu qu'il succède au format JPEG mais n'est pris en charge que par Safari. Ce format ne prend pas non plus en charge l'affichage progressif.</li> -</ul> +- [WebP](/fr/docs/Web/Media/Formats/Image_types#webp) : un choix excellent pour les images, qu'elles soient fixes ou animées. WebP offre une meilleure compression que PNG ou JPEG et prend en charge les grandes profondeurs de couleurs, les animations, la transparence et de nombreuses autres fonctionnalités, à l'exception de l'affichage progressif. WebP est pris en charge par tous les navigateurs les plus utilisés à l'exception de Safari 14 sur macOS 14 sur ordinateur. -<p>Compte-tenu de la faible prise en charge de JPEG-XR et de JPEG2000 et en prenant en compte les coûts de décodage dans l'équation, le seul format pouvant concurrencer sérieusement JPEG est le format WebP. C'est la raison pour laquelle vous devriez envisager de l'utiliser, pour les navigateurs qui le supportent. Cela peut être fait en utilisant l'élément <code><picture></code> avec l'aide d'un élément <code><source></code> équipé d'un <a href="/fr/docs/Web/HTML/Element/picture#the_type_attribute">attribut <code>type</code></a>.</p> + > **Note :** en dépit de [la prise en charge annoncée de WebP sur Safari 14](https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174), les images `.webp` ne s'affiche pas bien sur macOS sur ordinateur, alors qu'elles s'affichent bien sur iOS 14 sur mobile. -<p>Si tout cela vous semble un peu trop compliqué ou si vous pensez que cela vous demandera trop de travail, sachez qu'il existe des services en ligne que vous pouvez utiliser en tant que CDN d'images et qui vont servir automatiquement et à la volée le bon format d'image, en fonction du type d'appareil ou de navigateur demandant l'affichage de l'image. Les CDN d'images les plus importants sur le marché sont <a href="https://cloudinary.com/features/responsive_images">Cloudinary</a> et <a href="https://imageengine.io/">Image Engine</a>.</p> +- [AVIF](/fr/docs/Web/Media/Formats/Image_types#avif) : un bon choix pour les images fixes ou animées, du fait du haut niveau de performances et du fait qu'il est libre de droits. AVIF est encore plus efficient que WebP, mais il n'est pas aussi bien pris en charge : il est actuellement pris en charge sur Chrome, Opera et Firefox (à l'aide des [réglages de préférences](/fr/docs/Mozilla/Firefox/Experimental_features#avif_av1_image_file_format_support)). + Vous pouvez utiliser cet [outil en ligne pour convertir différents formats d'images en AVIF](https://avif-converter.online). +- **JPEG-XR** : un format créé par Microsoft et disponible uniquement sur Internet Explorer en les versions de Edge basées sur EdgeHTML. Ce format ne prend pas en charge l'affichage progressif et le décodage de l'image n'est pas accélérée par matérielle du système et donc consommateur de ressources pour le [fil d'exécution principal](/fr/docs/Glossary/Main_thread) du navigateur. Les JPEG progressifs situés au-dessus de la ligne de flottaison s'affichent progressivement (d'où leur nom), ce qui signifie que l'internaute voit d'abord une version en basse résolution, qui gagne progressivement en netteté au fur et à mesure que l'image se télécharge, au lieu d'avoir une image qui se charge en pleine résolution du haut vers le bas (ou directement en une seule fois). +- **JPEG2000** il était prévu qu'il succède au format JPEG mais n'est pris en charge que par Safari. Ce format ne prend pas non plus en charge l'affichage progressif. -<p>Pour finir, si vous avez besoin d'afficher des images animées sur votre page, sachez que Safari permet l'utilisation de fichiers vidéo à l'intérieur des éléments <code><img></code> et <code><picture></code>. Ces éléments vous permettent aussi d'utiliser des <strong>WebP animés</strong> pour tous les autres navigateurs modernes.</p> +Compte-tenu de la faible prise en charge de JPEG-XR et de JPEG2000 et en prenant en compte les coûts de décodage dans l'équation, le seul format pouvant concurrencer sérieusement JPEG est le format WebP. C'est la raison pour laquelle vous devriez envisager de l'utiliser, pour les navigateurs qui le supportent. Cela peut être fait en utilisant l'élément `<picture>` avec l'aide d'un élément `<source>` équipé d'un [attribut `type`](/fr/docs/Web/HTML/Element/picture#the_type_attribute). -<pre class="html"><picture> - <source type="video/mp4" src="giphy.mp4"> - <source type="image/webp" src="giphy.webp"> - <img src="giphy.gif"> -</picture></pre> +Si tout cela vous semble un peu trop compliqué ou si vous pensez que cela vous demandera trop de travail, sachez qu'il existe des services en ligne que vous pouvez utiliser en tant que CDN d'images et qui vont servir automatiquement et à la volée le bon format d'image, en fonction du type d'appareil ou de navigateur demandant l'affichage de l'image. Les CDN d'images les plus importants sur le marché sont [Cloudinary](https://cloudinary.com/features/responsive_images) et [Image Engine](https://imageengine.io/). -<h4 id="serving_the_optimal_size">Servir la taille optimale</h4> +Pour finir, si vous avez besoin d'afficher des images animées sur votre page, sachez que Safari permet l'utilisation de fichiers vidéo à l'intérieur des éléments `<img>` et `<picture>`. Ces éléments vous permettent aussi d'utiliser des **WebP animés** pour tous les autres navigateurs modernes. -<p>Dans le monde de la livraison d'images, l'approche « universelle » n'est pas celle qui donne les meilleurs résultats. En effet, pour les plus petits écrans, vous pourriez vouloir servir des images avec une résolution plus petite, et inversement pour les écrans les plus larges. En plus de cela, vous pourriez avoir envie de servir des images de haute résolution aux appareils qui ont un écran le plus de DPI (comme les écrans <i>Retina</i>). Ainsi, sauf si vous créez de nombreuses variations intermédiaires de vos images, vous allez aussi avoir besoin d'un moyen de servir le bon fichier pour le bon navigateur. Vous pouvez pour cela agrémenter vos éléments <code><picture></code> et <code><source></code> avec les attributs <code><a href="/fr/docs/Web/HTML/Element/Source#attr-media">media</a></code> et/ou <code><a href="/fr/docs/Web/HTML/Element/Source#attr-sizes">sizes</a></code>. Un <a href="https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/">article détaillé sur la combinaison de ces attributs peut être trouvé ici (en anglais)</a>.</p> +```html +<picture> + <source type="video/mp4" src="giphy.mp4"> + <source type="image/webp" src="giphy.webp"> + <img src="giphy.gif"> +</picture> +``` -<p>Deux effets intéressants sont à garder en tête concernant les écrans à haut niveau de DPI :</p> +#### Servir la taille optimale -<ul> - <li>avec les écrans à haut niveau de DPI, <a href="https://www.netvlies.nl/tips-updates/algemeen/design-interactie/retina-revolution/">l'œil humain reconnaîtra les artefacts de compression bien plus tard</a>, ce qui signifie que pour les images destinées à ces écrans, vous pouvez aller plus loin que d'habitude en termes de compression.</li> - <li><a href="https://observablehq.com/@eeeps/visual-acuity-and-device-pixel-ratio">seulement une toute petite proportion des gens sont capables de détecter les améliorations supérieures à 2× DPI</a>, ce qui signifie que vous n'avez pas besoin de servir des images d'une résolution supérieure à 2×.</li> -</ul> +Dans le monde de la livraison d'images, l'approche « universelle » n'est pas celle qui donne les meilleurs résultats. En effet, pour les plus petits écrans, vous pourriez vouloir servir des images avec une résolution plus petite, et inversement pour les écrans les plus larges. En plus de cela, vous pourriez avoir envie de servir des images de haute résolution aux appareils qui ont un écran le plus de DPI (comme les écrans _Retina_). Ainsi, sauf si vous créez de nombreuses variations intermédiaires de vos images, vous allez aussi avoir besoin d'un moyen de servir le bon fichier pour le bon navigateur. Vous pouvez pour cela agrémenter vos éléments `<picture>` et `<source>` avec les attributs [`media`](/fr/docs/Web/HTML/Element/Source#attr-media) et/ou [`sizes`](/fr/docs/Web/HTML/Element/Source#attr-sizes). Un [article détaillé sur la combinaison de ces attributs peut être trouvé ici (en anglais)](https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/). -<h4 id="controlling_the_priority_and_ordering_of_downloading_images">Contrôler la priorité (et l'ordre) de téléchargement des images</h4> +Deux effets intéressants sont à garder en tête concernant les écrans à haut niveau de DPI : -<p>Les images les plus importantes doivent être affichées le plus rapidement possible aux personnes visitant votre site, afin d'améliorer la performance qu'ils perçoivent de votre site.</p> +- avec les écrans à haut niveau de DPI, [l'œil humain reconnaîtra les artefacts de compression bien plus tard](https://www.netvlies.nl/tips-updates/algemeen/design-interactie/retina-revolution/), ce qui signifie que pour les images destinées à ces écrans, vous pouvez aller plus loin que d'habitude en termes de compression. +- [seulement une toute petite proportion des gens sont capables de détecter les améliorations supérieures à 2× DPI](https://observablehq.com/@eeeps/visual-acuity-and-device-pixel-ratio), ce qui signifie que vous n'avez pas besoin de servir des images d'une résolution supérieure à 2×. -<p>La première chose à vérifier est que vos images de contenu utilisent bien des éléments <code><img></code> ou <code><picture></code>, et que vos images d'arrière-plan sont bien définies à l'aide de la propriété CSS <code>background-image</code>. sachez que les images référencées avec les éléments <code><img></code> ou <code><picture></code> ont une priorité de chargement plus importante que les images d'arrière-plan.</p> +#### Contrôler la priorité (et l'ordre) de téléchargement des images -<p>Deuxièmement, avec l'adoption progressive des indices de priorité (API <i>Priority Hints</i>), vous pouvez aller plus loin dans le contrôle de la priorité en utilisant un attribut <code>importance</code> sur vos balises d'images. Un cas d'utilisation concret pour l'utilisation des indices de priorité sont les diaporamas d'images où on mettra une priorité plus haute sur la première image que sur les suivantes.</p> +Les images les plus importantes doivent être affichées le plus rapidement possible aux personnes visitant votre site, afin d'améliorer la performance qu'ils perçoivent de votre site. -<h3 id="rendering_strategy">Stratégie de rendu</h3> +La première chose à vérifier est que vos images de contenu utilisent bien des éléments `<img>` ou `<picture>`, et que vos images d'arrière-plan sont bien définies à l'aide de la propriété CSS `background-image`. sachez que les images référencées avec les éléments `<img>` ou `<picture>` ont une priorité de chargement plus importante que les images d'arrière-plan. -<p>Comme les images sont chargées de façon asynchrone et continuent à charger après la première peinture de la page, un <i>reflow</i> du contenu de la page peut survenir si leurs dimensions ne sont pas définies avant le chargement. C'est par exemple le cas lorsque le texte se fait repousser vers le bas au chargement des images. Pour cette raison, il est très important de mettre en place des attributs <code>width</code> et <code>height</code> pour que le navigateur puisse réserver de l'espace pour la mise en page des images.</p> +Deuxièmement, avec l'adoption progressive des indices de priorité (API _Priority Hints_), vous pouvez aller plus loin dans le contrôle de la priorité en utilisant un attribut `importance` sur vos balises d'images. Un cas d'utilisation concret pour l'utilisation des indices de priorité sont les diaporamas d'images où on mettra une priorité plus haute sur la première image que sur les suivantes. -<p>Pour les images d'arrière-plan, il est important de mettre en place une valeur pour la propriété <code>background-color</code> pour que le contenu éventuellement affiché par-dessus l'image soit lisible même avant que l'image ne soit chargée.</p> +### Stratégie de rendu -<h2 id="conclusion">Conclusion</h2> +Comme les images sont chargées de façon asynchrone et continuent à charger après la première peinture de la page, un _reflow_ du contenu de la page peut survenir si leurs dimensions ne sont pas définies avant le chargement. C'est par exemple le cas lorsque le texte se fait repousser vers le bas au chargement des images. Pour cette raison, il est très important de mettre en place des attributs `width` et `height` pour que le navigateur puisse réserver de l'espace pour la mise en page des images. -<p>Dans cette section nous avons vu l'optimisation des images. Vous avez maintenant une compréhension générale de la façon d'optimiser la bande passante de la moitié des sites web. Ce n'est qu'un des types d'optimisation consommant la bande passante des visiteurs et ralentissant le chargement des pages. Dans le prochain article, nous verrons l'optimisation du critère responsable de 20 % de la consommation de bande passante.</p> +Pour les images d'arrière-plan, il est important de mettre en place une valeur pour la propriété `background-color` pour que le contenu éventuellement affiché par-dessus l'image soit lisible même avant que l'image ne soit chargée. -<p>{{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}}</p> +## Conclusion -<h2 id="in_this_module">Dans ce module</h2> +Dans cette section nous avons vu l'optimisation des images. Vous avez maintenant une compréhension générale de la façon d'optimiser la bande passante de la moitié des sites web. Ce n'est qu'un des types d'optimisation consommant la bande passante des visiteurs et ralentissant le chargement des pages. Dans le prochain article, nous verrons l'optimisation du critère responsable de 20 % de la consommation de bande passante. -<ul> - <li><a href="/fr/docs/Learn/Performance/why_web_performance">Le « pourquoi » des performances web</a></li> - <li><a href="/fr/docs/Learn/Performance/What_is_web_performance">Qu'est-ce que sont les performances web ?</a></li> - <li><a href="/fr/docs/Learn/Performance/Perceived_performance">Comment les visiteurs perçoivent-ils les performances ?</a></li> - <li><a href="/fr/docs/Learn/Performance/Measuring_performance">Mesurer les performances</a></li> - <li><a href="/fr/docs/Learn/Performance/Multimedia">Multimédia : images</a></li> - <li><a href="/fr/docs/Learn/Performance/video">Multimédia : vidéos</a></li> - <li><a href="/fr/docs/Learn/Performance/JavaScript">Bonnes pratiques de performances pour JavaScript</a></li> - <li><a href="/fr/docs/Learn/Performance/HTML">Fonctionnalités de HTML liées aux performances</a></li> - <li><a href="/fr/docs/Learn/Performance/CSS">Fonctionnalités de CSS liées aux performances</a></li> - <li><a href="/fr/docs/Learn/Performance/Fonts">Performances et polices d'écriture</a></li> - <li><a href="/fr/docs/Learn/Performance/Mobile">Performances sur mobile</a></li> - <li><a href="/fr/docs/Learn/Performance/business_case_for_performance">Placer le focus sur les performances</a></li> -</ul> +{{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}} + +## Dans ce module + +- [Le « pourquoi » des performances web](/fr/docs/Learn/Performance/why_web_performance) +- [Qu'est-ce que sont les performances web ?](/fr/docs/Learn/Performance/What_is_web_performance) +- [Comment les visiteurs perçoivent-ils les performances ?](/fr/docs/Learn/Performance/Perceived_performance) +- [Mesurer les performances](/fr/docs/Learn/Performance/Measuring_performance) +- [Multimédia : images](/fr/docs/Learn/Performance/Multimedia) +- [Multimédia : vidéos](/fr/docs/Learn/Performance/video) +- [Bonnes pratiques de performances pour JavaScript](/fr/docs/Learn/Performance/JavaScript) +- [Fonctionnalités de HTML liées aux performances](/fr/docs/Learn/Performance/HTML) +- [Fonctionnalités de CSS liées aux performances](/fr/docs/Learn/Performance/CSS) +- [Performances et polices d'écriture](/fr/docs/Learn/Performance/Fonts) +- [Performances sur mobile](/fr/docs/Learn/Performance/Mobile) +- [Placer le focus sur les performances](/fr/docs/Learn/Performance/business_case_for_performance) diff --git a/files/fr/learn/performance/why_web_performance/index.md b/files/fr/learn/performance/why_web_performance/index.md index 30d21bd82a..937e183fa6 100644 --- a/files/fr/learn/performance/why_web_performance/index.md +++ b/files/fr/learn/performance/why_web_performance/index.md @@ -12,89 +12,89 @@ tags: translation_of: Learn/Performance/why_web_performance original_slug: Learn/Performance/pourquoi_performance_web --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}} -<div>{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}</div> - -<p>La performance Web consiste à rendre les sites Web rapides, y compris à rendre les processus lents rapides. Cet article explique pourquoi les performances Web sont importantes pour les visiteurs du site et pour vos objectifs commerciaux.</p> +La performance Web consiste à rendre les sites Web rapides, y compris à rendre les processus lents rapides. Cet article explique pourquoi les performances Web sont importantes pour les visiteurs du site et pour vos objectifs commerciaux. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Connaissances de base en informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, et connaissances de base des <a href="/fr/docs/Apprendre/Commencer_avec_le_web">technologies Web côté client</a>.</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Connaître les raisons pour lesquelles les performances Web sont importantes pour une bonne expérience utilisateur.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Connaissances de base en informatique, + <a + href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" + >installation des outils de base</a + >, et connaissances de base des + <a href="/fr/docs/Apprendre/Commencer_avec_le_web" + >technologies Web côté client</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Connaître les raisons pour lesquelles les performances Web sont + importantes pour une bonne expérience utilisateur. + </td> + </tr> + </tbody> </table> -<p>Les performances Web font référence à la rapidité avec laquelle le contenu du site se <strong>charge</strong> et <strong>s'affiche</strong> dans un navigateur web, et à la façon dont il répond à l'interaction de l'utilisateur. Les sites peu performants sont lents à afficher et à répondre aux entrées. Les sites mal performants augmentent l'abandon des sites. Au pire, une mauvaise performance rend le contenu totalement inaccessible. Un bon objectif pour les performances Web est que les utilisateurs ne remarquent pas les performances. Alors que la perception d'un individu sur les performances du site est subjective, le chargement et le rendu peuvent être mesurés. De bonnes performances peuvent ne pas être évidentes pour la plupart des visiteurs du site, mais la plupart reconnaîtront immédiatement un site lent. C'est pourquoi nous nous soucions de cela.</p> +Les performances Web font référence à la rapidité avec laquelle le contenu du site se **charge** et **s'affiche** dans un navigateur web, et à la façon dont il répond à l'interaction de l'utilisateur. Les sites peu performants sont lents à afficher et à répondre aux entrées. Les sites mal performants augmentent l'abandon des sites. Au pire, une mauvaise performance rend le contenu totalement inaccessible. Un bon objectif pour les performances Web est que les utilisateurs ne remarquent pas les performances. Alors que la perception d'un individu sur les performances du site est subjective, le chargement et le rendu peuvent être mesurés. De bonnes performances peuvent ne pas être évidentes pour la plupart des visiteurs du site, mais la plupart reconnaîtront immédiatement un site lent. C'est pourquoi nous nous soucions de cela. -<h2 id="Pourquoi_se_soucier_de_la_performance">Pourquoi se soucier de la performance?</h2> +## Pourquoi se soucier de la performance? -<p>Les performances Web et les meilleurs pratiques associées sont essentielles pour que les visiteurs de votre site Web aient une bonne expérience. En un sens, les performances Web peuvent être considérées comme un sous-ensemble de l'<a href="/fr/docs/Apprendre/a11y">accessibilité web</a>. Avec les performaces comme avec l'accessibilité, vous considérez que appareil un visiteur du site utilise pour accéder au site et la vitesse de connexion de l'appareil.</p> +Les performances Web et les meilleurs pratiques associées sont essentielles pour que les visiteurs de votre site Web aient une bonne expérience. En un sens, les performances Web peuvent être considérées comme un sous-ensemble de l'[accessibilité web](/fr/docs/Apprendre/a11y). Avec les performaces comme avec l'accessibilité, vous considérez que appareil un visiteur du site utilise pour accéder au site et la vitesse de connexion de l'appareil. -<p>À titre d'exemple, considérons l'expérience de chargement de CNN.com, qui, au moment de la rédaction de cet article, avait plus de 400 requêtes HTTP avec une taille de fichier supérieure à 22.6Mo.</p> +À titre d'exemple, considérons l'expérience de chargement de CNN.com, qui, au moment de la rédaction de cet article, avait plus de 400 requêtes HTTP avec une taille de fichier supérieure à 22.6Mo. -<ul> - <li>Imaginez charger ceci sur un ordinateur de bureau connecté à un réseau de fibre optique. Cela semblerait relativement rapide, et la taille du fichier serait en grande partie sans importance.</li> - <li>Imaginez charger ce même site en utilisant des données mobiles connectées sur un iPad de 9 ans tout en vous rendant chez vous en transport en commun. Le même site sera lent à se charger, voir presque inutilisable en fonction de la couverture cellulaire. Vous pourriez abandonner avant la fin du chargement.</li> - <li>Imaginez charger ce même site sur un appareil Huawei à 35$ dans une Inde rurale avec une couverture limitée ou pas de couverture. Le site sera très lent à se charger - s'il se charge du tout - avec des scripts de blocage pouvant expirer et un impact négatif sur le processeur provoquant des plantages du navigateur s'il se charge.</li> -</ul> +- Imaginez charger ceci sur un ordinateur de bureau connecté à un réseau de fibre optique. Cela semblerait relativement rapide, et la taille du fichier serait en grande partie sans importance. +- Imaginez charger ce même site en utilisant des données mobiles connectées sur un iPad de 9 ans tout en vous rendant chez vous en transport en commun. Le même site sera lent à se charger, voir presque inutilisable en fonction de la couverture cellulaire. Vous pourriez abandonner avant la fin du chargement. +- Imaginez charger ce même site sur un appareil Huawei à 35$ dans une Inde rurale avec une couverture limitée ou pas de couverture. Le site sera très lent à se charger - s'il se charge du tout - avec des scripts de blocage pouvant expirer et un impact négatif sur le processeur provoquant des plantages du navigateur s'il se charge. -<p>Un site de 22.6 Mo peut prendre jusqu'à 83 secondes pour se charger sur un réseau 3G, avec <code><a href="/fr/docs/Web/API/Document/DOMContentLoaded_event">DOMContentLoaded</a></code> (c'est-à-dire la structure HTML de base du site) à 31.86 secondes.</p> +Un site de 22.6 Mo peut prendre jusqu'à 83 secondes pour se charger sur un réseau 3G, avec [`DOMContentLoaded`](/fr/docs/Web/API/Document/DOMContentLoaded_event) (c'est-à-dire la structure HTML de base du site) à 31.86 secondes. -<p>Et ce n'est pas seulement le temps de téléchargement qui est un problème majeur. De nombreux pays ont encore des connexions internet facturées âr mégaoctet. Notre exemple de 22,6 Mo d'expérience CNN.com coûterait environ 11% du salaire quotidien moyen d'un Indien à télécharger. À partir d'un appareil mobile en Afrique du Nord-Ouest, cela peut coûter deux jours de salaire moyen. Et si ce site était chargé sur le plan d'itinérance internationale d'un opérateur américain? Les coûts feraient pleurer n'importe qui. (Voir <a href="https://whatdoesmysitecost.com/">combien coûte le téléchargement de votre site</a>.)</p> +Et ce n'est pas seulement le temps de téléchargement qui est un problème majeur. De nombreux pays ont encore des connexions internet facturées âr mégaoctet. Notre exemple de 22,6 Mo d'expérience CNN.com coûterait environ 11% du salaire quotidien moyen d'un Indien à télécharger. À partir d'un appareil mobile en Afrique du Nord-Ouest, cela peut coûter deux jours de salaire moyen. Et si ce site était chargé sur le plan d'itinérance internationale d'un opérateur américain? Les coûts feraient pleurer n'importe qui. (Voir [combien coûte le téléchargement de votre site](https://whatdoesmysitecost.com/).) -<h3 id="Améliorer_les_taux_de_conversion">Améliorer les taux de conversion</h3> +### Améliorer les taux de conversion -<p>La réduction du temps de téléchargement et de rendu d'un site améliore les taux de conversion et la fidélisation des utilisateurs.</p> +La réduction du temps de téléchargement et de rendu d'un site améliore les taux de conversion et la fidélisation des utilisateurs. -<p>Un <strong>taux de conversion</strong> est le taux auquel les visiteurs du site effectuent une action mesurée ou souhaitée. Par exemple, il peut s'agir d'effectuer un achat, de lire un article ou de vous abonner à une newsletter. L'action mesurée en tant que taux de conversion dépend des objectifs commerciaux du site web.</p> +Un **taux de conversion** est le taux auquel les visiteurs du site effectuent une action mesurée ou souhaitée. Par exemple, il peut s'agir d'effectuer un achat, de lire un article ou de vous abonner à une newsletter. L'action mesurée en tant que taux de conversion dépend des objectifs commerciaux du site web. -<p>La performance influe sur la conversion; l'amélioration des performances Web améliore la conversion. Les visiteurs du site s'attendent à ce qu'un site se charge en deux secondes ou moins; parfois encore moins sur mobile (où cela prend généralement plus de temps). Ces mêmes visiteurs du site commencent à abandonner les sites lents à 3 secondes.</p> +La performance influe sur la conversion; l'amélioration des performances Web améliore la conversion. Les visiteurs du site s'attendent à ce qu'un site se charge en deux secondes ou moins; parfois encore moins sur mobile (où cela prend généralement plus de temps). Ces mêmes visiteurs du site commencent à abandonner les sites lents à 3 secondes. -<p>La vitesse à laquelle un site se charge est un facteur. Si le site est lent à réagir à l'interaction de l'utilisateur, ou semble saccadé, cela entraîne une perte d'intérêt et de confiance des visiteurs du site.</p> +La vitesse à laquelle un site se charge est un facteur. Si le site est lent à réagir à l'interaction de l'utilisateur, ou semble saccadé, cela entraîne une perte d'intérêt et de confiance des visiteurs du site. -<p>Voici quelques exemples concrets d'améliorations des performances:</p> +Voici quelques exemples concrets d'améliorations des performances: -<ul> - <li> - <p><a href="https://wpostats.com/2018/05/30/tokopedia-new-users.html">Tokopedia a réduit le temps de rendu de 14s à 2s pour les connexions 3G et a vu une augmentation de 19% des visiteurs, 35% d'augmentation du nombre total de sessions, 7% d'augmentation des nouveaux utilisateurs, 17% d'augmentation des utilisateurs actifs et 16% d'augmentation des sessions par utilisateur.</a></p> - </li> - <li> - <p><a href="https://wpostats.com/2017/03/10/pinterest-seo.html">La reconstruction des pages Pinterest pour les performances a entraîné une réduction de 40% du temps d'attente, une augmentation de 15% du trafic SEO et d'une augmentation de 15% du taux de conversion pour l'inscription.</a></p> - </li> -</ul> +- [Tokopedia a réduit le temps de rendu de 14s à 2s pour les connexions 3G et a vu une augmentation de 19% des visiteurs, 35% d'augmentation du nombre total de sessions, 7% d'augmentation des nouveaux utilisateurs, 17% d'augmentation des utilisateurs actifs et 16% d'augmentation des sessions par utilisateur.](https://wpostats.com/2018/05/30/tokopedia-new-users.html) +- [La reconstruction des pages Pinterest pour les performances a entraîné une réduction de 40% du temps d'attente, une augmentation de 15% du trafic SEO et d'une augmentation de 15% du taux de conversion pour l'inscription.](https://wpostats.com/2017/03/10/pinterest-seo.html) -<p>Pour créer des sites Web et des applications que les gens veulent utiliser; pour attirer et fidéliser les visiteurs du site, vous devez créer un site accessible qui offre une bonne expérience utilisateur. La création de sites Web nécessite HTML, CSS et JavaScript, y compris généralement des types de fichiers binaires tels que des images et des vidéos. Les décisions que vous prenez et les outils que vous choisissez lors de la création de votre site peuvent grandement affecter les performances du travail fini.</p> +Pour créer des sites Web et des applications que les gens veulent utiliser; pour attirer et fidéliser les visiteurs du site, vous devez créer un site accessible qui offre une bonne expérience utilisateur. La création de sites Web nécessite HTML, CSS et JavaScript, y compris généralement des types de fichiers binaires tels que des images et des vidéos. Les décisions que vous prenez et les outils que vous choisissez lors de la création de votre site peuvent grandement affecter les performances du travail fini. -<p>Une bonne performance est un atout. Une mauvaise performance est une responsabilité. La vitesse du site affecte directement les taux de rebond, la conversion, les revenus, la satisfaction des utilisateurs et le classement des moteurs de recherche. Il a été démontré que les sites performants augmentent la rétention des visiteurs et la satisfaction des utilisateurs. Il a été démontré que la lenteur du contenu conduit à l'abandon du site, certains visiteurs partant pour ne jamais revenir. La réduction de la quantité de données qui passe entre le client et le serveur réduit les coûts pour toutes les parties. La réduction de la taille des fichiers HTML/CSS/JavaScript et multimédia réduit à la fois le temps de chargement et la consommation d'énergie d'un site (voir <a href="/fr/docs/Web/Performance/Budgets_de_performance">performance budgets</a>).</p> +Une bonne performance est un atout. Une mauvaise performance est une responsabilité. La vitesse du site affecte directement les taux de rebond, la conversion, les revenus, la satisfaction des utilisateurs et le classement des moteurs de recherche. Il a été démontré que les sites performants augmentent la rétention des visiteurs et la satisfaction des utilisateurs. Il a été démontré que la lenteur du contenu conduit à l'abandon du site, certains visiteurs partant pour ne jamais revenir. La réduction de la quantité de données qui passe entre le client et le serveur réduit les coûts pour toutes les parties. La réduction de la taille des fichiers HTML/CSS/JavaScript et multimédia réduit à la fois le temps de chargement et la consommation d'énergie d'un site (voir [performance budgets](/fr/docs/Web/Performance/Budgets_de_performance)). -<p>Le suivi des performances est important. Plusieurs facteurs, notamment la vitesse du réseau et les capacités de l'appareil, affectent les performances. Il n'y a pas de mesure de performance unique; et des objectifs commerciaux différents peuvent signifier que différentes mesures sont plus pertinentes pour les objectifs du site ou de l'organisation qu'il prend en charge. La perception de la performance de votre site est l'expérience utilisateur!</p> +Le suivi des performances est important. Plusieurs facteurs, notamment la vitesse du réseau et les capacités de l'appareil, affectent les performances. Il n'y a pas de mesure de performance unique; et des objectifs commerciaux différents peuvent signifier que différentes mesures sont plus pertinentes pour les objectifs du site ou de l'organisation qu'il prend en charge. La perception de la performance de votre site est l'expérience utilisateur! -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<p>Les performances Web sont importantes pour l'accessibilité et également pour d'autres mesures de site Web qui servent les objectifs d'une organisation ou d'une entreprise. Les bonnes ou mauvaises performances du site Web sont fortement corrélées à l'expérience utilisateur, ainsi qu'à l'efficacité globale de la plupart des sites. C'est pourquoi vous devez vous soucier des performances Web.</p> +Les performances Web sont importantes pour l'accessibilité et également pour d'autres mesures de site Web qui servent les objectifs d'une organisation ou d'une entreprise. Les bonnes ou mauvaises performances du site Web sont fortement corrélées à l'expérience utilisateur, ainsi qu'à l'efficacité globale de la plupart des sites. C'est pourquoi vous devez vous soucier des performances Web. -<p>{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}</p> +{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/Performance/why_web_performance">The "why" of web performance</a></li> - <li><a href="/fr/docs/Learn/Performance/What_is_web_performance">What is web performance?</a></li> - <li><a href="/fr/docs/Learn/Performance/Perceived_performance">How do users perceive performance?</a></li> - <li><a href="/fr/docs/Learn/Performance/Measuring_performance">Measuring performance</a></li> - <li><a href="/fr/docs/Learn/Performance/Multimedia">Multimedia: images</a></li> - <li><a href="/fr/docs/Learn/Performance/video">Multimedia: video</a></li> - <li><a href="/fr/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li> - <li><a href="/fr/docs/Learn/Performance/HTML">HTML performance features</a></li> - <li><a href="/fr/docs/Learn/Performance/CSS">Optimisation des performances en CSS</a></li> - <li><a href="/fr/docs/Learn/Performance/Fonts">Fonts and performance</a></li> - <li><a href="/fr/docs/Learn/Performance/Mobile">Mobile performance</a></li> - <li><a href="/fr/docs/Learn/Performance/business_case_for_performance">Focusing on performance</a></li> -</ul> +- [The "why" of web performance](/fr/docs/Learn/Performance/why_web_performance) +- [What is web performance?](/fr/docs/Learn/Performance/What_is_web_performance) +- [How do users perceive performance?](/fr/docs/Learn/Performance/Perceived_performance) +- [Measuring performance](/fr/docs/Learn/Performance/Measuring_performance) +- [Multimedia: images](/fr/docs/Learn/Performance/Multimedia) +- [Multimedia: video](/fr/docs/Learn/Performance/video) +- [JavaScript performance best practices](/fr/docs/Learn/Performance/JavaScript). +- [HTML performance features](/fr/docs/Learn/Performance/HTML) +- [Optimisation des performances en CSS](/fr/docs/Learn/Performance/CSS) +- [Fonts and performance](/fr/docs/Learn/Performance/Fonts) +- [Mobile performance](/fr/docs/Learn/Performance/Mobile) +- [Focusing on performance](/fr/docs/Learn/Performance/business_case_for_performance) |