Avec de plus en plus de fonctionnalités, des thèmes ultra rapides et performants et de nombreux plugins, il se peut qu’au bout d’un certain temps votre site WordPress tourne au ralenti. L’optimisation de WordPress est une tâche importante pour tout webmaster et le site web doit être surveillé et amélioré en permanence. Bien que la vitesse de chargement d’un site web dépende de plusieurs conditions, il y a quelques composants qui devraient être définis comme priorité principale, comme l’optimisation de CSS, JavaScript, HTML, ainsi que l’optimisation des images.
Pour rendre ces optimisations plus simples, vous pouvez utiliser le plugin WordPress Autoptimize pour compresser ou minifier les fichiers Javascript, CSS et HTML. Ce plugin a la capacité de faire tout le travail pour vous et diminue le temps de chargement du site Web.
Avant de nous lancer dans les meilleurs réglages d’Autoptimize, voici quelques raisons pour lesquelles Autoptimize est un excellent plugin:
- La version gratuite d’Autoptimize possède un ensemble complet de fonctionnalités pour optimiser votre site WordPress.
- Autoptimize est un plugin d’optimisation et ne fait pas de mise en cache des pages HTML. Cela signifie qu’il est compatible avec tous les hébergeurs, même ceux qui ont des configurations personnalisées de mise en cache des pages.
- Autoptimize jouit d’une grande popularité avec plus de 1 millions d’installations actives selon le répertoire WordPress.
- Il est constamment mis à jour avec de nouvelles fonctionnalités et des corrections de bugs.
Pourquoi est-ce que mon site web est au ralenti ?
L’augmentation de votre temps de chargement est due à de nombreuses raisons, en voici quelques-unes :
- Votre site web comporte des éléments multimédias, des plugins ou des thèmes qui ont un impact sur sa performance
- Votre serveur est “médiocre” et engendre donc des temps d’attente importants.
- Votre site web a beaucoup de trafic, ce qui provoque une congestion.
- Votre code est trop lourd.
Installer le plugin WordPress Autoptimize
Installez le plugin depuis votre tableau de bord ou via le répertoire sur wordpress.org. Pour ce faire, allez dans votre tableau de bord Extensions > Ajouter > recherchez l’extension puis cliquez sur Installer maintenant
Lorsque l’installation est terminée, activez le plugin et rendez-vous dans les Réglages. Sachez que Autoptimize est fourni avec les paramètres de base par défaut. Votre site Web est optimisé automatiquement dès que le plugin est activé. Ensuite il ne tient qu’à vous de modifier les paramètres.
Une fois que vous avez cliqué sur Réglages, vous arrivez sur la page principale. Les manipulations proposées sont simples : cocher ou non les options proposées. Nous verrons ensuite ce que l’on peut faire.
JS, CSS & HTML
Options JavaScript
En activant l’option Optimiser le code JavaScript, vous activez en fait la réduction des ressources JavaScript pour rendre votre site web plus rapide. C’est la chose la plus importante à faire dans cette partie.
Si vous activez l’option concaténer les fichiers JS, cela combine les fichiers JavaScript en un seul comme recommandé par GTmetrix.
Désactivez forcer le JavaScript dans <head>, sauf si vous avez des erreurs JavaScript. Il est préférable d’essayer de trouver les fichiers problématiques et de les exclure plutôt que de sélectionner cette option, car JavaScript bloque le rendu (ce qui n’est pas optimal pour la vitesse).
Scripts à exclure d’Autoptimize : si vous voyez des erreurs après avoir activé certains paramètres JavaScript, vous trouverez ce qui pose problème et les fichiers d’exclusion ici. Ces derniers seront exclus de la concaténation et de la compression effectuées par Autoptimize.
Options CSS
Pour activer l’optimisation CSS, cochez la première case. Cela permettra de compresser toutes les CSS de votre site WordPress. Et cela diminue le temps de chargement du site WordPress.
Concaténer les fichiers CSS ? Cochez également la deuxième option, qui permettra de concaténer tous les fichiers CSS, ce qui est bien mieux que de réduire chaque fichier CSS individuellement.
Concaténer aussi le CSS en ligne ? Activez la pour améliorer encore les temps de chargement et les scores GTmetrix.
Génération de données : URI pour les images : à désactiver si vous utilisez un CDN. L’activation de cette option pourrait initialement réduire le nombre de requêtes HTTP, mais probablement pas après avoir configuré un CDN et fourni les images de cette manière.
Mettre en ligne tout le CSS ? Autoptimize ne recommande pas d’activer cette option là
Options HTML
Vous ne verrez que deux options ici pour optimiser les paramètres HTML, la première sera cochée par défaut. Vous devez également cocher la case Conserver les commentaires du HTML ? pour supprimer les commentaires du HTML.
Options du CDN
Vous pouvez configurer l’URL racine de votre CDN pour activer le CDN pour les fichiers auto-optimisés. L’URL peut être http, https ou relative au protocole (par exemple: //cdn.exemple.com/). Si vous avez connecté votre site à Cloudflare, il n’est pas nécessaire d’inclure cette URL CDN.
Dans les informations du cache, vous trouverez :
- Dossier du cache : L’URL ou chemin où vous pouvez voir les fichiers cache produits par ce plugin
- Styles et scripts en cache : Cela représente la taille actuelle du cache et de tous les fichiers
Options diverses
Pour que les paramètres du plugin Autoptimize soient complets, vous devez également jeter un œil aux options diverses.
- Enregistrer les scripts/CSS concaténés en tant que fichiers statiques : Vous devez cocher cette option. Pour une raison quelconque, vous ne la décochez que si votre serveur présente des erreurs de compression et d’expiration.
- Minifier les fichiers CSS et JS exclus : Si vous excluez des fichiers des options JS et CSS ci-dessus, le fait de décocher cette option signifie que vous ne réduisez plus les fichiers. Cette option est facultative.
- Optimiser aussi pour les éditeurs/éditrices et administrateurs/administratrices connectés : Comme l’indique l’auteur, vous pouvez le choisir ou non en fonction de votre site web. Mais si vous utilisez un plugin de construction de pages, laissez cette option décochée pour éviter que certaines fonctionnalités du plugin ne cessent de fonctionner.
Une fois que vous avez terminé avec les paramètres JS, CSS et HTML, cliquez sur Enregistrer les modifications ou Enregistrer les modifications et vider le cache. Je préfère Enregistrer les modifications et vider le cache pour supprimer le cache en même temps.
Images
Si vous voulez que votre image soit optimisée pour une meilleure performance, passez à l’onglet Images. C’est une fonctionnalité importante aussi parce qu’elle vous évitera d’installer un plugin séparé pour l’optimisation des images.
Optimiser les images : Votre image sera compressée par ShortPixel pour rendre votre site plus rapide.
Qualité de l’optimisation des images : Choisissez l’une des trois compressions disponibles : Lossy, Glossy ou Lossless
Voici quelques informations sur chaque option afin que vous puissiez choisir celle qui convient à votre site web :
- “Lossy est la meilleure option pour la plupart des utilisateurs. Les images traitées avec les algorithmes Lossy sont les plus petites images optimisées que vous pouvez obtenir. Par conséquent, si la vitesse de votre site Web est primordiale et que vous souhaitez obtenir le meilleur équilibre entre l’optimisation et la qualité de l’image, nous vous recommandons de continuer à utiliser l’optimisation Lossy.”
- “Glossy est le meilleur choix si vous vous souciez toujours des résultats de Google mais que vous pensez qu’une légère perte de vitesse est un compromis acceptable pour une image de qualité supérieure.”
- “Les images optimisées Lossless sont identiques, pixel par pixel, aux originaux, mais elles offrent une réduction de taille plus faible que les fichiers traités Lossy ou Glossy. Si vous souhaitez que vos images ne soient pas modifiées, sélectionnez cette option.”
Vous pouvez également exclure l’optimisation de certaines images en insérant le nom des fichiers. Pensez à séparer chaque fichier par une virgule.
- Chargement différé des images : Cela réduira le temps de chargement et seules les images au dessus de la ligne de flottaison seront chargées
- Charger WebP ou AVIF dans les navigateurs qui le prennent en charge : Cela peut accélérer votre temps de chargement, mais l’affichage des images peut être dégradé pour vos visiteurs. Cochez seulement après avoir testé vous même si votre serveur le prend en charge
Une fois terminé, cliquez sur enregistrer les modifications.
Critical CSS
Le blocage du rendu des fichiers CSS entraîne un ralentissement des performances. Le plugin Autoptimize offre la possibilité de s’inscrire sur https://criticalcss.com pour générer une clé API afin de résoudre les problèmes de vitesse de premier rendu d’affichage.
Extra
Si vous souhaitez des options plus détaillées et supplémentaires, allez dans l’onglet Extra et choisissez certaines des cases en fonction de vos préférences. L’explication de chaque section est assez compréhensible, il vous suffit de la lire attentivement. Certaines sections sont réservées aux utilisateurs avancés. Si vous êtes un débutant, ignorez-les. N’oubliez pas de cliquer sur Enregistrer la modification.
Voici quelques actions utiles :
- Les polices Google sont superbes et donnent à votre site web un aspect unique et moderne. Cependant, elles peuvent compromettre les performances du site.
- En cochant la case Retirer les emojis, vous supprimez le CSS et le javascript du noyau d’emojis de WordPress, ce qui améliore les performances du site.
- Si vous cochez la case Retirer les chaînes de requête des ressources statiques, vous pourrez améliorer le score de performance sur GTmetrix.
- Vous pouvez installer Async Javascript car cela vous donnera un contrôle plus avancé pour arrêter la synchronisation ou différer le fichier js pendant le chargement du site.
Installer Async Javascript (facultatif)
Une fois que le plugin Autoptimize WordPress est configuré, installez un autre plugin pour étendre le contrôle du javascript. Ce plugin est développé par le même développeur qu’Autoptimize, il sera donc totalement compatible.
Allez sur la page extensions WordPress dans votre tableau de bord, téléchargez le plugin et installez-le. Après cela, activez-le et choisissez une configuration
- Scripts to Async : Vous pouvez mentionner tous les scripts auxquels vous souhaitez appliquer l’attribut Async.
- Scripts to Defer : Vous pouvez mentionner tous les scripts auxquels vous souhaitez appliquer l’attribut Defer.
- Scripts Exclusion : Mentionnez tous les scripts que vous souhaitez exclure de l’application de l’attribut Async ou Defer pendant le chargement de la page.
- Plugin Exclusions : Si vous mentionnez un plugin installé dans le chemin /wp-content/plugins/some-plugin/, les scripts Java contenus dans ce chemin seront exclus.
- Theme Exclusions : Ceci exclura tous les fichiers JavaScript qui sont contenus dans les fichiers du thème sélectionné. Cependant, les JavaScripts externes chargés par le thème sélectionné ne sont pas affectés.
- Async JavaScript For Plugins : Enfin cette option vous permettra de choisir la méthode pour Autoptimize
Après avoir enregistré tous ces paramètres, testez votre site web deux fois et vous devriez déjà voir une nette amélioration des performances et de la vitesse du site.
Plus d’optimisations
Si vous souhaitez optimiser davantage votre site web, l’auteur vous propose déjà quelques plugins utiles dans cette liste.
Tests de performance Autoptimize
Avec/Sans Autoptimize
À l’aide de GTmetrix, vous pourrez effectuer un diagnostic de performance de votre site web. Voici un test de performance purement indicatif avec le site web crash que j’utilise :
Comme vous pouvez le constater les résultats sont assez médiocres sans Autoptimize, même pour un site test. GTmetrix vous propose d’agir sur plusieurs leviers pour améliorer la performance du site.
Voyons la différence après activation d’Autoptimize et des options présentées ci-dessus
La performance globale, la structure sont en hausse et le LCP est tombé à 3.0s.
Comme mentionné, chaque site est différent et certains paramètres ne vous conviendront pas forcément. Essayez plusieurs combinaisons pour voir ce qui correspond le mieux. Avant de conclure voici un résultat idéal d’optimisation :
Conclusion
Il existe de nombreuses méthodes pour améliorer les performances de votre site web, que vous utilisiez ou non des plugins. Autoptimize est simple à utiliser et très bien expliqué, ce qui en fait un super plugin pour résoudre vos problèmes de chargement de page et autre.
En parallèle, testez régulièrement la vitesse et les performances de vos pages pour vous assurer que votre site ne perd pas en qualité pour les utilisateurs en raison de mauvaises performances.
