blob: 2c6ae834d691f85f8741777112fc18a0475c6d73 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
---
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>
<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>
<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>
</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>
</tr>
</tbody>
</table>
<h2 id="elements_attributes_impacting_performance">Éléments & attributs ayant un impact sur les performances</h2>
<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>
<h2 id="conclusion">Conclusion</h2>
<p>{{PreviousMenuNext("Learn/Performance/javascript_performance", "Learn/Performance/CSS", "Learn/Performance")}}</p>
<h2 id="in_this_module">Dans ce module</h2>
<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>
<h2 id="see_also">Voir aussi</h2>
<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>
|
