Comment rendre votre site wordpress plus rapide à charger

Dans mon dernier article

« performance et rapidité de votre site » j’ai montré l’importance de la rapidité d’un site à s’afficher. J’ai également présenté dans le même article des outils efficaces permettant de tester la vitesse d’affichage de des pages web.

Aujourd’hui je vais parler de différents moyens que vous pouvez mettre en place pour rendre votre site web 70 fois plus rapide.

Il est évident que la rapidité du chargement d’un site contribue énormément à sa performance et à sa notoriété.

Les visiteurs sont de plus en plus pressés et exigeants. Le site qui s’affiche vite a la chance d’être visité même s’il est médiocre tandis que le meilleur des sites perd des visiteurs s’il met 10 secondes à se présenter.

Cette réalité a amené google et tous les autres moteurs de recherche à accorder une grande importance à la rapidité d’affichage des sites web.

Nous n’avons plus le choix, nous devons faire en sorte que notre site s’affiche plus vite si nous voulons garder le cap.

Comment devons-nous procéder pour y arriver ?

Avant tout, il faut admettre que tous les sites ne pourront jamais être optimisés à la même enseigne. Pourquoi ?
Parce qu’en termes de rapidité sur internet, il y a beaucoup de paramètres qui entrent en considération:

  • Votre hébergement : Un hébergement mutualisé sera moins rapide qu’un hébergement dédié.
  • Votre site : la manière dont il a été construit et tous les éléments qui le composent peuvent le rendre plus ou moins rapide
  • Le débit de connexion de votre visiteur : 256kb sera moins rapide que 2Mo
  • L’appareil dont se sert votre visiteur : ordinateur, tablette ou téléphone portable. Ces terminaux  peuvent avoir de système d’exploitation plus ou moins performants et de différentes capacités en termes de mémoire RAM, de disque dur et de processeur.

Ces sont des éléments dont il faut tenir compte quand on veut optimiser son site.

Il est néanmoins possible grâce à quelques techniques et astuces développés par des webmasters et des informaticiens, d’obtenir une nette amélioration de la performance de ses pages web.

1/ optimiser la base de données

Les fichiers source de votre site stockés chez votre hébergeur peuvent faire l’objet de quelques réglages pour gagner des secondes dans l’affichage.

a) Purger la liste des révisions
Chaque fois que vous éditez un article, wordpress enregistre une copie de l’article qu’il garde dans la base de données pour vous permettre d’y revenir en cas de besoin. Si vous ne les supprimez pas, ces sauvegardes finissent par alourdir votre site.

Je vous montre un plugin gratuit que j’utilise et qui fait correctement le travail de nettoyage. Wp optimize purge les révisions, supprime les brouillons et les commentaires indésirables, vide la corbeille, retire les metadata de commentaire et d’akismet inutilisées et optimise la base de données.

b) Utiliser un système de cache

Il y a le cache côté navigateur et le cache côté serveur

*Le cache navigateur
Du point de vue navigateur, le cache fonctionne comme une sorte de mémoire intermédiaire qui enregistre dans l’ordinateur de l’utilisateur final les données d’une page déjà affichée par le navigateur.

La prochaine fois où cette page fera l’objet de requête, le système ne fait plus appel au serveur distant mais plutôt à la cache située dans l’ordinateur de l’intéressé.

Pour activer ce cache vous pouvez  utiliser ce code que vous collez dans votre fichier .htaccess.

## EXPIRE CACHING ##
ExpiresActive Sur
ExpiresByType image / jpg "accès 1 mois»
ExpiresByType image / jpeg "accès 1 mois»
ExpiresByType image / gif "accès 1 mois»
ExpiresByType image / png "accès 1 mois»
ExpiresByType text / css "accès 1 mois»
ExpiresByType application / pdf "accès 1 mois»
texte ExpiresByType / x-javascript "accès 1 mois»
texte ExpiresByType / javascript "accès 2 mois"
demande ExpiresByType / javascript "accès 2 mois"
demande ExpiresByType / "accès 2 mois" x-javascript
demande ExpiresByType / x-shockwave-flash "accès 1 mois»
l'image ExpiresByType / x-icon "accès 1 mois»
ExpiresDefault "accès 2 jours"
## EXPIRE CACHING ##

*Le cache serveur

Utiliser le plugin w3 Total Cache pour optimiser votre serveur

