Comment améliorer la vitesse de son site web - GauthierButtez.fr

Si vous voulez plus de trafic et améliorer votre positionnement dans les moteurs de recherche, vous avez sérieusement besoin d'accélérer la vitesse de chargement de votre site. Cependant, il y a tellement de choses dans un site, comment pouvez-vous savoir ce qui le ralentit?

Bonjour tout le monde. Dans cette vidéo, je vais vous montrer comment tester la vitesse de chargement de votre site et identifier rapidement les opportunités pour réduire le temps de chargement de votre site. Nous allons utiliser comme exemple mon site "gauthierbuttez.fr" que bien sur je n’ai pas optimisé pour vous montrer des choses dans cette vidéo.

Donc le premier outil que nous allons utiliser pour mesurer la vitesse de chargement de votre site est celui de Google appelé PageSpeed Insights. Il est super facile à utiliser. Vous copiez et collez l'URL que vous souhaitez tester dans ce champs et cliquez sur le bouton "Analyser". Google va regarder le code de votre page et il va estimer sa vitesse de chargement.

Alors juste une petite remarque, cet outil ne mesure pas réellement le temps de chargement de votre page. Je vous montrerai par la suite un outil qui le fait. Cet outil analyse le code de votre page et vous recommande des améliorations spécifiques que vous pouvez faire pour accélérer votre site web.

Donc, comme vous pouvez le voir, dans notre exemple, la page a un score de vitesse 48, qui est plutôt très mauvais. Le mieux serait d'obtenir au moins 85 et le top serait un score supérieur à 90. Maintenant, regardons ce qu'il y a de plus intéressent dans cet outil. Il y a une zone appelée « résumé des Suggestions», c'est là où vous verrez les améliorations importantes et mineures que vous pouvez apporter à votre site et qui peuvent grandement améliorer votre score de vitesse.

La première chose que l’on voit, c’est « autoriser la compression ». Sachez que dans la plus part des CMS (Content Management System) vous avez des outils qui permettent de compresser votre site web afin de réduire la taille des fichiers et d’accélérer sa vitesse de chargement. Si vous n’avez pas de plugin pour compresser vote site, demandez à votre développeur.

Ensuite on voit « Eliminer les codes JavaScript et CSS qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison».

Alors la ligne de flottaison est une ligne imaginaire en dessous de laquelle le contenu de la page n'est visible que si l'on décent. Le mieux c’est de vous montrer un exemple. Vous voyez, elle est ici la ligne de flottaison. Et donc l’idée est de placer vos codes JavaScript et css à la fin de votre page pour qu’ils soient chargés en dernier dans la mesure du possible. Ou bien d’insérer le css directement dans votre page sans devoir faire appel à un fichier css externe. Mais ça c’est pour les tout petits fichiers css. De toute façon, Google Pagespeed insight vous proposera toujours des explications pour chaque alerte. Il n’y a qu’à les lire et les appliquer si c’est possible.

Ensuite on voit « mise en cache du navigateur ». Alors là c’est pareil que la compression. Le CMS de votre site, ça peut être Joomla, Wordpress, ou autre, ont très souvent une option « activer le cache ». Si ce n’est pas le cas, demandez à votre développeur. Et le principe est celui du cache. C'est-à-dire qu’au lieu de télécharger plusieurs fois la même chose à chaque fois que vous ouvrez une page d’un site, vous dite à votre site web de stocker ce qui est statique (ça peut être votre logo par exemple) sur le disque dur du visiteur. Ensuite votre site web va dire au navigateur de votre visiteur, d’aller chercher tel fichier directement sur son disque dur au lieu de le re-télécharger.

Donc ça c’était pour les recommandations majeures. Maintenant regardons les recommandations mineures :

« Réduire la taille des ressources CSS, Réduire la taille des ressources JavaScript, Réduire la taille des ressources HTML » : alors ces recommandations sont censées disparaitre si vous activez la compression de votre site. En effet tous vos fichiers CSS, JavaScripts et Html seront alors compressés.

Réduire le temps de réponse du serveur. Cela est  généralement du à un problème avec l'hébergement. Par exemple, si vous utilisez un hébergeur comme Buehost ou HostGate ou iPage ou tout autre hébergeur à quatre ou de cinq dollars par mois, vous pourriez envisager d'opter pour un hébergeur plus rapide comme Storm on Demand ou Media Temple ou WP engine. C'est un peu plus cher, mais le temps de réponse est beaucoup plus rapide. Bon bien sur, le top c’est d’avoir son serveur dédié.


