Blogue Monstre

Comment optimiser la vitesse de chargement de votre site web?

Optimisation SEO et référencement Web

4 mai 2020

optimiser vitesse chargement site web
temps de chargement d'une page web

Une bonne vitesse de chargement de votre site web amènera essentiellement deux choses : une meilleure expérience utilisateur et un meilleur référencement naturel!

Ça va de soi pour l’expérience utilisateur, plus c’est rapide mieux c’est. Rares sont les personnes qui attendront 10 secondes avant qu’une page finisse de se télécharger, ils vont avoir quitté bien avant ça pour aller chez un compétiteur. C’est frustrant d’attendre, plus le site web est lent, plus vous aurez un taux de rebond élevé et un taux de conversion bas. Aux yeux de Google, un taux de rebond élevé est synonyme de site web ne répondant pas aux besoins de son visiteur, ce qui vient à vous pénaliser sur les moteurs de recherche.

Un autre facteur important est que la vitesse de chargement de votre site web vous aide à obtenir un meilleur classement dans votre référencement parce que c’est l’un des critères que Google utilise dans son algorithme. Comme on dit, une pierre deux coups! Plus votre site est performant, plus ça pèsera dans la balance pour vous faire sortir dans le haut des recherches de votre secteur d’activité.

Je vous propose aujourd’hui plusieurs conseils et astuces pour optimiser la vitesse de chargement de votre site web. Bonne lecture!

Avoir un hébergeur web de confiance

La base première pour optimiser la vitesse de chargement d’un site web est d’être supporté par un serveur d’hébergement performant. C’est tentant de prendre un hébergement à 5$/mois, mais c’est une très mauvaise idée! 

Les hébergeurs qui offrent ce type de forfait doivent avoir un volume de clients énorme par serveur afin de réussir à être rentable et que ce serveur coûte le moins cher possible. Toute cette masse de clients compétitionne pour les ressources du serveur, ce qui cause la plupart du temps des goulots d’étranglement sur la mémoire vive ou sur les processeurs. Votre site web devra donc attendre son tour, ce qui causera des délais inutiles pour vos visiteurs.

Assurez-vous que votre hébergeur utilise des serveurs optimisés, sécurisés et qui ne sont pas remplis à pleine capacité. La performance du serveur sur lequel votre site se trouvera aura un impact majeur sur l’expérience et la conversion en clients de vos visiteurs.

L’avantage de choisir L’Effet Monstre pour héberger votre site web est que nous avons un souci de performance pour votre site et que notre modèle d’affaires n’est pas basé dans le but de remplir des serveurs au maximum. Contrairement à un hébergeur standard, nous avons aussi le savoir-faire pour maintenir et améliorer la performance de votre site au niveau programmation, pas juste au niveau du serveur. Vous ne vivrez donc pas la situation où vous avez un problème et que l’hébergeur vous dit que c’est la faute de l’agence et qu’ensuite l’agence réponde que c’est la faute de l’hébergeur. Vous aurez la tranquillité d’esprit! 

Réduisez le poids de vos images!

Une des causes de ralentissement les plus répandues est sans aucun doute la lourdeur des images! Les images sont incontournables dans l’esthétique d’un site web, mais elles peuvent avoir un impact majeur sur l’expérience utilisateur lorsqu’elles ne sont pas traitées adéquatement. 

Voici des trucs faciles et rapides pour optimiser vos images : 

  • Si vous n’avez pas besoin de fond transparent, choisissez toujours l’extension .jpg au lieu de .png. Vos images seront moins lourdes.
  • Réduisez au maximum les dimensions de vos images. Vous n’avez pas besoin d’une image à 5000px par 5000px pour la mettre sur votre site web. Prenez connaissance des dimensions que l’image prend sur le site et réduisez-la pour qu’elle soit un peu plus grande que l’espace qu’elle prend sur le site. 
  • À titre indicatif, on vise toujours un poids au maximum de 1 mo (1024 ko) lorsque l’image est plein écran (Exemple : un slider sur une page d’accueil).

Avec tous ces conseils, vos images seront beaucoup moins lourdes que si vous les ajoutiez directement sur votre site! Je vous conseille d’utiliser Photoshop comme logiciel pour faire ces étapes. Si vous utilisez un outil offert directement dans votre CMS par exemple, la qualité de vos images pourrait être compromise, soyez donc prudent et vérifiez le résultat final!