2/ Optimiser vos fichiers HTML, CSS, JAVASCRIPT, images

a) Minifiez vos fichiers
Vous pouvez combiner les fichiers css ensemble, les scripts JS ensemble et les HTML ensemble.

En regroupant ainsi les différent fichiers de même nature, vous diminuez le nombre de fichiers et de ce fait le nombre de requêtes. Si vous avez testé la vitesse de votre site, vous avez dû remarquer qu’un nombre important de requêtes ralentit votre site.
En wordpress, les extensions qui font cela sont WP-Minify et w3 total cache

b) Réglez vos IMAGES
Pour tout site web, les images jouent un grand rôle dans l’illustration des idées. Il se trouve qu’elles sont aussi de grandes consommatrices de ressources. L’importance de leur nombre multiplie les requêtes et leur poids alourdit le chargement du site.

Il convient donc de résoudre ces deux cas de poids et de quantité de vos images. Pour ce faire, voici quelques solutions:

– Installer le plugin Wp Smush qui s’occupe de diminuer toutes les images d’environ 20% dès que vous les placez dans votre site.

– utiliser adobe photoshop pour diminuer le poids d’une image avec ou sans perte de qualité avant de l’importer dans votre page web.
Ouvrez l’image à modifier dans Photoshop, allez dans Fichier et cliquez sur “Enregistrer pour le web”, une fenêtre s’ouvre pour vous permettre d’ajuster les paramètres de manière à diminuer le poids de votre image avant de l’enregistrez.

Je vous encourage à opter pour le format JPG avec 50% comme qualité de compression. L’oubliez pas d’activer le mode progressif avant l’enregistrement, c’est très important.

J’ai fait un article sur l’optimisation des images par photoshop. Consultez-le par ici!

-Limiter tant que possible sur vos pages le nombre d’images. Ne placez une image que lorsque vous jugez sa présence nécessaire à la compréhension du texte ou à l’illustration de votre idée.

-Mettre en place de CSS Sprites pour regrouper plusieurs images dans un seul fichier et gérer leur affichage via le css diminuant ainsi le nombre d’appels au serveur au niveau des images. Le sprite n’a pas pour but de minifier les images mais plutôt de diminuer leur nombre au point de vue des requêtes au serveur. C’est un sujet que je ne maitrise pas encore. Vous pouvez néanmoins rechercher sur l’internet les moyens de le réaliser. Voici un excellent article de Alexis Madrzejewski sur ce sujet:

Comment utiliser les sprites CSS

Par ailleurs, il faut bien choisir les bons formats pour vos images.
Optez pour les formats :
– JPG lorsque vous devez présenter des photos ou images avec beaucoup de détails : les images à hautes résolutions
-PNG quand il s’agit des logos, des icônes et les images qui ont peu de détails comme les illustrations.
-GIF si vous voulez les images animées.

c) Amélioration de l’affichage
-Affichage asynchrone
Affichage synchrone se fait en présentant les éléments de votre site les uns après les autres. L’affichage asynchrone se fait en affichant tous les objets en même temps. Ce dernier permet à votre visiteur de percevoir tous les éléments de la page pendant que le chargement continue.

3) Vos extensions installées et activées dans votre site

.diminuer leur nombre
Chaque extension qui fonctionne sur le site est source de ralentissement. Il y en a qui sont plus gourmandes que d’autres en ressources mais l’idéal est d’avoir le moins d’extensions possibles dans son site.

Mais si vous juger une extension utile au bon fonctionnement d’un service sur votre site, c’est à vous de faire la part des choses quitte à sacrifier quelques fractions de secondes en chargement de votre site.

.vérifier leur qualité
Il faut surtout vérifier la qualité des ces extensions que vous installer. Évitez celles qui ralentissent considérablement votre site. La plupart sont remplaçables par d’autres plus légères et non moins efficaces.

– Utilisez le P3 (Plugin Performance Profiler) qui vous aidera à détecter les programmes qui ralentissent le plus votre site.

Voici mon site avant et après la mise en apilcation de ces méthodes:

Avant:

capture web-prestation avant les techniques d'optimisation

Après:

capture web-prestation apres optimisation

Souhaitez-vous connaitre la vitesse de chargement de votre site ou de n’importe quel site? Cliquez sur le lien suivant et placez l’adresse du site en question à l’endroit indiqué: http://tools.pingdom.com/fpt/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*