Conseils pour optimiser la vitesse de votre site web
La vitesse de votre site web
La vitesse et les performances des pages web sont très importantes pour l’expérience de l’utilisateur. Si votre site est trop lent, vous perdrez non seulement des visiteurs, mais aussi des clients potentiels. Les moteurs de recherche comme Google tiennent compte de la vitesse d’un site web dans le classement des recherches. Chaque milliseconde compte.
Voici quelques conseils généraux d’optimisation de sites web pour améliorer les performances et la vitesse d’un site.
1. Différer le chargement du contenu lorsque c’est possible
Ajax nous permet de construire des pages web qui peuvent être mises à jour de manière asynchrone à tout moment. Cela signifie qu’au lieu de recharger une page entière lorsqu’un utilisateur effectue une action, nous pouvons simplement mettre à jour des parties de cette page.
Nous pouvons utiliser une galerie d’images comme exemple. Les fichiers d’images sont gros et lourds ; ils peuvent ralentir la vitesse de chargement des pages web. Au lieu de charger toutes les images lorsqu’un utilisateur visite la page web pour la première fois, nous pouvons simplement afficher des miniatures des images et lorsque l’utilisateur clique dessus, nous pouvons demander de manière asynchrone les images en taille réelle au serveur et mettre à jour la page. De cette façon, si un utilisateur ne veut voir que quelques images, il n’a pas à souffrir en attendant que toutes les images soient téléchargées. Ce schéma de développement est appelé “chargement paresseux”.
Les bibliothèques de développement Ajax/web comme jQuery, Prototype, et MooTools peuvent rendre le chargement différé de contenu plus facile à mettre en œuvre.
2. Utiliser des fichiers JS et CSS externes
Lorsque l’utilisateur charge votre page web pour la première fois, le navigateur met en cache des ressources externes comme les fichiers CSS et JavaScript. Ainsi, au lieu de fichiers JavaScript et CSS en ligne, il est préférable de les placer dans des fichiers externes.
L’utilisation de CSS en ligne augmente également le temps de rendu d’une page web ; le fait que tout soit défini dans votre fichier CSS principal permet au navigateur de travailler moins longtemps au rendu de la page, puisqu’il connaît déjà toutes les règles de style qu’il doit appliquer.
En outre, l’utilisation de fichiers JavaScript et CSS externes facilite la maintenance du site, car il suffit de gérer des fichiers globaux au lieu d’un code dispersé dans plusieurs pages web.
3. Utiliser les systèmes de mise en cache
Si vous constatez que votre site se connecte à votre base de données afin de créer le même contenu, il est temps de commencer à utiliser un système de mise en cache. Grâce à ce système, votre site n’aura à créer le contenu qu’une seule fois au lieu de le faire à chaque fois que la page sera visitée par vos utilisateurs. Ne vous inquiétez pas, les systèmes de mise en cache rafraîchissent périodiquement leur mémoire cache en fonction de la configuration que vous avez choisie. Ainsi, même les pages web qui changent constamment (comme un billet de blog avec des commentaires) peuvent être mises en cache.
Les systèmes de gestion de contenu populaires comme WordPress et Drupal disposent de fonctions de mise en cache statique qui convertissent les pages générées dynamiquement en fichiers HTML statiques afin de réduire le traitement inutile par le serveur. Pour WordPress, consultez WP Super Cache (un des six plugins WordPress essentiels que Six Revisions a installé). Drupal dispose d’une fonction de mise en cache des pages dans le noyau.
Il existe également des systèmes de mise en cache des bases de données et des scripts côté serveur que vous pouvez installer sur votre serveur web (si vous en avez la possibilité). Par exemple, PHP possède des extensions appelées accélérateurs PHP qui optimisent les performances grâce à la mise en cache et à diverses autres méthodes ; APC est un exemple d’accélérateur PHP. La mise en cache des bases de données améliore les performances et l’évolutivité de vos applications web en réduisant le travail associé aux processus de lecture/écriture/accès aux bases de données ; le memcached, par exemple, met en cache les requêtes de base de données fréquemment utilisées.
4. Évitez de redimensionner les images en HTML
Si une image a une dimension originale de 1280x900px, mais qu’elle doit être de 400x280px, vous devez la redimensionner et la réenregistrer en utilisant un éditeur d’images comme Photoshop au lieu d’utiliser les attributs de largeur et de hauteur du HTML (c’est-à-dire <img width=”400″ height=”280″ src=”myimage.jpg” />). En effet, il va de soi qu’une grande image aura toujours une taille de fichier plus importante qu’une petite image.
Veuillez contacter une agence pour une audit référencement seo si vous êtes intéresse.