Mise en cache de vos éléments!

Un système de mise en cache mémorise ou emmagasine temporairement certains éléments répétitifs du site web pour permettre un chargement plus rapide. Il y a plusieurs types de caches que vous pouvez utiliser en parallèle pour accélérer le chargement de votre site web.

Les serveurs sont en effet optimisés pour fournir rapidement des fichiers aux visiteurs, mais les requêtes qui nécessitent d’accéder à la base de données sont extrêmement lentes en comparaison. Un exemple d’une telle requête est le contenu texte d’une page d’un site web qui a été saisi au travers d’un CMS comme WordPress. C’est inutile de toujours demander à la base de données le contenu de la page puisqu’il ne change pas. Le système de cache va donc garder en mémoire le contenu de la page et le servir directement aux visiteurs sans passer par l’action lente de se connecter à la base de données.

Pour simplifier le plus possible, on peut comparer ça à la mémoire humaine. Quand vous savez que 6 x 6 fait 36, vous n’avez pas besoin de refaire la multiplication dans votre tête à chaque fois que quelqu’un vous le redemande, vous avez mémorisé la réponse. C’est le même principe avec une cache, une fois qu’elle a mémorisé les éléments d’une page web, ils n’ont plus besoin d’être téléchargés encore et encore. 

Deux types de caches s’offrent à vous pour réduire les requêtes à la base de données, une qui dépend du serveur sur lequel vous êtes et l’autre qui dépend des technologies utilisées par votre site web. Par exemple, nos serveurs vous permettent d’utiliser la technologie Litespeed qui accélèrera votre site web sans même toucher à quoi que ce soit sur le site, puisque la mise en cache se fait silencieusement. L’autre méthode est de travailler avec des extensions ou librairies qui transformeront le contenu dynamique de votre site en contenu statique ( voir exemple pour WordPress plus bas ). Cette méthode demande plus de travail et doit possiblement être personnalisée pour vos besoins par un expert.

Maintenant que les requêtes ont été optimisées en mises en cache, il est temps de s’attaquer aux fichiers statiques de votre site, soit les fichiers d’images, CSS, HTML, Javascript, etc. Même si les serveurs sont optimisés pour servir des fichiers, c’est encore plus rapide de demander à vos utilisateurs d’enregistrer les fichiers téléchargés et de ne plus jamais les redemander. Cela se fait à l’aide des “Expire Headers” dans votre fichier .htaccess, par exemple : 

# BEGIN Expire headers
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 7200 seconds”
ExpiresByType image/jpg “access plus 2592000 seconds”
ExpiresByType image/jpeg “access plus 2592000 seconds”
ExpiresByType image/png “access plus 2592000 seconds”
ExpiresByType image/gif “access plus 2592000 seconds”
AddType image/x-icon .ico
ExpiresByType image/ico “access plus 2592000 seconds”
ExpiresByType image/icon “access plus 2592000 seconds”
ExpiresByType image/x-icon “access plus 2592000 seconds”
ExpiresByType text/css “access plus 2592000 seconds”
ExpiresByType text/javascript “access plus 2592000 seconds”
ExpiresByType text/html “access plus 7200 seconds”
ExpiresByType application/xhtml+xml “access plus 7200 seconds”
ExpiresByType application/javascript A2592000
ExpiresByType application/x-javascript “access plus 2592000 seconds”
ExpiresByType application/x-shockwave-flash “access plus 2592000 seconds”
</IfModule>
# END Expire headers

Ces configurations indiquent aux navigateurs de vos visiteurs de ne plus demander un fichier donné une fois qu’il a été téléchargé tant que l’expiration n’est pas passée. Il est très important de faire attention à ces configurations parce que si vous modifiez votre fichier, il est possible que vos visiteurs voient encore l’ancienne version du fichier. Une des stratégies pour s’assurer de ne pas rencontrer un tel problème est de changer le nom de votre fichier si vous faites une modification.

Finalement, l’utilisation d’un CDN (Content Delivery Network) permet de servir les fichiers statiques plus rapidement que votre serveur d’hébergement, puisque ces réseaux sont spécialisés et optimisés pour cette fonction. Sommairement, un CDN demande un fichier à votre serveur une seule fois, puis le sert à vos visiteurs pour vous. Cela a pour effet de réduire au maximum les requêtes sur votre site web. Même si vous avez 1000 visiteurs qui téléchargent l’image xyz.jpg, une seule requête sera faite sur votre serveur et le CDN gèrera les 999 autres requêtes par lui-même!

