Comment optimiser les performances d'un site web WordPress

En ce qui concerne l'optimisation des performances de WordPress, nous pouvons essayer ce qui suit.

Installer le thème et remplir le contenu

Lors de la mise en place de notre thème dans une nouvelle installation de WordPress, vous importerez généralement du contenu factice. Ce contenu est destiné à vous aider à faire fonctionner votre site rapidement et à comprendre comment il est construit et configuré. Comme ce contenu contient beaucoup d'images, de pages, d'articles et de produits que vous allez bientôt supprimer, il n'est pas optimisé pour les performances. Il n'est donc pas nécessaire de mesurer les performances du site pour cette étape.

Après l'installation du thème, les sections du site web doivent être parcourues et remplies avec des images, des produits, des articles et des pages réels. Cette opération permet de supprimer toutes les données obsolètes et de préparer le site pour les futurs visiteurs. À ce stade, vous devez vous concentrer sur les recommandations suivantes pour garantir la vitesse et les performances du site web :

1. Vérification des certificats SSL Assurez-vous que votre site web dispose d'un certificat SSL valide. C'est essentiel pour les performances et la sécurité de votre site web. Si ce n'est pas encore le cas, contactez votre hébergeur pour obtenir de l'aide.
2. Images optimisées Optimisez toutes les images et utilisez des tailles d'image appropriées avant de les télécharger. Reportez-vous à l'étape 3 pour plus de détails.
3. Remplacement des images dans le contenu virtuel Veillez à remplacer toutes les images du contenu virtuel par les vôtres. Certaines images virtuelles peuvent être chargées à partir de notre serveur et ralentir votre site.
4. Simplifier le contenu des pages Évitez de créer des pages complexes avec de nombreux curseurs, animations, rotations et produits. Chaque élément de page supplémentaire ajoute de la complexité et de la taille au DOM, ce qui entraîne des problèmes de performance. Gardez vos pages simples et réduisez les éléments inutiles.

Vérification des temps de réponse du serveur et optimisation

La rapidité et la fiabilité de votre serveur d'hébergement sont essentielles à la performance de votre site web. Sur une nouvelle installation sans plugins, le temps de réponse du serveur doit se situer entre 0,5 à 1,2 secondeEntre. Voici quelques moyens de mesurer et d'optimiser les temps de réponse des serveurs :

