Fiche 9: optimiser performance

1) Optimiser les performances WordPress

1.1) Choisir un hébergement performant

1. Identifier les besoins en ressources du futur site (CPU, RAM, espace disque, bande passante).
2. Vérifier les versions de PHP et MariaDB/MySQL proposées par l’hébergeur.
3. Contrôler les performances du serveur (temps de réponse, disponibilité, SSD/NVMe).
4. Vérifier la présence d’un certificat SSL gratuit.
5. Contrôler la disponibilité d’un système de sauvegardes automatiques.
6. Vérifier la possibilité d’utiliser HTTP/2 ou HTTP/3.
7. Tester la qualité du support technique.
8. Vérifier la localisation géographique des serveurs.
9. Évaluer la possibilité d’évolution de l’offre d’hébergement.
10. Documenter les caractéristiques techniques retenues.

1.2) Installer et configurer un plugin de cache

1. Identifier le plugin de cache le mieux adapté au projet.
2. Installer le plugin depuis le répertoire WordPress.
3. Activer le cache des pages.
4. Activer le cache navigateur.
5. Configurer la durée de conservation du cache.
6. Activer la pré-génération (Preload) du cache si disponible.
7. Exclure du cache les pages dynamiques si nécessaire.
8. Vider le cache après chaque modification importante.
9. Tester le fonctionnement sur ordinateur et mobile.
10. Mesurer le gain obtenu après activation.

1.3) Optimiser les images

1. Convertir les images au format WebP lorsque cela est possible.
2. Redimensionner les images avant leur importation.
3. Éviter les images inutilement volumineuses.
4. Compresser les images sans perte visible de qualité.
5. Supprimer les métadonnées inutiles.
6. Vérifier les attributs ALT pour le référencement.
7. Générer les différentes tailles utilisées par WordPress.
8. Utiliser des images responsives (srcset).
9. Vérifier le poids global de chaque page.
10. Contrôler le rendu sur tous les écrans.

1.4) Minifier les fichiers CSS et JavaScript

1. Identifier les fichiers CSS utilisés.
2. Identifier les fichiers JavaScript chargés.
3. Activer la minification CSS.
4. Activer la minification JavaScript.
5. Supprimer les espaces et commentaires inutiles.
6. Éviter le chargement des fichiers non utilisés.
7. Regrouper les fichiers lorsque cela est pertinent.
8. Tester le fonctionnement après optimisation.
9. Vérifier la console du navigateur.
10. Documenter les optimisations réalisées.

1.5) Activer la compression GZIP ou Brotli

1. Vérifier si le serveur prend en charge GZIP ou Brotli.
2. Activer la compression côté serveur.
3. Vérifier la compression des fichiers HTML.
4. Vérifier la compression des fichiers CSS.
5. Vérifier la compression des fichiers JavaScript.
6. Contrôler les en-têtes HTTP.
7. Tester la réduction du poids des pages.
8. Mesurer les gains obtenus.
9. Vérifier la compatibilité avec les navigateurs.
10. Documenter la configuration appliquée.

1.6) Mettre en place le Lazy Loading

1. Identifier les images situées sous la ligne de flottaison.
2. Activer le Lazy Loading natif de WordPress.
3. Vérifier le chargement différé des images.
4. Tester le comportement des iframes.
5. Contrôler les vidéos intégrées.
6. Vérifier les galeries d’images.
7. Tester le fonctionnement sur mobile.
8. Contrôler les performances obtenues.
9. Vérifier l’expérience utilisateur.
10. Corriger les éventuels dysfonctionnements.

1.7) Réduire les requêtes HTTP inutiles

1. Identifier les ressources chargées par chaque page.
2. Supprimer les extensions inutilisées.
3. Désactiver les scripts non indispensables.
4. Réduire le nombre de polices externes.
5. Limiter les appels aux services tiers.
6. Regrouper les fichiers lorsque cela est possible.
7. Vérifier les appels AJAX inutiles.
8. Contrôler les ressources bloquantes.
9. Tester le nombre total de requêtes.
10. Documenter les optimisations réalisées.

1.8) Utiliser un CDN si nécessaire