La mise en cache de votre site web est une étape importante de l’optimisation de sa performance. Elle comporte plusieurs stratégies à mettre en place en parallèle qui doivent être ajustées à votre réalité. N’hésitez pas à nous contacter en cas de besoin.

Réduisez le poids de vos fichiers!

Pour améliorer la performance de votre site web, il faut aussi passer par le code! Pour considérablement réduire le poids de vos fichiers, il est important de mettre à profit la compression “Gzip” ou “Brotli” de votre hébergement web et de minifier vos fichiers CSS, HTML et Javascript.

La minification sert à retirer tout ce qui est superflu dans le code : les espaces, les commentaires, les noms de variables, etc., ce qui minimise le poids des fichiers du site web. Ces données sont nécessaires dans la phase de développement pour permettre une lecture fluide du code, mais les ordinateurs de vos visiteurs n’ont pas besoin d’avoir des fichiers avec un code «lisible pour des humains».

Il y a plusieurs manières de minifier les fichiers de votre site, la plus simple étant probablement d’utiliser un CDN (Content Delivery Network) tel que Cloudflare. L’avantage d’un tel service est que vous n’avez qu’à activer l’option de minifier les fichiers du site et le tour est joué. Ça aura des répercussions positives sur la performance, la sécurité et la fiabilité du site web. 

La compression des fichiers cible les répétitions et les remplace par un pointeur qui prend moins d’espace. Nos serveurs offrent les deux compressions les plus utilisées, soient “gzip” et “brotli” qui est encore plus performant. Le résultat est le même que lorsque vous utilisez “WinRar” ou “WinZip” ( ou encore 7-zip pour les utilisateurs Mac ), soit que les fichiers une fois compressés prennent significativement moins d’espace et donc se transfèrent beaucoup plus vite à vos visiteurs.

Les deux méthodes vont aider à alléger vos fichiers et accélérer l’affichage de votre site, nous vous conseillons donc de les mettre toutes deux en pratique. Il est important de choisir un bon hébergeur web avec des serveurs à jour qui vous permet d’utiliser ces techniques.

Augmenter la vitesse de votre site web WordPress

Sachant que WordPress est utilisé par plus du tiers des sites web mondialement, il est pertinent de vous donner quelques trucs additionnels pour optimiser le temps de  chargement d’une page web! La première étape est de faire les mises à jour de WordPress, les fonctionnalités incluses et la version PHP utilisée par la suite pour maintenir les améliorations à jour. Une fois fait, beaucoup d’outils et d’actions vont aider au chargement du site web.

C’est certain que la meilleure action à prendre est de faire affaire avec des professionnels pour ne rien briser dans le site web.  Dans le cas où vous souhaiteriez tenter l’expérience par vous-même, n’oubliez pas de faire une sauvegarde de votre site web avant de toucher à quoi que ce soit. En cas de doute ou d’impasse, n’hésitez pas à nous demander conseil, il nous fera plaisir de vous accompagner ou encore de faire le ménage pour vous dans les règles de l’art!

Supprimer les extensions inutiles

Selon notre expérience, la plupart des sites WordPress que nous prenons en charge pour des clients ont plus d’extensions d’installées que nécessaire. Cela a un impact sur la performance du site! Faites un ménage régulièrement de vos extensions pour supprimer celles que vous n’utilisez plus.

Avant de supprimer une extension, assurez-vous d’abord qu’elle n’est pas utilisée et d’avoir fait une sauvegarde de votre site web. Une bonne manière de confirmer que l’extension est inutile est de la désactiver et puis faire le tour du site pour s’assurer que tout fonctionne parfaitement. Afin d’éviter les mauvaises surprises, nous vous suggérons de laisser l’extension désactivée quelques jours puis de la supprimer ensuite si aucun problème n’a été découvert.

Supprimez aussi du même coup vos thèmes inutiles. Vous n’avez besoin que de votre thème principal (thème Parent et thème Child), vous pouvez supprimer les autres. Avec le téléchargement de votre thème se transfèreront aussi des pages inutiles, faites le tour pour supprimer celles non nécessaires pour garder seulement celles que vous utilisez.

Pour bien faire, faites une recherche sur Google en inscrivant «site:votredomaine.com» pour avoir toutes les pages répertoriées sur Google de votre site. Vous serez peut-être surpris des pages que vous y trouverez !

