Comment optimiser la vitesse de chargement de votre site WordPress

Optimisation des performances WordPress

Pourquoi la vitesse est-elle aussi importante?

Optimiser la vitesse de chargement de votre site est très important, non seulement pour votre visiteur, mais également pour les moteurs de recherches tels que Google.

Optimiser votre site:

  • Réduis le taux de rebond « Bounce Rate ».
  • Augmente le temps passé sur votre site.
  • Augmente le nombre de pages vues.
  • Améliore votre position dans les moteurs de recherche.

Pour ce qui est du dernier point ci-dessus, concernant l’amélioration de votre position, les moteurs de recherche mesurent la vitesse de votre site web dans leur algorithme. Quand ils recommandent un site, ils veulent s’assurer que les utilisateurs trouveront ce qu’ils cherchent rapidement.

Outils pour tester la vitesse de chargement

  • PageSpeed Insights: provient directement du défunt Google labs. Il vous fournira des conseils techniques classés par priorité d’importance afin d’optimiser les performances de votre site. Je vous recommande donc fortement de régler les problèmes de haute et de moyenne importance tout d’abord.
  • Pingdom Tool: vous aidera à tester la vitesse réelle de votre site Web. Il vous sera possible de choisir la provenance de la requête ainsi que d’enregistrer ou non les résultats pour suivre votre progression au fil de vos optimisations. Cet outil vous indiquera également les éléments non trouvés.

Mise à jour le 2014-02-24: Voici un article pour vous aider à calculer si votre site est lent.

Optimisation de site WordPress

Voici une liste non exhaustive des éléments à prendre en considération pour optimiser la vitesse de votre site WordPress.

  1. Hébergement de qualité
  2. Limiter le nombre d’extensions
  3. Propreté du code
  4. W3 Total Cache
  5. Le visuel de votre site
  6. Utiliser un CDN
  7. Optimiser vos images

1. Hébergement de qualité

La première étape à prendre en considération est la qualité de l’hébergement.

Je considère que Media Temple est un bon compromis entre la performance d’un VPS de haut niveau et la facilité d’utilisation d’un hébergement clés en main.

Bien entendu je suis affilié, mais je ne recommande que les services que j’utilise et que j’apprécie.

2. Limiter le nombre d’extensions

Il faut être prudent avec les extensions WordPress. Une exagération du nombre d’extensions peut ralentir considérablement votre site.

En effet, d’après dev4press, l’utilisation trop nombreuse d’extension peut faire une différence significative sur votre hébergement. Spécialement pour les hébergements partagés.

Je vous invite donc à remplacer certaines de vos extensions WordPress par des fonctions php.

3. Votre thème WordPress

  • Éviter les tableaux: Les tableaux sont dépassés et alourdisse votre code HTML. Il n’y a aucune excuse de nos jours pour ne pas privilégier le HTML5 et le CSS3.
  • Combinez les scripts et les feuilles de style: Avez-vous plusieurs balises <script> dans votre entête? Eh bien, fusionner les fichiers js en un seul et sauvegarder vos visiteurs des allers-retours au serveur. Puis faites de même avec les fichiers CSS.
  • Utiliser les sprites d’image: Cette technique vous permet de combiner plusieurs images en une seule et utiliser les CSS pour afficher uniquement la partie de l’image nécessaire. Lorsque vous combinez cinq ou dix images dans un fichier unique, vous faites déjà une énorme économie de requêtes au serveur.
  • Évitez les redirections: une redirection ajoute un aller-retour client-serveur, donc au lieu de traiter votre page immédiatement après réception de la réponse initiale, le navigateur devra faire une autre demande et attendre la deuxième réponse.
  • Évitez les cadres: si vous utilisez des cadres, le navigateur doit demander au moins trois pages HTML, au lieu d’une seul – ceux du frameset ainsi que chacun des cadres.
  • Utiliser un thème payant: si vous n’avez pas codé vous même votre thème pour contrôler chacun des éléments de votre site, je vous conseille fortement un thème payant. La qualité des thèmes offerts gratuitement laisse très souvent à désirer.

4. W3 Total Cache

Une extension de mise en cache aussi complète que W3 Total Cache peut être déroutante pour les débutants, mais je vous assure que le jeu en vos la chandelle.

Ce type d’extension est particulièrement important pour les hébergements partagés, mais également pour les hébergements de meilleure qualité tels que les VPS.

Si cette extension à trop de réglages pour vous je vous conseille Hyper cache qui est beaucoup plus simple, mais n’offre malheureusement pas le même niveau de personnalisations et de performances.

5. Le visuel de votre site

Oui vous avez bien lu, le visuel est un aspect à considérer.

Est ce que votre site à une énorme image en arrière-plan? Si oui, n’oubliez pas que pour accélérer votre site vous devrez faire des compromis importants au niveau du visuel.

Prenez note que rien ne vous empêche d’avoir une image plein écran dans votre site, je veux seulement dire que si la performance de votre site est une priorité, vous devrez faire un choix!

6. Utiliser un CDN

Cloudflare logo

CDN est l’abréviation de Content Delivery Network, qui est un réseau de serveurs qui offrent en cache du contenu statique basé sur la localisation géographique de l’utilisateur. Donc si vous êtes situé en France, le CDN tentera de vous fournir les images/documents à partir du serveur le plus près possible de votre position.

Un CDN peut avoir un impact significatif sur la performance globale de votre page. Au paravent l’utilisation d’un CDN pouvait être coûteuse. Heureusement de nos jours il y a plusieurs CDN très abordables.

7. Optimiser vos images

Les images ne sont pas optimisées par défaut et elles constituent un frein à la performance de votre site. Certaines extensions vous aideront à optimiser vos images à la volée. D’autres chargeront progressivement les images sous la ligne de flottaison de votre site. Ce qui signifie que les images non visibles seront ignorées par le navigateur.

Si le sujet vous intéresse, je vous invite à lire mon article sur le chargement progressif des images. Cette technique demande des connaissances un peu plus avancées, mais cela vous permet d’étendre le chargement progressif aux images situé à l’extérieur du contenu de l’article.

Eric Valois
À PROPOS DE L'AUTEUR

Eric Valois

Eric Valois est l'éditeur et le fondateur de Bulledev.
Vous pouvez suivre Eric sur .

© 2014 Bulle Développement