Optimiser les images : Et bien oui, cela va de soi, éviter des images trop volumineuses. Pensez à utilisez des formats gif ou png et compressez les au maximum dans la mesure du possible. Dans la mesure du possible car il y a peut-être des fois ou vous avez absolument besoin d’une superbe qualité. Si c’est un site de photo par exemple, ou un background pour une landing page. Dans ces cas, la qualité de l’image est importante. Par contre vos icones de réseaux sociaux, vos flèches de navigation ou autres icones, ces images ci peuvent être compressées au maximum car la qualité d’image n’est pas aussi importante.

Donc voilà, une fois que vous avez procéder aux changements suggérés par Google Speed Insight, vous pouvez vous diriger sur webpagetest.org. Vous tapez votre url et cliquez sur Start Test. Il y a alors un robot qui va ouvrir votre page et mesurer le temps de chargement de chaque élément constituant votre page. Alors Il y a effectivement beaucoup d’information et c’est tant mieux ! Car il fait beaucoup de choses que Google ne fait pas.

Bon bien sur pour ne pas vous faire attendre dans cette vidéo, j’ai déjà fait le test. Et donc vous pourrez voir ceci.

Alors le « time to first byte » est le temps que met votre premier octet à se charger. En d’autres termes c’est combien de temps a-t-il fau à votre serveur pour commencer à envoyer des informations au navigateur. Et ici c'est un F. C’est plutôt très mauvais. Très souvent c’est du à votre serveur. Mais dès fois cela peut être du à votre code. Une fois ça m’est arrivé d’avoir un Time to first byte de 9 secondes car j’avais une ligne de code qui chargeait toutes mes Url Rewriting et mes meta tags (y en avait 30 000) depuis ma base de données.

Le Keep alive enable sera toujours A. Keep-alive est une très courte communication entre le serveur Web et le navigateur Web qui dit "vous pouvez télécharger pluss qu’un seul fichier".

Le « Compress Transfer » vous donne une idée du taux de compression de votre site.

Cela signifie que vous devriez zipper vos gros fichiers sur votre site, comme vous le faites sur votre ordinateur. Nous l’avons vu précédemment, il suffit d’activer l’option de compression sur votre site dans le back end de votre CMS.

Le « Cache static content » vous donne une idée du niveau de cache de votre site. Nous l’avons expliqué précédemment et une des solutions aussi est d’utiliser un CDN. Je vous laisserai chercher sur internet de plus amples informations sur le CDN, mais en gros, un CDN sert à stocker certains de vos fichiers sur plusieurs serveurs répartit dans le monde afin d’accélérer leur vitesse de téléchargement.

Et oui en théorie, un site à Los Angeles se chargera plus lentement dans le navigateur d’un Parisien que celui d’un habitant de Los Angeles. Car ce dernier est beaucoup plus proche du serveur.

Si vous utilisez un CDN allié à un plugin de mise en cache, vous verrez la vitesse de chargement de votre site web grandement accélérée.

Maintenant, pour les détails, voyons ce « Waterfall view » chute d’eau en anglais. Ne soyez pas intimidé par cela, vous cliquer dessus et cela vous donne une visualisation complète sur le temps qu’il a fallu à cette page pour être chargée. Chaque ligne représente un fichier de votre page (cela peut être un fichier css, JavaScript, une image ou un fichier PHP). Donc ce à quoi vous devez vraiment faire attention c‘est les longues barres, parce que plus la barre est longue, plus de temps il a fallu pour charger le fichier.

Donc, si vous descendez dans la liste, vous pouvez identifier les fichiers qui ralentissent le plus le chargement de votre page. Ici toutes les barres longues semblent être des fichiers css et JavaScript. Normal, je n’ai pas encore activé la compression.

Maintenant, une autre chose que je recommande de faire est de tester les pages internes de votre site. Il y a énormément de sites qui ont leur page d'accueil très, très optimisée, et les pages internes ne le sont pas du tout.

Enfin, vous devez tester la version mobile de votre site. Comme vous le savez il y a de plus en plus de monde qui utilisent leurs mobiles pour surfer sur internet. Et la vitesse de chargement des pages mobiles est un facteur de classement de Google. Dans Google Speedtest, vous avez déjà les résultats car il a fait les 2 tests en simultanés et sur webpagetest.org, il suffit de relancer le test sur la même page mais cette fois en sélectionnant ici dans la liste « iphone 4 ». Vous verrez très souvent des résultats similaires à votre version « desktop ».

Donc voilà. La vitesse de chargement d’une page n'est pas super excitant, et cela nécessite un peu de connaissances techniques pour interpréter les résultats et appliquer les recommandations suggérées. Mais c’est extrêmement important de le faire car d’une part, c’est un des critères SEO de Google, et d’autre part cela évite de faire fuir une partie de vos visiteurs.

Posez-vous la question : ça ne vous est jamais arrivé de laisser tomber un site trop long à charger pour aller voir un autre qui se chargeait plus rapidement ?

Voilà c’est tout pour aujourd’hui. Je vous remercie d’avoir regardé cette vidéo. Au revoir.



Pin It