initial commit

1 files changed, 100 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>