1. Déterminer si le projet nécessite un CDN.
2. Choisir un fournisseur adapté.
3. Configurer le domaine CDN.
4. Vérifier la diffusion des images.
5. Vérifier la diffusion des fichiers CSS.
6. Vérifier la diffusion des fichiers JavaScript.
7. Tester les performances depuis différents pays.
8. Contrôler les certificats SSL.
9. Vérifier les règles de cache.
10. Documenter la configuration du CDN.

1.9) Mesurer les performances du site

• Tester la page avec Google PageSpeed Insights.
• Analyser les Core Web Vitals (LCP, INP, CLS).
• Vérifier les performances avec GTmetrix.
• Contrôler les temps de chargement avec Pingdom Tools.
• Utiliser les onglets Performance et Network de Chrome DevTools.
• Contrôler les requêtes réseau et les ressources bloquantes.
• Identifier les images ou scripts trop lourds.
• Comparer les résultats avant et après optimisation.
• Conserver un historique des mesures.
• Documenter les performances obtenues.

1.10) Corriger les problèmes détectés et assurer un suivi régulier

1. Corriger les problèmes identifiés lors des analyses.
2. Optimiser progressivement les ressources les plus lourdes.
3. Tester le site après chaque modification.
4. Vérifier régulièrement les Core Web Vitals.
5. Contrôler les performances après chaque mise à jour.
6. Réaliser un audit complet à intervalles réguliers.
7. Vérifier les performances sur ordinateur, tablette et smartphone.
8. Mettre à jour les plugins d’optimisation si nécessaire.
9. Documenter les améliorations réalisées.
10. Maintenir une veille technique sur les bonnes pratiques d’optimisation.

2) Les points essentiels

Résultat attendu

À la fin de cette fiche, le site WordPress est optimisé pour offrir des temps de chargement rapides, une navigation fluide et une consommation de ressources maîtrisée. Les images, les fichiers CSS et JavaScript, le cache, les polices et les différents éléments techniques sont configurés afin d’améliorer l’expérience utilisateur, le référencement naturel (SEO) et les performances globales.

À retenir

• Les performances influencent directement l’expérience utilisateur et le référencement.
• Optimiser les ressources dès la conception du site.
• Réduire le poids des pages sans dégrader leur qualité.
• Tester régulièrement les performances sur ordinateur et sur mobile.
• Rechercher un équilibre entre fonctionnalités, qualité visuelle et rapidité.

Les outils recommandés

Analyse des performances

• Google PageSpeed Insights
• GTmetrix
• Lighthouse
• WebPageTest

Développement

• Chrome DevTools
• Firefox Developer Tools

Optimisation

• WP Super Cache
• LiteSpeed Cache (si compatible)
• Converter for Media
• EWWW Image Optimizer

Validation

• Google Search Console
• Core Web Vitals

Les erreurs à éviter

• Utiliser des images non optimisées.
• Installer un trop grand nombre de plugins.
• Charger des polices inutilisées.
• Négliger le cache du site.
• Ignorer les recommandations des Core Web Vitals.
• Multiplier les scripts et bibliothèques externes.
• Charger des vidéos directement sur le serveur sans nécessité.
• Oublier la minification des fichiers CSS et JavaScript lorsque cela est pertinent.
• Tester uniquement sur ordinateur en oubliant les mobiles.
• Chercher un score maximal au détriment de l’expérience utilisateur.

Checklist de validation

Niveau de difficulté

(3/5) – Intermédiaire

Temps moyen de réalisation

Lecture de la fiche

30 à 40 minutes

Mise en application

2 à 5 heures

(Selon le niveau d’optimisation recherché et la taille du site).

Compétences développées

À l’issue de cette fiche, vous serez capable de :

• Identifier les facteurs influençant les performances d’un site WordPress.
• Optimiser les images et les médias.
• Configurer un système de cache.
• Réduire le poids des ressources CSS et JavaScript.
• Comprendre les indicateurs des Core Web Vitals.
• Mesurer les performances avec les principaux outils d’analyse.
• Identifier les ralentissements d’un site.
• Optimiser les ressources côté serveur lorsque cela est possible.
• Améliorer l’expérience utilisateur grâce à un site plus rapide.
• Préparer le site pour les exigences du SEO et du GEO.

Bonus

➤ Infographie optimiser la performance: