diff options
Diffstat (limited to 'files/fr/learn/performance/why_web_performance/index.html')
| -rw-r--r-- | files/fr/learn/performance/why_web_performance/index.html | 56 |
1 files changed, 27 insertions, 29 deletions
diff --git a/files/fr/learn/performance/why_web_performance/index.html b/files/fr/learn/performance/why_web_performance/index.html index 8cb054da54..30d21bd82a 100644 --- a/files/fr/learn/performance/why_web_performance/index.html +++ b/files/fr/learn/performance/why_web_performance/index.html @@ -18,7 +18,7 @@ original_slug: Learn/Performance/pourquoi_performance_web <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"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -35,23 +35,21 @@ original_slug: Learn/Performance/pourquoi_performance_web <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>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> +<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> <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> + <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> -<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>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> -<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>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> +<h3 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> @@ -61,20 +59,20 @@ original_slug: Learn/Performance/pourquoi_performance_web <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> +<p>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> + <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 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> + <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> -<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>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>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> @@ -87,16 +85,16 @@ original_slug: Learn/Performance/pourquoi_performance_web <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/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="/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> + <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> |