{"id":1568,"date":"2009-10-22T22:30:42","date_gmt":"2009-10-22T21:30:42","guid":{"rendered":"http:\/\/best-of-high-tech.com\/fr\/?p=1568"},"modified":"2009-11-11T01:41:10","modified_gmt":"2009-11-11T00:41:10","slug":"optimiser-vitesse-site","status":"publish","type":"post","link":"https:\/\/best-of-high-tech.com\/fr\/optimiser-vitesse-site\/","title":{"rendered":"comment tester et optimiser la vitesse de son site internet"},"content":{"rendered":"<p style=\"text-align: justify;\">\n\tUne &eacute;tude r&eacute;cente montre que les internautes sont de plus en plus impatient et que la vitesse d&rsquo;affichage des pages devient un crit&egrave;re de fid&eacute;lisation pour les sites de ecommerce ou les blogs.<\/p>\n<p>\t<strong>Les internautes sont de plus en plus impatients<\/strong>\n<\/p>\n<p style=\"text-align: justify;\">\n\tSi l&rsquo;on en croit une <a href=\"http:\/\/www.akamai.com\/html\/awe\/login.html?campaign_id=AANA-509UI6&amp;curl=\/dl\/whitepapers\/ecommerce_website_perf_wp.pdf\" target=\"_blank\">&eacute;tude am&eacute;ricaine r&eacute;cente<\/a>, malgr&eacute; le haut d&eacute;bit, les internautes sont de plus en plus impatients. Ainsi, pr&egrave;s de la moiti&eacute; des visiteurs d&rsquo;un site n&rsquo;attendent pas plus de 2 secondes pour qu&rsquo;une page se charge, &agrave; fortiori la page d&rsquo;accueil. Apr&egrave;s ? Pshhhit (comme aurait dit un ancien pr&eacute;sident), ils d&eacute;gagent ailleurs.<\/p>\n<p style=\"text-align: justify;\">\n\t<strong>La vitesse comme &eacute;lement fid&eacute;lisant<\/strong>\n<\/p>\n<p style=\"text-align: justify;\">\n\tN&eacute;anmoins, il est int&eacute;ressant de noter, et l&rsquo;&eacute;tude le souligne, que la vitesse peut &ecirc;tre un &eacute;l&eacute;ment de fid&eacute;lisation de vos clients. Plus le site est rapide et plus l&rsquo;exp&eacute;rience d&rsquo;utilisation m&eacute;moris&eacute;e sera agr&eacute;able et plus les utilisateurs auront tendance &agrave; revenir et, mieux encore, &agrave; louer les vertus de votre site aupr&egrave;s de leur entourage. C&rsquo;est pas beau &ccedil;a ? Petit rappel pour les plus jeunes, &agrave; l&rsquo;aube des ann&eacute;es 2000, c&rsquo;est sur cet &eacute;l&eacute;ment vitesse que Google avait fait la diff&eacute;rence aupr&egrave;s de ses concurrents de l&rsquo;&eacute;poque et les avait d&eacute;finitivement distanc&eacute;.<\/p>\n<ul>\n<li>\n\t\tRajoutez 100 ms de temps de chargement &agrave; Amazon et vous perdez 1 % des ventes<\/li>\n<li>\n\t\t400 ms de plus &agrave; Yahoo! et 5 &agrave; 9 % des gens s&rsquo;en iront avant que le site soit charg&eacute;<\/li>\n<li>\n\t\t500 ms de plus lors d&rsquo;une recherche Google et c&rsquo;est 20 % de recherches en moins (enorme !)<\/li>\n<li>\n\t\tEt si par miracle vous arriviez &agrave; all&eacute;ger Google de 30 % de son poids, c&rsquo;est 30 % de trafic suppl&eacute;mentaire que vous gagnerez !<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">\n\t<strong>Les outils pour tester la vitesse de chargement de votre site<\/strong><\/p>\n<p style=\"margin-left: 40px;\">\n\tPlusieurs type de site existe, soit des sites pour tester sa connection instantan&eacute;e et en d&eacute;taille ( css, javascript, htlm, jpeg) ou des sites qui surveilles votre site dans la dur&eacute;e 24\/24 :<\/p>\n<p style=\"margin-left: 40px;\">\n\t<a href=\"http:\/\/tools.pingdom.com\/\" rel=\"nofollow\" target=\"_blank\">Pingdom Tools<\/a>, :<\/p>\n<p style=\"margin-left: 40px;\">\n\t<img loading=\"lazy\" decoding=\"async\" width=\"425\" height=\"257\" alt=\"pingdom-tool\" class=\"alignnone size-full wp-image-1571\" src=\"http:\/\/best-of-high-tech.com\/fr\/wp-content\/uploads\/2009\/10\/pingdom-tool.jpg\" style=\"width: 374px; height: 226px;\" title=\"pingdom-tool\" srcset=\"https:\/\/best-of-high-tech.com\/fr\/wp-content\/uploads\/2009\/10\/pingdom-tool.jpg 425w, https:\/\/best-of-high-tech.com\/fr\/wp-content\/uploads\/2009\/10\/pingdom-tool-300x181.jpg 300w\" sizes=\"(max-width: 425px) 100vw, 425px\" \/><\/p>\n<p style=\"margin-left: 40px;\">\n\t<strong>Legende :<\/strong><\/p>\n<p style=\"margin-left: 40px; text-align: justify;\">\n\tA gauche du bouton gris &quot;Test Now&quot; entrez la page &agrave; visiter. Validez et patientez quelques instants.. Pingdom Tools va tester votre site en fournissant un graphique complet et d&eacute;taill&eacute;.<br \/>\n\tLe graphique est &agrave; lire ainsi :<br \/>\n\tLa barre en jaune indique le temps d&#39;inactivit&eacute;. En gros, il s&#39;agit du moment que met pingdom tools &agrave; se connecter pour indiquer &agrave; votre site web &quot;Je veux&nbsp; t&eacute;l&eacute;charger ce fichier&quot;.<br \/>\n\tLa partie color&eacute;e en vert est le moment o&ugrave; le lien de connection s&#39;est &eacute;tabli entre votre blog et pingdom tools.<br \/>\n\tLa partie color&eacute;e en bleu est le vrai temps de t&eacute;l&eacute;chargement.<br \/>\n\tPour conna&icirc;tre le temps de chargement complet, lisez la ligne <em><strong>Total loading time <\/strong><\/em>.<\/p>\n<p style=\"margin-left: 40px; text-align: justify;\">\n\tBien s&ucirc;r, la valeur donn&eacute;e, exprim&eacute;e en seconde pour les fichiers via un petit graphique, n&#39;est qu&#39;indicative, puis-ce que le temps de chargement d&eacute;pend de divers facteurs :<\/p>\n<p style=\"margin-left: 80px;\">\n\t<br \/>\n\t&#8211; Taux de saturation du serveur au moment T ( nombre de visiteurs en m&ecirc;me temps )<br \/>\n\t&#8211; Connection de l&#39;internaute ( t&eacute;l&eacute;charge t-il en parall&egrave;le ?? )<br \/>\n\t&#8211; Distance s&eacute;parant le serveur h&eacute;bergeant votre blog, de l&#39;internaute etc..<\/p>\n<p style=\"margin-left: 40px;\">\n\t<strong>autre site :<\/strong><\/p>\n<p style=\"margin-left: 40px;\">\n\t<a href=\"http:\/\/www.site-perf.com\/ \" target=\"_blank\">http:\/\/www.site-perf.com\/ <\/a>il est du m&ecirc;me style que pingdoms tools<\/p>\n<p style=\"margin-left: 40px;\">\n\t<a href=\"http:\/\/analyze.websiteoptimization.com\" target=\"_blank\">http:\/\/analyze.websiteoptimization.com<\/a><\/p>\n<p style=\"margin-left: 40px;\">\n\t<a href=\"http:\/\/webwait.com\/\" target=\"_blank\">http:\/\/webwait.com\/<\/a> ce site fais une moyenne sur 10 connection , il peut etre parametr&eacute;<\/p>\n<p style=\"margin-left: 40px;\">\n\tsite de surveillance 24\/24 :<\/p>\n<p style=\"margin-left: 40px;\">\n\t<a href=\"http:\/\/site24x7.com\" target=\"_blank\">http:\/\/site24x7.com<\/a>&nbsp; ( utilis&eacute; que la partie gratuite)<\/p>\n<p>\n\t<br \/>\n\t<strong>Les solutions pour optimiser les temps de chargement<\/strong><\/p>\n<ul>\n<li style=\"text-align: justify;\">\n\t\tChoisir un meilleur h&eacute;bergement : c&rsquo;est le crit&egrave;re num&eacute;ro 1. Si vous &ecirc;tes sur un serveur mutualis&eacute;, passez sur un d&eacute;di&eacute;. Si vous &ecirc;tes sur un d&eacute;di&eacute;, choisissez une machine plus puissante. Si vous &ecirc;tes d&eacute;j&agrave; sur une machine puissante, prenez plus de bande passante, etc. Evidemment, tout cela d&eacute;pend de la taille de votre trafic<\/li>\n<li style=\"text-align: justify;\">\n\t\tAll&eacute;ger le poids des images : avec le haut d&eacute;bit encore, la tendance est&nbsp; lourde &agrave; g&eacute;n&eacute;rer des beaux jpeg ou des grands png. Pareil pour le design du site : plus le d&eacute;bit est haut, plus on retrouve des design charg&eacute; en petit gif, jpeg, jolis boutons et autres coins arrondis qui font le bonheur du designer, mais &laquo; pourrisse &raquo; la vitesse de t&eacute;l&eacute;chargement. Faites donc le m&eacute;nage et demandez-vous si tous vos jolis graphismes en valent toujours la peine ou si ils sont l&agrave; uniquement pour vous faire plaisir<\/li>\n<li style=\"text-align: justify;\">\n\t\tOptimiser le code : c&rsquo;est la partie la plus ardue et aussi la plus tra&icirc;tre. Les feuilles css et les scripts javascripts finissent par surcharger votre page. Exemple : les librairies comme Scriptaculous ou MooTools permettent de faire de tr&egrave;s jolies effet, mais ajoutent des 10zaines de kilo-octets &agrave; toutes vos pages quand ce n&rsquo;est parfois n&eacute;cessaire que sur une page. Pareil pour les css, &eacute;vitez de charger toute votre css pour toutes les pages. Fractionnez-les et utilisez le code n&eacute;cessaire que lorsqu&rsquo;il est n&eacute;cessaire. J&rsquo;ai entendu dire r&eacute;cemment sur un gros site marchand qu&rsquo;il ne pouvait plus rajouter de code javascript, car la quantit&eacute; qui &eacute;tait envoy&eacute;e au navigateur d&eacute;passait sa limite de capacit&eacute; &agrave; traiter ce langage (je ne savais m&ecirc;me pas qu&rsquo;il y avait une limite).<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Une \u00e9tude r\u00e9cente montre que les internautes sont de plus en plus impatient et que la vitesse d\u2019affichage des pages devient un vient crit\u00e8re de fid\u00e9lisation pour les sites de ecommerce ou les blogs.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[60,35,54],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/best-of-high-tech.com\/fr\/wp-json\/wp\/v2\/posts\/1568"}],"collection":[{"href":"https:\/\/best-of-high-tech.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/best-of-high-tech.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/best-of-high-tech.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/best-of-high-tech.com\/fr\/wp-json\/wp\/v2\/comments?post=1568"}],"version-history":[{"count":16,"href":"https:\/\/best-of-high-tech.com\/fr\/wp-json\/wp\/v2\/posts\/1568\/revisions"}],"predecessor-version":[{"id":2635,"href":"https:\/\/best-of-high-tech.com\/fr\/wp-json\/wp\/v2\/posts\/1568\/revisions\/2635"}],"wp:attachment":[{"href":"https:\/\/best-of-high-tech.com\/fr\/wp-json\/wp\/v2\/media?parent=1568"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/best-of-high-tech.com\/fr\/wp-json\/wp\/v2\/categories?post=1568"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/best-of-high-tech.com\/fr\/wp-json\/wp\/v2\/tags?post=1568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}