Par exemple, regardez l’exp\u00e9rience suivante. J’ai men\u00e9 une recherche dans Google sur le mot cl\u00e9 \u00ab\u00a0table en bois massif\u00a0\u00bb. J’ai recueilli les 9 premiers r\u00e9sultats de la recherche, ainsi que ceux de la position 101 \u00e0 107. J’ai ensuite utilis\u00e9 PageSpeed Insights, l’outil officiel de Google sur lequel nous reviendrons plus tard, pour mesurer la vitesse de chacun de ces sites Internet. Et vous pourrez constater par vous-m\u00eame que les sites les mieux positionn\u00e9s ne sont pas les plus rapides… Loin de l\u00e0 m\u00eame, la meilleure note (69) \u00e9tant d\u00e9tenue par un site plac\u00e9 en 104e place et la pire note (13) l’est pour un site en 5e place.<\/p>\n\n\n\n La deuxi\u00e8me chose \u00e0 retenir est qu’un site trop lent fera fuir vos visiteurs.<\/strong> On consid\u00e8re qu’une page web a un affichage lent lorsqu’elle prend plus de 3 secondes pour se charger.<\/p>\n\n\n\n En conclusion, votre but va \u00eatre de maintenir le chargement de toutes les pages de votre site web en dessous de 3 secondes.<\/p>\n\n\n\n Il existe de nombreux outils de mesure de vitesse de chargement d’un site web sur Internet, certains \u00e9tant plus pertinents que d’autres. Et si vous menez quelques recherches, vous retomberez souvent sur le m\u00eame : le PageSpeed Insights de Google<\/strong>. C’est d’ailleurs cet outil que j’ai utilis\u00e9 dans l’exp\u00e9rience du paragraphe pr\u00e9c\u00e9dent. En effet, le PageSpeed Insights fait figure de r\u00e9f\u00e9rence car tout d’abord il est \u00e9dit\u00e9 par le Dieu Google lui-m\u00eame, et qu’il est en effet tr\u00e8s complet et tr\u00e8s souvent mis \u00e0 jour.<\/p>\n\n\n\n Mais c’est clairement un outil pour sp\u00e9cialistes et je d\u00e9conseille tr\u00e8s vivement<\/strong> aux d\u00e9butants de l’utiliser. Les indications fournies sont tout simplement incompr\u00e9hensibles pour le commun des mortels. Jugez par vous-m\u00eame :<\/p>\n\n\n\n \u00c7a parle de \u00ab\u00a0Signaux Web essentiels\u00a0\u00bb, de \u00ab\u00a0First Contentful Paint\u00a0\u00bb, de \u00ab\u00a0First Input Delay\u00a0\u00bb, de \u00ab\u00a0Largest Contentful Paint\u00a0\u00bb ou encore de \u00ab\u00a0Cumulative Layout Shift\u00a0\u00bb… Il se pourrait qu’un jour j’\u00e9crive un article complet sur les mesures avanc\u00e9es de l’exp\u00e9rience utilisateur d’un site web, mais en attendant voici d\u00e9j\u00e0 un lien pour ceux qui souhaiteraient en savoir plus sur les Core Web Vitals<\/a>.<\/p>\n\n\n\n De plus, certaines suggestions de PageSpeed Insights sont tout bonnement impossibles \u00e0 appliquer (ceux qui se sont d\u00e9j\u00e0 frott\u00e9s \u00e0 la consigne \u00ab\u00a0\u00c9liminez les ressources qui bloquent le rendu\u00a0\u00bb savent de quoi je parle…).<\/p>\n\n\n\n Souvenez-vous, notre objectif n’est pas de cr\u00e9er la formule 1 des sites web, mais de faire passer le temps de chargement des pages de votre site Internet sous la barre des 3 secondes.<\/p>\n\n\n\n Alors je vous conseille un seul outil : le DevTools<\/strong> int\u00e9gr\u00e9 dans le navigateur web Google Chrome. Le nom fait peut-\u00eatre peur, mais je vous rassure, nous n’allons utiliser que des fonctions tr\u00e8s simples.<\/p>\n\n\n\n Pour acc\u00e9der au DevTools, ouvrez Google Chrome, tapez sur F12 et vous le verrez appara\u00eetre sur une partie de la fen\u00eatre :<\/p>\n\n\n\n Dans le DevTools, s\u00e9lectionnez l’onglet \u00ab\u00a0Network\u00a0\u00bb, et ici seules deux choses vont nous int\u00e9resser :<\/p>\n\n\n\n Le temps de chargement se voit en bas \u00e0 droite de la fen\u00eatre DevTools :<\/p>\n\n\n\n Et pour voir si un \u00e9l\u00e9ment ralentit l’affichage de la page web, il suffit de regarder le graphique \u00ab\u00a0cascade\u00a0\u00bb et d’y d\u00e9celer une barre de chargement anormalement longue, ou un carr\u00e9ment un blocage (\u00e9l\u00e9ment mis en rouge, souvent une image qui n’existe plus par exemple) :<\/p>\n\n\n\n Voil\u00e0, maintenant qu’on a un outil pour mesurer facilement le temps de chargement d’une page web, passons \u00e0 la r\u00e9solution des erreurs les plus fr\u00e9quentes.<\/p>\n\n\n\n Je pense que vous pouvez me croire quand je dis que j’en vois passer des sites web, vu que c’est la base de mon m\u00e9tier… Et je vois la m\u00eame erreur revenir inlassablement, inexorablement : les images trop grandes et trop lourdes<\/strong>. C’est classique : vous prenez par exemple une photo avec votre smartphone, et vous l’int\u00e9grez tel quel dans votre page web. Ou bien encore vous t\u00e9l\u00e9chargez une photo haute r\u00e9solution d’une banque d’images, que vous placez entre deux paragraphes de votre billet de blog, toujours sans l’avoir optimis\u00e9e. Sauf que l’image fait 3 Mo ! C’est \u00e9norme !<\/p>\n\n\n\n Pour vous donner une id\u00e9e, une \u00ab\u00a0grande\u00a0\u00bb image sur une page web ne doit pas d\u00e9passer quelques centaines de kilo-octets. Et en moyenne, une image de taille raisonnable dans un article de blog ne d\u00e9passe pas quelques dizaines de kilo-octets. Ayez piti\u00e9 des internautes qui payent leur acc\u00e8s \u00e0 Internet \u00e0 la quantit\u00e9 de donn\u00e9es…<\/p>\n\n\n\n Ce qu’il suffit de faire : redimensionnez et compressez les images avant de les envoyer dans votre h\u00e9bergement web. Pour cela il faut utiliser un \u00e9diteur d’images. Le plus connu est Photoshop, mais il est payant ; alors je vous conseille l’alternative open source gratuite Gimp<\/a>.<\/p>\n\n\n\n R\u00e9duisez la taille de l’image pour qu’elle corresponde au plus pr\u00e8s de la dimension qui lui sera allou\u00e9e dans la page web. Dans l’absolu, le mieux est que sa taille soit exactement celle qui s’affichera, mais dans la pratique, vous pouvez \u00eatre l\u00e9g\u00e8rement au dessus, pas de probl\u00e8me. Par exemple, si dans la page web l’image doit avoir une taille visible de 500 x 400 px, alors redimensionnez la \u00e0 ces dimensions.<\/p>\n\n\n\n Pour redimensionner une image dans Gimp, allez dans \u00ab\u00a0Image\u00a0\u00bb puis \u00ab\u00a0\u00c9chelle et taille de l’image\u00a0\u00bb :<\/p>\n\n\n\n Une fois redimensionn\u00e9e, exportez votre image au format d\u00e9sir\u00e9. Si vous l’enregistrez au format JPG, il faudra alors r\u00e9gler la compression, en g\u00e9n\u00e9ral entre 70 et 90% selon la qualit\u00e9 requise.<\/p>\n\n\n\n Enfin il ne vous reste plus qu’\u00e0 v\u00e9rifier que le poids de l’image est optimis\u00e9e (comme je vous l’ai dit quelques dizaines de kilo-octets g\u00e9n\u00e9ralement, quelques centaines pour les grandes images servant de couverture).<\/p>\n\n\n\n Si vous avez un site WordPress, sachez qu’il existe des plugins sp\u00e9cialis\u00e9s dans le redimensionnement, la compression et l’optimisation automatiques des images comme par exemple Smush<\/a>, reSmush.it<\/a> (son alternative gratuite), EWWW<\/a> ou encore Imagify<\/a> (de l’\u00e9diteur du tr\u00e8s connu WP Rocket). Mais \u00e0 moins que vous ne g\u00e9riez un webzine ou un gros site e-commerce, je vous recommande la m\u00e9thode \u00ab\u00a0manuelle\u00a0\u00bb avec Gimp.<\/p>\n\n\n\n Si vous utilisez le logiciel Discourse pour votre forum, bonne nouvelle : depuis la version 2.8.0.beta4, le redimensionnement des images est r\u00e9alis\u00e9 \u00e0 la vol\u00e9e c\u00f4t\u00e9 client, avant envoi sur le serveur. Vous pouvez litt\u00e9ralement prendre une photo avec votre smartphone et l’envoyer directement sans retouche dans votre message !<\/p>\n\n\n\n Deuxi\u00e8me cause de lenteur d’un site Internet la plus courante : votre page web comporte un \u00ab\u00a0\u00e9l\u00e9ment\u00a0\u00bb qui ralentit, voire qui bloque compl\u00e8tement son chargement.<\/p>\n\n\n\n Cet \u00e9l\u00e9ment est g\u00e9n\u00e9ralement une image ou un script (interne ou externe).<\/p>\n\n\n\n Pour d\u00e9tecter cela, il vous suffit d’analyser la cascade de chargement obtenue dans le DevTools. Je vous remets la capture d’\u00e9cran que nous avons d\u00e9j\u00e0 vue pr\u00e9c\u00e9demment :<\/p>\n\n\n\n Si l’\u00e9l\u00e9ment est juste ralentissant, alors vous verrez une longue barre de chargement. Si c’est une image, il suffit de l’optimiser (voir paragraphe pr\u00e9c\u00e9dent). Si c’est un script, notamment si c’est un script externe, alors c’est un peu plus d\u00e9licat. Commencez par v\u00e9rifier que vous avez r\u00e9ellement besoin de ce code, car dans le cas contraire, vous pouvez tout simplement supprimer son appel. Sinon il faudra voir avec votre webmaster.<\/p>\n\n\n\n Si l’\u00e9l\u00e9ment est bloquant, il sera mis en rouge par DevTools. Il peut s’agir par exemple d’une image manquante, d’un lien vers un script qui n’existe pas ou tout simplement d’une erreur dans le lien lui-m\u00eame.<\/p>\n\n\n\n Il est imp\u00e9ratif de corriger tout \u00e9l\u00e9ment bloquant ou ralentissant.<\/p>\n\n\n\n Ce paragraphe ne vous concerne que si votre site web tourne sur un CMS comme WordPress. Dans le cas contraire, vous pouvez directement passer au point suivant.<\/em><\/p>\n\n\n\n C’est encore une erreur que je vois malheureusement trop souvent : le CMS est surcharg\u00e9 par l’installation de trop de plugins. Il est vrai qu’il est tentant de c\u00e9der \u00e0 la douce sir\u00e8ne des quelques 60 000 extensions WordPress gratuites<\/a>… Autant de fonctionnalit\u00e9s promettant de booster et de rendre votre site web populaire… Mais r\u00e9sistez !!!<\/p>\n\n\n\n Installez le minimum de plugins possible.<\/p>\n\n\n\n Vous savez bien ce qu’il se passe si vous installez trop de logiciels sur votre PC : ce dernier va commencer \u00e0 \u00ab\u00a0ramer\u00a0\u00bb, voire m\u00eame \u00e0 planter. Et bien c’est pareil avec les plugins. Si vous en installez trop :<\/p>\n\n\n\n \u00c9vitez les plugins \u00ab\u00a0gadget\u00a0\u00bb, \u00e9vitez tout ce dont vous pouvez vous passer, ne gardez que l’essentiel. Vous seriez surpris de savoir que notre propre site web, Simafri, n’utilise qu’une poign\u00e9e d’extensions soigneusement s\u00e9lectionn\u00e9es et pr\u00e9alablement test\u00e9es…<\/p>\n\n\n\n Qu’est-ce qu’un cache ?<\/p>\n\n\n\n Lorsque vous demandez l’affichage d’une page web, le serveur qui va vous l’envoyer doit au pr\u00e9alable la \u00ab\u00a0calculer\u00a0\u00bb, c’est-\u00e0-dire ex\u00e9cuter tous les scripts pour en d\u00e9terminer le r\u00e9sultat final. Ces calculs prennent un certain temps. Or lorsque plusieurs personnes demandent la m\u00eame page web dans une m\u00eame p\u00e9riode, g\u00e9n\u00e9ralement la page n’a pas \u00e9t\u00e9 modifi\u00e9e entre temps. Il est donc inutile de la \u00ab\u00a0recalculer\u00a0\u00bb \u00e0 chaque fois. Un syst\u00e8me de cache va mettre en m\u00e9moire le r\u00e9sultat du premier calcul ex\u00e9cut\u00e9 et renvoyer la m\u00eame page \u00e0 chaque demande, ce qui \u00e9conomise du temps, et donc acc\u00e9l\u00e8re le chargement du site web.<\/strong><\/p>\n\n\n\n Cr\u00e9er un syst\u00e8me de cache n’est bien s\u00fbr pas \u00e0 la port\u00e9e d’un non-sp\u00e9cialiste. Et si votre site web n’a pas \u00e9t\u00e9 construit sur la base d’un CMS (Content Management System<\/em> comme WordPress), alors il faudra vous adresser \u00e0 votre informaticien pour qu’il en cr\u00e9e un.<\/p>\n\n\n\n Par contre, si votre site web tourne sur un framework (disons un logiciel pour faire simple) comme WordPress, alors il existe des plugins que vous pouvez installer et param\u00e9trer. Les plus connus sont :<\/p>\n\n\n\n Je travaille sur WordPress depuis 2002, et j’ai eu largement le temps de tous les essayer. Ils fonctionnent tous bien, acc\u00e9l\u00e9rant consid\u00e9rablement la vitesse de votre site web, chacun ayant ses avantages et inconv\u00e9nients. A vous de voir lequel r\u00e9pond le mieux \u00e0 votre cas.<\/p>\n\n\n\n De plus, ces plugins vont vous apporter d’autres optimisations :<\/p>\n\n\n\n Je ne rentre pas dans le d\u00e9tail de ces optimisations car elles d\u00e9passent le cadre de cet article. Sachez simplement qu’elles sont l\u00e0, en bonus \ud83d\ude42<\/p>\n\n\n\n Qu’est-ce qu’un CDN ?<\/p>\n\n\n\n La distance entre l’ordinateur du visiteur et le serveur h\u00e9bergeant le site web joue sur le temps de chargement de la page. Il est \u00e9vident que plus le visiteur est loin de votre datacenter, plus les donn\u00e9es prendront de temps \u00e0 arriver, non seulement \u00e0 cause de la distance bien s\u00fbr, mais \u00e9galement \u00e0 cause de la multiplication des relais Internet. Un CDN (Content Delivery Network<\/em>) est un r\u00e9seau de serveurs interm\u00e9diaires, lesquels vont h\u00e9berger certains \u00e9l\u00e9ments de votre site web, g\u00e9n\u00e9ralement les images et les scripts, et qui sont situ\u00e9s plus pr\u00e8s du visiteur.<\/strong> Ainsi, certains \u00e9l\u00e9ments de votre page vont \u00eatre envoy\u00e9s par un serveur proche de l’internaute et non de votre serveur d’origine, ce qui optimise consid\u00e9rablement la vitesse de votre site web.<\/p>\n\n\n\n Il existe plusieurs services proposant des CDN, la majorit\u00e9 \u00e9tant fiable et efficace. Personnellement je vous conseille Cloudflare<\/a>. Je l’utilise depuis de nombreuses ann\u00e9es, simple et gratuit.<\/p>\n\n\n\n Une fois que vous aurez install\u00e9 Cloudflare, l’am\u00e9lioration de la vitesse de chargement de votre site web sera flagrante et indiscutable…<\/p>\n\n\n\n De plus, de la m\u00eame mani\u00e8re que les plugins de cache apportent des \u00ab\u00a0bonus\u00a0\u00bb, un CDN apporte \u00e9galement son lot d’avantages et de fonctionnalit\u00e9s suppl\u00e9mentaires :<\/p>\n\n\n\n Si vous b\u00e9n\u00e9ficiez d’un h\u00e9bergement web mutualis\u00e9<\/a> ou d’un prestataire qui s’occupe de votre VPS<\/a> \/ serveur d\u00e9di\u00e9, alors la question ne se pose pas. Vous n’avez pas \u00e0 vous occuper des mises \u00e0 jour de votre h\u00e9bergement. Dans le cas contraire, faites-le. Les mises \u00e0 jour des serveurs et de leurs applications (Apache \/ Nginx, PHP, MySQL) apportent non seulement des corrections de failles de s\u00e9curit\u00e9, mais \u00e9galement des optimisations de vitesse de calcul.<\/p>\n\n\n\n Soyez notamment vigilant sur la version PHP que vous utilisez (si votre site tourne sur PHP bien s\u00fbr). Ce langage est en effet tr\u00e8s r\u00e9guli\u00e8rement optimis\u00e9, et les gains en vitesse d’une version \u00e0 l’autre sont remarquables.<\/p>\n\n\n\n Ensuite, maintenez toujours votre site web \u00e0 jour<\/strong>. Vous \u00e9viterez non seulement d’\u00eatre victime de l’exploitation d’une faille de s\u00e9curit\u00e9 par un script kiddy, mais votre site Internet gagnera aussi en vitesse de chargement (optimisation des scripts, adaptation aux nouvelles versions de PHP, etc.).<\/p>\n\n\n\n Lorsque j’ai men\u00e9 mes recherches avant de r\u00e9diger cet article (\u00e0 ce sujet n’h\u00e9sitez pas \u00e0 consulter mon tutoriel sur comment \u00e9crire un article de blog<\/a>), j’ai \u00e9t\u00e9 surpris de voir que plusieurs \u00ab\u00a0sp\u00e9cialistes\u00a0\u00bb pla\u00e7aient en premi\u00e8re place des optimisations la souscription \u00e0 un h\u00e9bergement plus puissant.<\/p>\n\n\n\n Parmi nos services figurent des offres d’h\u00e9bergements web<\/a>, certaines entr\u00e9e de gamme, d’autres haut de gamme<\/a>, il y a en a pour tous les besoins et tous les budgets. Pourtant si un client nous sollicite pour l’aider \u00e0 am\u00e9liorer la vitesse de son site web, nous lui recommandons rarement de basculer vers une offre sup\u00e9rieure… Tout simplement parce que \u00e7a serait le pousser \u00e0 d\u00e9penser plus, alors qu’en travaillant sur les points pr\u00e9c\u00e9demment \u00e9voqu\u00e9s, il obtiendra d\u00e9j\u00e0 un site bien plus rapide que la moyenne.<\/p>\n\n\n\n Alors quand faut-il envisager de souscrire \u00e0 un h\u00e9bergement web plus puissant, voire m\u00eame \u00e0 un VPS<\/a> ou un serveur d\u00e9di\u00e9 ? Deux facteurs :<\/p>\n\n\n\n Si vous avez un site web de type \u00ab\u00a0vitrine\u00a0\u00bb, c’est-\u00e0-dire qui pr\u00e9sente votre activit\u00e9, incluant \u00e9ventuellement un blog, et g\u00e9n\u00e9rant moins d’un millier de visiteurs par jour, un simple h\u00e9bergement web mutualis\u00e9<\/a> suffira ! Y compris un h\u00e9bergement web gratuit<\/a> ! M\u00eame un petit site e-commerce pourra se satisfaire d’un h\u00e9bergement web entr\u00e9e de gamme.<\/p>\n\n\n\n Si vous g\u00e9rez un annuaire en ligne avec un syst\u00e8me d’inscription automatis\u00e9 et g\u00e9n\u00e9rant plusieurs milliers de visites par jour, alors oui la question d’un h\u00e9bergement web plus puissant ou d’un VPS<\/a> peut se poser.<\/p>\n\n\n\n Avant de foncer sur un h\u00e9bergement plus cher, commencez par bien appliquer les optimisations pr\u00e9c\u00e9demment d\u00e9crite dans cet article.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.simafri.com\/fr\/wp-content\/uploads\/2021\/08\/vitesse-site-web-positionnement-1.png\")
<\/a><\/figure><\/li><\/a><\/figure><\/li><\/a><\/figure><\/li><\/ul>Comment tester la vitesse d’un site web<\/h2>\n\n\n\n
<\/a><\/a><\/a><\/a>Optimisez la vitesse de votre site web en 7 \u00e9tapes<\/h2>\n\n\n\n
1. Les images<\/h3>\n\n\n\n
2. El\u00e9ments bloquants ou ralentissants<\/h3>\n\n\n\n
<\/a>3. Ne surchargez pas votre CMS<\/h3>\n\n\n\n
4. Utilisez un cache<\/h3>\n\n\n\n
5. Utilisez un CDN<\/h3>\n\n\n\n
6. Maintenez votre serveur et votre site \u00e0 jour<\/h3>\n\n\n\n
7. Quant \u00e0 votre h\u00e9bergement web<\/h3>\n\n\n\n
En conclusion<\/h2>\n\n\n\n