1. Sélectionner la page de test Le temps de réponse du serveur peut varier d'une page à l'autre. En général, nous le testons sur la page du panier d'achat parce que cette page ne contient pas d'éléments supplémentaires et que le plugin de mise en cache (s'il est activé) ne l'affecte pas.
2. Test avec WebPageTest entretiens WebPageTest, lancez le test du temps de réponse du serveur. Le temps de réponse de votre serveur s'affichera dans la fenêtre "chutes d'eau"La première demande de la Fig.

3. Vérifier et optimiser les paramètres du serveur Assurez-vous que la compression GZIP est activée sur le serveur afin de réduire le temps de chargement des ressources. Cette opération peut être effectuée à l'aide de l'option GiftOfSpeed sonde Compression GZIPS'il fonctionne correctement. S'il n'est pas activé, contactez votre fournisseur d'hébergement pour obtenir de l'aide.

Configuration des paramètres de performance du thème

La configuration par défaut de notre thème est très optimisée pour prendre en charge la plupart des fonctionnalités. Cependant, si vous n'avez pas besoin de certaines fonctionnalités, vous pouvez les désactiver pour améliorer les performances. Voici quelques options qui peuvent être configurées immédiatement après l'installation :

1. Désactiver les styles Gutenberg Si vous utilisez principalement Elementor ou le constructeur de pages WPBakery, vous pouvez désactiver tous les fichiers CSS et JS de Gutenberg :
   • Naviguer vers :Définition du thème -> représentations -> CSS
   • Sélectionner :Désactiver les styles Gutenberg
2. Réglage de l'affichage des polices Pour améliorer les performances, il est recommandé d'utiliser les polices et les icônes Google de la page d'accueil. police-affichage fixé à Échange: :
   • Naviguer vers :Définition du thème -> représentations -> Polices et icônes
   • Le cadre :police-affichage en raison de Échange
   • Pour plus d'informations, voir Google Docs
3. Activer le chargement différé Si votre page contient un grand nombre d'images, vous pouvez activer le chargement différé pour réduire la taille de la page :
   • Naviguer vers :Theme Settings -> Performance -> Delayed Loading
   • Autoriser :chargement retardé(Cette option n'est pas toujours activée, mais elle est utile lorsqu'il y a beaucoup d'images).
4. Optimiser le constructeur de pages WPBakery Si vous utilisez le constructeur de pages WPBakery, vous pouvez réduire la taille du CSS en désactivant les widgets inutilisés :
   • Naviguer vers :Tableau de bord -> WoodMart -> Outils -> WPBakery CSS Generator
   • Désactiver : les widgets inutiles
5. Initialiser la rotation lors du défilement Pour tous les éléments rotatifs qui ne figurent pas dans l'écran initial, il est recommandé d'activer l'option "Initialiser la rotation lors du défilement" :
   • Cela réduit le temps d'exécution initial de JS et améliore la vitesse de chargement des pages.

6. Activer le menu déroulant AJAX
   • sentiers: :état extérieur -> menu
   • gréementMenu AJAX : Activez l'option de menu AJAX pour tous les menus déroulants avec des blocs HTML afin de réduire la taille du DOM lors du chargement initial de la page et d'améliorer les performances.

En configurant ces options, il est possible de réduire la taille de la page de 10-40%. Veillez à tout revérifier après avoir activé ou désactivé l'une des options pour vous assurer qu'il n'y a pas de problème.

Étapes de l'optimisation de l'image

Les images volumineuses, non optimisées et de taille inappropriée sont l'une des principales causes de la lenteur du chargement des pages. En optimisant les images et en réduisant leur nombre, vous pouvez améliorer de manière significative la vitesse de chargement des pages et les résultats des indicateurs web de base. Vous trouverez ci-dessous les étapes d'optimisation spécifiques :

1. Contrôle de la taille de l'image
   • Taille recommandéeLes images doivent avoir une taille comprise entre 100 et 200 Ko. La taille moyenne des images de produits et d'articles doit être comprise entre 50 et 150 Ko. Les grandes images de la section héros et de la barre de défilement peuvent être comprises entre 150 et 200 Ko, mais ne les dépassez pas.

2. Optimiser les images avec des outils en ligne
   • Outils recommandésAvant de télécharger une image, utilisez la fonction TinyPNG et d'autres outils de compression en ligne. Il suffit de charger l'image sur le site web et de télécharger l'image optimisée.
3. Installer le plug-in Optimisation automatique des images
   • Plug-ins recommandésSi vous ne souhaitez pas optimiser les images manuellement, vous pouvez installer des plugins d'optimisation automatique tels que Imaginez. Le plugin ne se contente pas de compresser les images, il les convertit également au format WEBP, plus petit, ce qui réduit encore le poids de l'image.

4. Réglage de la taille de l'image
   • Images des produits sur la page de la boutique: à travers tableaux de bord -> état extérieur -> personnalisation -> WooCommerce -> Photos du produit Définir la taille de l'image.
   • Images de l'article de blog: à travers tableaux de bord -> mettre en place -> les médias, en particulier les médias d'information Définir la taille de l'image.
   • élément spécifique à la page: Définir la taille de l'image des éléments tels que les bannières, les infobox, les galeries, etc. lors de l'édition d'une page à l'aide d'un constructeur de page tel que WPBakery ou Elementor.

Principales recommandations

• Optimiser toutes les images avant de les téléchargerLes images doivent être compressées et redimensionnées à l'aide d'un outil avant d'être téléchargées.
• Activer le format WEBPNotre thème supporte le format WEBP, vous pouvez réduire la taille de l'image en convertissant l'image au format WEBP avec le plugin Imagify.
• Éviter les éléments graphiques trop nombreuxLes pages d'accueil doivent être conçues de manière à réduire au minimum le nombre d'images sur la page et à éviter les curseurs, les animations et les rotations excessifs.

Installer le plugin WP Rocket Cache

Les plugins de mise en cache sont essentiels pour tout site web WordPress, car ils permettent de réduire considérablement les temps de réponse du serveur et de faire en sorte que les pages se chargent presque instantanément. Nous recommandons WP Rocket, un plugin de mise en cache et d'optimisation des performances haut de gamme et facile à utiliser. Bien que WP Rocket soit un plugin payant, ses résultats sont remarquables. Si vous avez un budget limité, essayez des alternatives gratuites comme Autoptimize, W3 Total Cache ou WP Super Cache.

Configuration du plugin WP Rocket

Après avoir activé le plugin WP Rocket, suivez les étapes ci-dessous pour le configurer afin de garantir des performances optimales :

1. Optimisation des fichiers
   • Minimisation des CSSOptimiser la livraison des feuilles de style CSS : L'activation de cette option permet de compresser les fichiers CSS et de réduire leur taille. Bien qu'elles améliorent le score de vitesse des pages de Google, les options Optimiser la livraison des feuilles de style CSS et Supprimer les feuilles de style CSS inutilisées peuvent provoquer un scintillement du style lors du chargement de la page, c'est pourquoi nous n'activons généralement pas ces options.
   • JS Chargement minimal et retardéPour réduire la taille du fichier JS, il convient d'activer l'option de minimisation du JavaScript. Retarder l'exécution de JS est une bonne option pour réduire le temps de chargement initial. Cependant, certains scripts peuvent retarder le chargement avant que l'utilisateur ne commence à interagir avec eux, de sorte que les fichiers JS importants doivent être ajoutés à une liste d'exceptions. Cette liste peut être remplie automatiquement dans la version 7.0 de WoodMart.

2. Paramètres du cache
   • Fichiers cache séparés pour les appareils mobilesSi vous utilisez l'option Mobile DOM Optimisation, il est recommandé d'activer cette fonction afin de créer un fichier cache distinct pour les appareils mobiles.
   • Ne jamais mettre les URL en cacheDans les règles avancées, ajoutez les URL des pages qui ne doivent pas être mises en cache, telles que les pages de liste de souhaits et de comparaison. Les pages par défaut de WooCommerce telles que Mon compte, Panier et Commande sont déjà exclues de la mise en cache.

Recommandations en vue d'une optimisation ultérieure

• Utiliser un CDNLa configuration d'un réseau de diffusion de contenu (CDN) permet d'améliorer considérablement les vitesses de chargement pour les visiteurs du monde entier. Les temps de chargement peuvent être considérablement réduits.

Exemple de configuration

Vous trouverez ci-dessous notre exemple de configuration avec les paramètres qui nous ont permis d'obtenir des temps de chargement rapides et des scores Google Page Speed élevés :

• WP Rocket -> Paramètres -> Optimisation des fichiers: Permet de minimiser les CSS et JS et de retarder le chargement des fichiers JS.
• WP Rocket -> Paramètres -> CacheLes fichiers de cache sont distincts pour les appareils mobiles.
• WP Rocket -> Paramètres -> Règles avancéesAjouter une liste de souhaits et l'URL d'une page de comparaison à la liste "Never Cache" (jamais en cache).

Comment corriger l'avertissement de Google Page Speed

Le rapport Google Page Speed donne des avertissements spécifiques basés sur différents facteurs pour chaque site web. Voici les avertissements les plus courants et leurs correctifs pour notre projet.

1) Élimination des ressources bloquantes pour le rendu

Il s'agit de l'un des avertissements les plus courants pour les sites web WordPress. Plus il y a de ressources dans l'en-tête de la page, plus le rendu est bloqué. Ces ressources comprennent généralement des fichiers CSS, des fichiers JS et des polices de caractères (telles que Google Fonts). Voici quelques mesures pour réduire le temps de blocage du rendu :

• Désactiver les styles Gutenberg: Si vous n'utilisez pas l'éditeur Gutenberg, vous pouvez désactiver ses styles pour réduire les fichiers CSS inutiles (voir l'étape 2 ci-dessus).
• Éviter les polices Google en doublePour ce faire, vous devez vous assurer que les polices Google ne sont chargées qu'à partir d'une seule source. Par exemple, si les polices Google sont chargées via le thème et Elementor, vous pouvez réinitialiser les paramètres des polices dans les paramètres du site d'Elementor.

• Désactiver les polices Google inutilesSi vous n'avez pas besoin des polices Google, vous pouvez les désactiver dans les paramètres du thème ou les télécharger et les charger à partir du serveur.
• Réduire les fichiers CSS inutilesPar exemple, les fichiers CSS de l'icône Font Awesome peuvent se charger inutilement sur la page. Essayez d'utiliser des icônes SVG uniques plutôt que des bibliothèques d'icônes entières.

2. réduire le nombre de JavaScript inutilisés

Faites attention à cet avertissement et vérifiez tous les fichiers JS chargés, en particulier les fichiers de script des plugins tiers. Exemple :

• Désinstaller les plug-ins inutilisésSi le plugin Slider Revolution n'est pas utilisé, vous pouvez simplement le désinstaller. S'il n'est utilisé que sur certaines pages, vous pouvez désactiver sa fonction de chargement global.
• Utilisation d'alternatives plus légèresLes outils d'aide à la décision : Par exemple, utilisez le slider léger fourni avec WoodMart au lieu du plugin de slider lourd.

3. réduction du temps de réponse initial du serveur

Un temps de réponse initial excessif du serveur peut affecter les performances du site web. Il peut être optimisé en suivant les étapes ci-dessous :

• Utilisation du plugin CacheL'installation d'un plugin de mise en cache tel que WP Rocket peut réduire de manière significative les temps de réponse du serveur.
• dépannageSi le temps de réponse est supérieur à 2 secondes.Les tests suivants permettent d'identifier la cause première du problème :
  • Désactivez tous les plugins externes et mesurez le temps de réponse, en activant les plugins un par un pour trouver celui qui est à l'origine du problème.
  • Faites un test avec le thème WordPress par défaut et comparez son temps de réponse avec celui du thème WoodMart. Si le temps de réponse du thème par défaut est nettement plus court, il peut s'agir d'un problème lié au thème.
  • Si le temps de réponse est toujours trop long après avoir désactivé tous les plugins et utilisé le thème par défaut, il est recommandé de consulter la sectiontutellecar il peut y avoir des problèmes de configuration ou de performance du serveur.

Résumé :

Dans cet article, nous expliquons comment optimiser les performances d'un site web WordPress. Grâce à ces étapes d'optimisation, vous pouvez améliorer de manière significative la vitesse de chargement de votre site web et l'expérience de l'utilisateur.