initial commit

3 files changed, 282 insertions, 0 deletions

diff --git a/files/fr/learn/performance/css/index.html b/files/fr/learn/performance/css/index.html
new file mode 100644
index 0000000000..fe7befdd0e
--- /dev/null
+++ b/files/fr/learn/performance/css/index.html
@@ -0,0 +1,100 @@
+---
+title: Optimisation des performances en CSS
+slug: Learn/Performance/CSS
+tags:
+  - CSS
+  - Optimisation
+  - Performance
+  - Tutoriel
+translation_of: Learn/Performance/CSS
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/Performance/html", "Learn/Performance/fonts", "Learn/Performance")}} {{draft}}</p>
+
+<p>Afficher une page sans mise en forme, puis ré-afficher cette même page une fois sa mise en forme chargée serait un processus bien désagréable pour l'utilisateur. Afin d'éviter ce désagrément, le CSS retarde l'affichage de la page sur le naviguateur tant qu'il n'a pas été entièrement chargé et interprêté : on dit que <span class="seoSummary">le CSS bloque le rendu de la page</span> (on le qualifie d'ailleurs de "render blocking" en anglais). C'est cette configuration que le navigateur utilise par défaut, bien que l'on puisse spécifier une stratégie d'affichage différente comme indiqué dans la section suivante.</p>
+
+<p>Le navigateur suit une procédure d'affichage très précise : l'affichage n'intervient qu'après la mise en page, qui elle-même dépend de la génération de l'abre de rendu par le navigateur, qui requiert lui aussi l'existence de deux autres ressources : le <a href="/fr/docs/Glossaire/DOM">DOM</a> (Document Object Model) et le <a href="/fr/docs/MDN/Doc_status/API/CSSOM">CSSOM</a> (CSS Object Model). <span class="seoSummary">Optimiser les performances en CSS revient donc d'une part à réduire le temps de chargement des ressources, et d'autre part à optimiser la construction du CSSOM.</span> Pour se faire, quelques bonnes pratiques :</p>
+
+<ul>
+ <li>Retirez les règles de styles inutilisées ou dupliquées,</li>
+ <li>Minimisez la taille de votre fichier CSS (en retirant les espaces, retours à la ligne et tabulations par exemple),</li>
+ <li>compressez votre fichier CSS et enregistrez-le dans le cache du navigateur client,</li>
+ <li>enregistrez dans des fichiers additionnels les règles CSS qui ne sont pas nécessaires lors du chargement de la page afin de diminuer le temps de bloquage.</li>
+</ul>
+
+<h3 id="Optimiser_le_temps_de_bloquage_du_rendu">Optimiser le temps de bloquage du rendu</h3>
+
+<p>Une des forces du CSS réside dans sa capacité à appliquer des styles différents selon l'appareil utilisé, par le biais de <a href="/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utilisation_requ%C3%AAtes_media_accessibilit%C3%A9">Requêtes Média</a> ("media queries" en anglais) permettant de poser des conditions de mise en page selon les caractéristiques de l'apareil. Ces requettes média sont d'une importance capitale pour le <a href="/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design">responsive design</a> (mise en page flexible) et peuvent également nous permettre d'optimiser une partie critique du processus de rendu. En effet, le navigateur bloque le rendu de la page tant qu'il n'a pas entièrement interprêté les règles CSS, mais ne bloquera plus ni le rendu, ni l'affichage pour des fichiers CSS dont il sait ne pas avoir l'utilité - comme c'est le cas pour la mise en page d'impression papier, destinée à l'imprimante et non à l'écran. En réorganisant alors l'ensemble des règles CSS en plusieurs fichiers suivant des requêtes média, nous pouvons alors éviter de bloquer inutilement le rendu en attendant le chargement de ressources superflues pour l'affichage.</p>
+
+<p>Pour obtenir ce résultat dans les faits, il suffit de placer le code CSS inutilisé lors du rendu, par exemple celui de l'impression papier, dans un fichier à part puis de l'intégrer à la page par le biais d'une balise <code><a href="/fr/docs/Web/HTML/Element/link">&lt;link&gt;</a></code>. On spécifie ensuite l'attribut <code>media</code> de cette balise pour y ajouter notre requête média : dans notre exemple, cette requête spécifierait que ce n'est utile que pour une imprimante.</p>
+
+<pre class="brush: html notranslate">&lt;link rel="stylesheet" href="styles.css"&gt; &lt;!-- bloquant --&gt;
+&lt;link rel="stylesheet" href="print.css" media="print"&gt; &lt;!-- non bloquant --&gt;
+&lt;link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"&gt; &lt;!-- non boquant sur grand écran --&gt;</pre>
+
+<p>Par défaut, le navigateur suppose que chaque fichier CSS est bloquant, car probablement utile pour le rendu. En utilisant cet attribut <code>media</code>, le navigateur comprend alors quel fichier utiliser dans quel scénario : il téléchargera alors le fichier, mais ne bloquera pas le rendu lors de son interprétation, ce qui résultera en un affichage plus rapide pour l'utilisateur. Dans le cas ci-dessus, le fichier <code>styles.css</code> est boquant quelque soit l'appareil utilisé, <code>print.css</code> devient bloquant pour une imprimante et <code>mobile.css</code> devient bloquant seulement lorsque la largeur de l'écran n'excède pas 480 pixels.</p>
+
+<h3 id="Interprêter_les_animations_sur_le_GPU">Interprêter les animations sur le GPU</h3>
+
+<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'execution 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="/en-US/docs/Web/CSS/transform">transform: translateZ()</a></code>, <code><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code>, etc.), de transformation 2D ainsi que les propriétés <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code>, <code><a href="/en-US/docs/Web/CSS/position">position: fixed</a></code>, <code><a href="/en-US/docs/Web/CSS/will-change">will-change</a></code> et <code><a href="/en-US/docs/Web/CSS/filter">filter</a></code>. D'autres éléments, parmi lesquels <code><a href="/en-US/docs/Web/HTML/Element/video">&lt;video&gt;</a></code>, <code><a href="/en-US/docs/Web/HTML/Element/canvas">&lt;canvas&gt;</a></code> ou encore <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>, fonctionnent aussi sur leur propre fil d'execution. 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'éxécution, et permet d'obtenir de bien meilleures performance, en particulier sur mobile.</p>
+
+<h3 id="La_propriété_cssxrefwill-change">La propriété {{cssxref('will-change')}}</h3>
+
+<p>La propriété CSS {{cssxref('will-change')}} indique au navigateur les propriétés CSS d'un élément qui sont suceptibles d'être modifiés 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>
+
+<pre class="brush: css notranslate">will-change: opacity, transform;</pre>
+
+<h3 id="La_propriété_cssxreffont-display">La propriété {{cssxref('font-display')}}</h3>
+
+<p>Insérée dans une règle {{cssxref('@font-face')}}, la propriété CSS {{cssxref('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.</p>
+
+<pre class="brush: css notranslate">@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>
+
+<h3 id="La_propriété_cssxrefcontain">La propriété {{cssxref('contain')}}</h3>
+
+<p>La propriété CSS {{cssxref('contain')}} permet quant à elle de spécifier au navigateur qu'un élément et son contenu sont, dans la mesure du possible, indépendant 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>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Optimiser les performances en CSS revient ainsi à améliorer deux étapes cruciales et chronophages du rendu de page :</p>
+
+<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>
+
+<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>
+
+<p>{{PreviousMenuNext("Learn/Performance/html", "Learn/Performance/fonts", "Learn/Performance")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Learn/Performance/pourquoi_performance_web">Le "pourquoi" des performances web</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/What_is_web_performance">What is web performance?</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Perceived_performance">How do users perceive performance?</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Measuring_performance">Measuring performance</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/video">Multimedia: video</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li>
+ <li><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></li>
+ <li><a href="/fr/docs/Learn/Performance/CSS">CSS performance featuresOptimisation des performances en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Fonts">Fonts and performance</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/business_case_for_performance">Focusing on performance</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>
+  <p><a href="/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance">CSS animation performance</a></p>
+ </li>
+</ul>
diff --git a/files/fr/learn/performance/index.html b/files/fr/learn/performance/index.html
new file mode 100644
index 0000000000..9f51e78656
--- /dev/null
+++ b/files/fr/learn/performance/index.html
@@ -0,0 +1,81 @@
+---
+title: Performance Web
+slug: Learn/Performance
+tags:
+  - Apprendre
+  - CSS
+  - HTML
+  - HTTP
+  - JavaScript
+  - Performance
+  - Performance Web
+  - TopicStub
+translation_of: Learn/Performance
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary">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 class="summary">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 <span class="tlid-translation translation" lang="fr"><span title="">œ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.</span></span> 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="/en-US/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="/en-US/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="/en-US/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="/en-US/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="/en-US/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="/en-US/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="/en-US/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="/en-US/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="/en-US/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="/en-US/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="/en-US/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="/en-US/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>
diff --git a/files/fr/learn/performance/pourquoi_performance_web/index.html b/files/fr/learn/performance/pourquoi_performance_web/index.html
new file mode 100644
index 0000000000..ec49c36548
--- /dev/null
+++ b/files/fr/learn/performance/pourquoi_performance_web/index.html
@@ -0,0 +1,101 @@
+---
+title: Le "pourquoi" des performances Web
+slug: Learn/Performance/pourquoi_performance_web
+tags:
+  - Apprendre
+  - Débutant
+  - Introduction
+  - Performance
+  - Performance Web
+  - Reference
+  - Tutoriel
+translation_of: Learn/Performance/why_web_performance
+---
+<div>{{LearnSidebar}}</div>
+
+<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>
+
+<table class="learn-box 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>
+</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>
+
+<h2 id="Pourquoi_se_soucier_de_la_performance">Pourquoi se soucier de la performance?</h2>
+
+<p class="summary">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>
+
+<p class="summary">À 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>
+
+<ul>
+ <li class="summary">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 class="summary">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 class="summary">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>
+
+<p class="summary">Un site de 22.6 Mo peut prendre jusqu'à 83 secondes pour se charger sur un réseau 3G, avec <code><a href="/en-US/docs/Web/API/Document/DOMContentLoaded_event">DOMContentLoaded</a></code> (c'est-à-dire la structure HTML de base du site) à 31.86 secondes.</p>
+
+<p class="summary">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>
+
+<p dir="ltr"></p>
+
+<h3 dir="ltr" id="Améliorer_les_taux_de_conversion">Améliorer les taux de conversion</h3>
+
+<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>
+
+<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>
+
+<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>
+
+<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>
+
+<p dir="ltr">Voici quelques exemples concrets d'améliorations des performances:</p>
+
+<ul>
+ <li dir="ltr">
+  <p dir="ltr"><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 dir="ltr">
+  <p dir="ltr"><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>
+
+<p class="summary">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>
+
+<p class="summary">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>
+
+<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>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<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>
+
+<p>{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Performance/why_web_performance">The "why" of web performance</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/What_is_web_performance">What is web performance?</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Perceived_performance">How do users perceive performance?</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Measuring_performance">Measuring performance</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/video">Multimedia: video</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li>
+ <li><a href="/en-US/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="/en-US/docs/Learn/Performance/Fonts">Fonts and performance</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/business_case_for_performance">Focusing on performance</a></li>
+</ul>