Extensions de mise en cache web

Nos serveurs sont équipés de la technologie Litespeed qui est un cache serveur ultra performant pour les sites utilisant le langage PHP. Nos clients peuvent donc utiliser l’extension WordPress gratuite LSCache pour un maximum de performance.

WP Rocket est une extension de mise en cache très performante, au coût annuel d’environ 50$ USD. Les configurations de base sont assez simples à mettre en place et il est possible d’ajuster plusieurs options plus complexes pour maximiser la performance du site. Les extensions W3 Total Cache et WP SuperCache sont des alternatives gratuites très performantes. La mise en place et l’optimisation d’une extension de caching peuvent être complexes pour certains. Il suffit de faire affaire avec des gens qui s’y connaissent pour bien l’installer et le configurer. Si vous avez besoin d’aide, nous sommes toujours disponibles pour vous. 

Extensions d’optimisation d’images

Pour réduire le poids de vos images sur WordPress, on conseille d’utiliser des extensions comme Imagify ou Optimole. Les deux ont un forfait gratuit qui peut faire le travail, en plus d’être facile à utiliser. Le poids des images sera réduit de 50% à 80% en moyenne. N’oubliez pas de vérifier le résultat après le traitement, parfois ces plugins compressent trop vos images et réduisent la qualité de celles-ci.

Les outils pour mesurer le temps de chargement d’une page web

Avec un peu d’observation, nous sommes capables de voir lorsqu’un site est lent, mais il existe plusieurs outils très complets pour approfondir cette observation et pour vous donner des pistes pour optimiser la vitesse de votre site web.

GTmetrix est un outil complet très facile à utiliser et à comprendre. Lorsque vous analysez votre site, vous allez voir en ordre de priorité les recommandations à faire sur votre site web. En cliquant sur une recommandation, vous allez avoir les détails, ça vous dirigera pour faire les corrections.

Vous allez aussi recevoir des indicatifs sur la vitesse de chargement de votre site web comme le «PageSpeed score», le «Yslow Score» et le temps de chargement de votre site web (Fully loaded time). GTmetrix donne aussi les moyennes de ces indicatifs pour que vous puissiez vous comparer.

gt metrix

Le deuxième outil est le Google Page Speed Insight qui est très semblable à GTmetrix. Le petit (gros) plus de Google Page Speed Insight c’est qu’il analyse aussi la performance sur mobile!

Avec Google Page Speed Insight, vous allez avoir plus de détails avec vos recommandations, vous aurez aussi une estimation des économies en termes de temps attachée à la recommandation.

google page speed

Un autre point positif de cet outil est qu’il nous donne aussi nos bons coups, donc vous pouvez voir tout ce qui aide à améliorer la performance de votre site web!

vitesse de chargement seo

Les scores donnés par ces sites doivent être interprétés et analysés, sans être pris au pied de la lettre. Parfois l’effort nécessaire pour faire augmenter son score ne vaut pas la chandelle. N’hésitez pas à nous contacter si vous avez des questions concernant le score de votre site, nous trouverons avec vous les problèmes qui valent la peine d’être redressés et qui auront un impact réel sur la performance de votre site.

Conclusion

Vous avez maintenant la recette secrète pour optimiser la vitesse de votre site web! C’est certain que nous conseillons de faire ce travail accompagné par un professionnel pour maximiser les résultats. Ça peut rapidement devenir complexe sans les connaissances nécessaires.

Si votre site web est lent et que vous avez besoin d’un coup de main, n’hésitez pas à contacter l’Effet Monstre. Nous vous garantissons d’augmenter la performance et l’expérience client de vos visiteurs. C’est notre expertise!

Je veux améliorer la vitesse de mon site web!

Je veux améliorer la vitesse de mon site web!

Afin d'entamer le processus de soumission pour votre projet numérique, veuillez remplir le formulaire ci-bas.

Un membre de notre équipe se fera un plaisir de vous contacter par la suite.

Je veux être contacté par l'Effet Monstre

Je veux être contacté par l'Effet Monstre

Afin que l’on puisse discuter de vos projets ainsi que de nos services avec vous, bien vouloir inscrire vos coordonnées ainsi que le moment le plus opportun pour vous contacter dans le formulaire ci-dessous.

Un membre de notre équipe vous rejoindra dans la plage horaire choisie.

Quels sont les meilleurs moments pour vous contacter?