Accélérer la vitesse de chargement de votre site WordPress sans débourser 1 € vous intéresse ? 
Suivez le guide de configuration du duo gagnant : Autoptimize et WP Fastest Cache !

Sommaire

Pourquoi installer Autoptimize ?

Vous vous posez la question pourquoi installer le plugin d’optimisation de WordPress Autoptimize alors que vous avez déjà installé le plugin de cache, en version gratuite, WP Fastest Cache, sur votre site WordPress ?

Il y a deux raisons à cela :

  1. En version gratuite, WP Fastest Cache n’est pas complet.
  2. Vous ne voulez pas investir dans un plugin payant tel que WP Rocket ou WP Fastest Cache Premium.

Certes, si vous avez un site e-commerce sous l’open-source WooCommerce ou si vous désirez optimiser le temps de chargement de votre site vitrine développé sous le CMS WordPress (surtout pour votre version mobile) en activant par exemple la compression gzip, alors acquérir un plugin premium est, effectivement, la bonne solution.

Mais dans la majorité des cas, utiliser, en concomitance, Autoptimize et WP Fastest Cache suffira amplement.

(À noter que cela est tout à fait possible d’utiliser Autoptimize avec les plugins  WP Super Cache ou W3 Total Cache).

Quelle est la différence entre Autoptimize et WP Fastest Cache ?

Autoptimize et WP Fastest Cache sont des plugins WordPress qui ont la même finalité : améliorer la vitesse de chargement des pages de votre site web, mais qui diffèrent quant à leur fonctionnement :

  • WP Fastest Cache s’occupe de la mise en cache de vos pages web.
  • Autoptimize s’occupe, quant à lui, de la minification, et de la concaténation de votre code JavaScript, CSS et HTML.

De plus, Autoptimize inclut des fonctionnalités que WP Fastest Cache ne propose que dans sa version payante, telles que :

  • Le chargement des polices Google de façon asynchrone.
  • Le chargement de vos images en différé avec la fonction Lazy Load.

Qu'est-ce que Autoptimize ?

Autoptimize est le plugin d’optimisation WordPress le plus populaire.

Il est plébiscité par ses utilisateurs pour ses performances et pour la rapidité de son support technique.

De plus, il est régulièrement mis à jour, ce qui est un gage de sérieux.

À date, il a déjà été installé sur + d’1 million de sites internet WordPress et obtient + de 92% de satisfaction. Excusez du peu !

Plugin WordPress Autoptimize
Plugin WordPress Autoptimize

Caractéristiques principales

Autoptimize comprend des fonctionnalités gratuites très intéressantes telles que :

  • L’optimisation du code JavaScript.
  • L’agrégation de JavaScript en ligne.
  • L’optimisation du code CSS.
  • L’agrégation du CSS en ligne.
  • L’optimisation du code HTML.
  • Le chargement des images en différé (Lazy-Load).
  • L’optimisation des polices Google.
  • L’injection du CSS dans l’en-tête de page.
  • Le déplacement des scripts vers le pied de page.
  • Suppression des émojis.

Comment installer Autoptimize ?

L’installation d’Autoptimize est très simple.
Il vous suffit :

  • D’aller dans votre tableau de bord WordPress.
  • De survoler l’onglet « Extensions » et de cliquer sur « Ajouter ».
  • Dans la zone de recherche, en haut à droite, de taper le mot-clé « Autoptimize ».
  • Une liste de plugins va apparaître.
  • De repérer la fenêtre « Autoptimize » et cliquez sur « Installer maintenant ».
  • De cliquer, enfin, sur « Activer ».

Voilà, le plugin est installé dans votre dashboard WordPress, il vous suffira désormais de bien le configurer pour une efficacité maximale. 

La fenêtre de configuration proprement dite va s’afficher avec au menu 5 onglets :

  • JS, CSS & HTML.
  • Images.
  • Critical CSS.
  • Extra.
  • Plus d’optimisations !

Certains d’entre-eux sont réservés aux clients Premium (payants) qui permettront de rendre l’affichage de vos pages WordPress encore plus rapide :

  • Critical CSS (améliore la vitesse du premier rendu (first paint) en supprimant les CSS bloquants).
  • Plus d’optimisations (autres plugins premium offrant des services connexes (ShortPixel, WP Rocket, Kinsta, Neve, …)). 

Je ne m’y attarderai donc pas.
Intéressons-nous plutôt aux fonctionnalités gratuites du plugin Autoptimize.

Configurer ce plugin n’est pas aisé mais, au moins, vous n’aurez pas besoin de modifier le fichier htaccess. Il sera modifié automatiquement.

Installation du plugin Autoptimize
Installation plugin WordPress Autoptimize

Comment configurer Autoptimize ?

Pour configurer le plugin WordPress, il faudra :

  • Cliquer sur l’onglet « Extensions installées ».
  • Rechercher parmi elles l’extension « Autoptimize ».
  • Cliquer, enfin, sur le sous-menu « Réglages ».
Réglages plugin Autoptimize
Important

Deux choses sont importantes à savoir :

  1. Certains paramètres de réglages de l’extension WordPress risquent de faire « bugger » une ou plusieurs fonctionnalités de votre thème WordPress.

Il faut, de fait, toujours tester, un par un, ces réglages, et s’il y a un bug sur votre site web, décochez-le tout simplement ! 

Personnellement, j’utilise comme thème responsive OceanWP Pro et comme builder Elementor Pro, et j’ai rencontré, aussi, des problèmes : je vous dirais lesquels et sur quels réglages.

2. Comme la finalité de cet article est de vous expliciter comment mettre simultanément Autoptimize et WP Fastest Cache sur votre site WordPress, et parce que certains réglages sont quasi redondants sur ces deux extensions, il faudra les décocher dans ce dernier.

À défaut, cela aura pour conséquence de ralentir le chargement de vos pages.

Mais ne vous inquiétez pas, dans ce tutorial, je vous indiquerai lesquels et ou les décocher.  

Réglages JavaScript, CSS et HTML

Réglages JavaScript

Réglages Options JavaScript - Autoptimize
Réglages JavaScript - Autoptimize

Dans l’onglet « Options JavaScript », il y a six paramètres à régler :

  1. Optimiser le code JavaScript.  
  2. Concaténer les fichiers JS.
  3. Concaténer aussi le JS en ligne.
  4. Forcer le JavaScript dans le head.
  5. Scripts à exclure d’Autoptimize.
  6. Ajouter l’encapsulation Try- catch.

1. Optimiser le code JavaScript :
JavaScript
est un langage de programmation qui améliore l’interaction sur votre site web, en créant du contenu de manière dynamique.

En cochant la case, vous allez significativement, d’une part, réduire la taille de vos fichiers JavaScript et, d’autre part, abaisser le nombre de requêtes HTTP, ce qui accéléra le chargement de vos pages web.

Je vous conseille de cocher la case.

2. Concaténer les fichiers JS :
La concaténation des fichiers JavaScript est une technique permettant d’améliorer le temps d’affichage de vos pages en regroupant plusieurs fichiers JavaScript en un seul.

En cochant la case d’optimisation du code JavaScript, la concaténation des fichiers JavaScript s’active automatiquement.  

Je vous conseille de laisser cocher la case.

3. Concaténer aussi le JS en ligne :
Concaténer le JS en ligne donnera un gros coup d’accélérateur au chargement de votre page, mais au détriment d’une augmentation de la taille de votre cache.
Sauf si vous pensez à vider votre cache de façon quotidienne, je vous déconseille de cocher cette case.

4. Forcer le JavaScript dans dans le head :
Forcer le JavaScript dans permet de charger le JavaScript dans l’entête de votre page mais bloque le rendu JS.

Personnellement, cela a cassé mon site, et donc je ne conseille pas à cocher cette case

5. Scripts à exclure d’Autoptimize :
Scripts à exclure d’Autoptimize vous permet d’exclure un script CSS ou JavaScript préalablement et automatiquement agrégé ou réduit par le plugin et qui aurait causé un dysfonctionnement sur l’affichage de votre site WordPress.

Par exemple, si votre Sticky Header ne fonctionne plus sur le thème OceanWP, vous devrez mettre dans le script à exclure d’Autoptimize : « wp-content /plugins/ocean-sticky-header » 
À remplir en cas de nécessité et par un utilisateur avancé ou par votre webmaster.

6. Ajouter l’encapsulation Try-catch :
Ajouter l’encapsulation Try-catch est un autre moyen pour corriger des erreurs JavaScript.

Personnellement, cela n’a rien changé à mon problème JS, donc je ne conseille pas à cocher cette case.

Attention, dans WP Fastest cache, il y aussi un réglage de combinaison du JavaScript : décochez-le.

Combiner le JS - WP Fastest Cache

Réglages CSS

Réglages Options CSS - Autoptimize
Réglages CSS - Autoptimize

Dans l’onglet « Options CSS », il y a six paramètres à régler :

  1. Optimiser le code CSS.  
  2. Concaténer les fichiers CSS.
  3. Concaténer aussi le CSS en ligne.
  4. Génération de données : URI pour les images.
  5. Mettre en ligne et différer le CSS.
  6. Mettre en ligne tous le CSS.

1. Optimiser le CSS :
Le CSS, acronyme de Cascading Style Sheets ou en français feuilles de styles en cascade, est un langage qui gère l’apparence de vos pages web (polices, couleurs, tailles, …).

En cochant cette case, vous allez minifier vos fichiers CSS et donc leurs poids, ce qui accéléra l’affichage des pages de votre site internet. 

Je vous conseille de cocher cette case.

2. Concaténer les fichiers CSS :
La concaténation des fichiers CSS est une technique permettant d’améliorer la rapidité d’affichage en regroupant plusieurs fichiers CSS en un seul.

Je vous conseille de cocher cette case.

3. Concaténer aussi le CSS en ligne :
Concaténer aussi le fichier en ligne signifie qu’Autoptimize regroupe aussi les fichiers CSS inclut dans votre code HTML, mais augmente la taille du cache.

Personnellement, cela a modifié les couleurs de mon menu, donc je ne vous conseille pas de cocher cette case.

4. Génération de données : URI pour les images :
Génération de données : URI pour les images va vous permettre de diminuer le nombre de requêtes HTTP en encodant vos petites images d’arrière-plan en Base64 dans un fichier CSS, mais au détriment d’une augmentation du poids de leurs fichiers respectifs.
(L’URI est l’acronyme de Uniform Resource Identifier ou en français identifiants uniformes de ressources)

Je ne vous conseille pas de cocher cette case.

5. Mettre en ligne et différer le CSS :
Mettre en ligne et différer le CSS vont permettre d’afficher plus rapidement la partie visible de votre page web à l’écran, qu’on appelle communément la ligne de flottaison.
Cette partie de CSS au-dessus de cette ligne de flottaison est nommée CSS critique (CriticalCSS).

Je ne vous conseille pas de cocher cette case.  

6. Mettre en ligne tous le  CSS :
Mettre en ligne tout le CSS va permettre, en injectant le CSS dans le code HTML, d’éviter au CSS de bloquer l’affichage de votre page, mais au détriment d’une augmentation du poids de votre page HTML.

Je ne vous conseille pas de cocher cette case. 

Attention, dans WP Fastest cache, il y aussi un réglage de minification et de combinaison du CSS : décochez-les.

Minifier le CSS - WP Fastest Cache
Combiner le CSS - WP Fastest Cache

Réglages HTML

Réglages HTML - Autoptimize
Réglages HTML - Autoptimize

Dans l’onglet « Options HTML », il y a deux paramètres à régler :

  1. Optimiser le code HTML.  
  2. Conserver les commentaires du HTML.

1. Optimiser le code HTML :
L’optimisation du code HTML
(HyperText Markup Language) consiste à supprimer tous les espaces blancs sauts de ligne et caractères inutiles.
Cela va vous faire économiser de nombreux octets et permettra, de fait, d’améliorer et d’accélérer le temps de chargement des pages.  

Je vous conseille de cocher cette case.

Attention, dans WP Fastest cache, il y aussi un réglage de minification du HTML : décochez-le.

Minifier le HTML- WP Fastest Cache

2. Conserver les commentaires du HTML :
En cochant cette case, mes performances sous GTmetrix étaient un peu moins bonnes, donc je vous conseille de ne pas la cocher.

Réglages CDN

Réglages CDN - Autoptimize
Réglages CDN - Autoptimize

Si vous utilisez un CDN (acronyme de Content Delivery Network ou en français réseau de contenu de diffusion) autre que Cloudfare, saisissez l’URL de votre CDN.

À défaut, laissez la case vide.

Réglages divers

Réglages Options diverses - Autoptimize
Réglages divers - Autoptimize

Dans l’onglet « Options diverses », il y a quatre paramètres à régler :

  1. Enregistrer les scripts CSS concaténés en tant que fichiers statiques.  
  2. Minifier les fichiers CCS et JS exclus.
  3. Activer les solutions de repli en cas d’erreur 404.
  4. Optimiser aussi pour les éditeurs et administrateurs connectés.

1. Enregistrer les scripts CSS concaténés en tant que fichiers statiques :
Sauf si votre serveur web ne peut gérer la compression et l’expiration des fichiers, je vous conseille de cocher cette case.

2. Minifier les fichiers CSS et JS exclus :
Ce réglage permet de minifier la totalité des CSS et JavaScript (JS).
Je vous conseille de cocher cette case.

3. Activer les solutions de repli en cas d’erreur 404.
Sauf si votre site est cassé, je vous conseille de ne pas cocher cette case.

4. Optimiser aussi pour les éditeurs et administrateurs connectés :
Si vous utilisez un constructeur de page (builder) tel Elementor, ne cochez pas cette case.

Réglages Images

Réglages Images - Autoptimize
Réglages images - Autoptimize

Dans l’onglet « Images », il y a deux paramètres à régler :

  1. Optimiser les images.
  2. Chargement différé des images.

1. Optimiser les images :
Cela vous permettra de compresser vos images à la volée et les distribuer via le CDN de ShortPixel.

Je ne vous conseille pas de cocher ce réglage, car ce dernier réécrit automatiquement l’URL de l’image pour pointer vers le CDN de ShortPixel, et de fait, ne sera plus optimisée d’un point de vue SEO.
La conséquence sera que votre image risque de n’être jamais référencée sur Google Images.

Je vous conseille plutôt, avant de la mettre dans votre bibliothèque, de :

  • Réduire le poids de votre image avec un compresseur en ligne, tel que Compressor.
  • Optimiser la réduction avec TinyJPG.
  • Écrire une URL (Uniform Resource Locator) optimisée SEO.

Après la mise de vos images dans votre médiathèque, installer le plugin, gratuit, d’optimisation d’images Smush, qui pourra, encore, alléger leur poids de 3 à 5% .

2. Chargement différé des images :
Le chargement différé ou Lazy Load est une technique utilisée sur votre page web afin d’accélérer leur chargement.

Sans Lazy Load, toutes les images de votre page web sont chargées immédiatement et en totalité, ce qui va ralentir son temps de chargement.

Avec Lazy Load, les images ne seront chargées et affichées que lorsque votre visiteur en ait réellement besoin (en scrollant vers le bas), ce qui permettra d’afficher plus rapidement le haut de votre page (au-dessus de la ligne de flottaison).

Il faut savoir que le Lazy Load est natif depuis la version WordPress 5.5.

En conclusion, si votre site est sous une version inférieure à la 5.5, cochez la case.
À défaut, ne la cochez pas. 

Réglages Extra

Réglages Auto-optimisations supplémentaires - Autoptimize
Réglages extra - Autoptimize

Dans l’onglet « Extra », il y a trois paramètres à régler :

  1. Google Fonts.
  2. Retirer les émojis.
  3. Retirer les chaînes de requête des ressources statiques.

1. Google Fonts :
Ce réglage vous permet d’optimiser le chargement des polices Google sur votre site web.

Si vous n’utilisez pas, par le plus grand des hasards, sur votre site WordPress, des polices Google (Google Fonts) telles que Open Sans, Montserrat, Roboto, … cochez la case Retirer les polices Google.

À défaut, cocher la case Combine et précharge dans l’en-tête ou Combine et lie à l’en-tête.
À vous de tester avec votre thème WordPress et faire votre choix.

Personnellement, sur mon thème OceanWP, j’ai un meilleur score avec Combine et précharge dans l’en-tête.

2. Retirer les emojis :
WordPress charge automatiquement un script qui est wp-emoji-release.min.js et un css en ligne, et qui alourdiront un peu le poids de votre page.

Si vous n’utilisez pas d’emojis sur votre site, cochez la case.

Attention, dans WP Fastest cache, il y aussi un réglage de désactivation des emojis : décochez-le.

Désactiver les emojis- WP Fastest Cache

3. Retirer les chaînes de requêtes des ressources statiques :
N’ayant aucune incidence sur le temps de chargement des pages de votre site WordPress , mais est utile pour les scores de performance web sur GTmetrix par exemple, je vous conseille de cocher cette case.

Il y a aussi 3 autres réglages, mais ce sont pour les utilisateurs avancés (ou pour votre webmaster), donc je n’en parlerai pas ici.
Personnellement, j’ai laissé ces cases vides. 

Comment vider le cache d'Autoptimize ?

Les fichiers minifiés et concaténés par Autoptimize sont stockés dans un dossier / wp-content /cache /autoptimize.

Il est impératif que vous vidiez ce cache quotidiennement ou au pire hebdomadairement.

Pour cela, rien de plus simple.
Il vous suffira de cliquer, d’une part, sur l’onglet Autoptimize, qui s’est installé dans le haut de votre tableau de bord, directement lors de l’installation et activation du plugin d’optimisation WordPress, et d’autre part, sur Vider le cache.  

Effacer le cache d'Autoptimize

Quels sont les résultats obtenus avec Autoptimize + WP Fastest Cache ?

Voilà, les configurations du duo d’extensions d’optimisations WordPress Autoptimize et WP Fastest Cache sont terminées.

Il est temps, maintenant, de voir, les résultats obtenus.

Pour cela, j’ai choisi de prendre deux des meilleurs outils SEO (Search Engine Optimization) pour analyser et tester les performances d’un site web en terme de vitesse :

Pour effectuer les tests :

  • J’ai vidé le cache du navigateur Google Chrome.
  • Je me suis mis en navigation privée.
  • J’ai choisi Londres comme location géographique du serveur de test.

Résultats sans Autoptimize, ni WP Fastest Cache

PageSpeed Insights version mobile sans plugin de cache
Résultats PageSpeed Insights version mobile sans aucun plugin d'optimisation WordPress
PageSpeed Insights version PC sans plugin de cache
Résultats PageSpeed Insights version PC sans aucun plugin d'optimisation WordPress
GT Metrix sans plugin de cache
Résultats sans aucun plugin d'optimisation WordPress

Analyse des résultats sans aucun plugin d’optimisation :
Les résultats obtenus sur PageSpeed Insights ne sont pas fameux du tout, malgré l’utilisation d’un thème optimisé pour la vitesse d’affichage.

Pour rappel, un score de :

  • De 0 à 49 : les performances de la page web sont médiocres.
  • De 50 à 89 : les performances de la page internet sont dans la moyenne.
  • De 90 à 100 : les performances de la page WordPress sont excellentes.

On peut constater qu’en :

  • Version mobile : c’est une catastrophe (27).
  • Version PC : c’est juste convenable (54).

Les résultats obtenus sur GTmetrix, version 2021, utilisent désormais la technologie Lighthouse de Google ainsi que les Core Web Vitals, mais en les pondérant selon un calcul bien précis.

Sans rentrer dans le détail aujourd’hui, voilà ce qu’il faut savoir pour lire un rapport d’analyse de GTmetrix.

La note GTmetrix globale, sous forme de lettre (A à F), est une moyenne pondérée du score de performance (70%) et du score de structure (30%) :

La notation globale est graduée de A à F et mis en exergue avec des couleurs (vert, orange, rouge) :

  • A et B, de couleur verte, informent que la page web s’affiche très rapidement (A) à rapidement (B).
  • C et D, de couleur orange, reflètent un affichage de la page internet dans la moyenne haute (C) à moyenne basse (D).
  • E et F, de couleur rouge, signifient que la page WordPress s’affiche lentement (E) à très lentement (F).

Le score de performance vous indique les performances de votre page d’un point de vue end-user (expérience utilisateur).
Il doit être le plus élevé possible avec un minimum de 50%.

Le score de structure vous indique dans quelle mesure votre page est conçue pour des performances optimales.
Il doit être le plus élevé possible avec un minimum de 50%.

Dans notre cas, les deux valeurs les plus importantes qu’il faut suivre sont la lettre et le score de performance.

Concernant les scores de Core Web vitals, qui seront pris en compte dans l’algorithme de classement de Google à partir de mai 2021, la valeur la plus importante, à suivre dans notre cas, est le LCP (Largest Contentful Paint) ou en français plus grande peinture de contenu.

Le LCP mesure les performances de chargement de la page.
La métrique indique le temps que met le contenu principal (image, bloc de texte) de la page à s’afficher sur l’écran de l’internaute, et qui est prêt pour l’interaction.
(Seul étant pris en compte le contenu au dessus de la ligne de flottaison).

Google considère qu’un LCP< 2.5 secondes est bon et qu’un LCP>4 secondes comme mauvais.
Gtmetrix considérant, pour sa part, qu’un bon score devrait être <1.2 seconde.

On peut constater que c’est, logiquement, tout aussi mauvais :

  • Une notation GTmetrix de E.
  • Un score de performance de 38%.
  • L’affichage de ma page prend 3.3 secondes.

Résultats sans Autoptimize, mais avec WP Fastest Cache

Réglages Plugin WordPress - WP Fastest Cache
Configuration initiale plugin WordPress WP Fastest Cache

Analyse des résultats avec le plugin WP Fastest Cache activé :
Les résultats obtenus sur PageSpeed Insights sont déjà plus corrects, mais sans être excellents non plus.

On peut constater qu’en :

  • Version mobile : il y a eu une grosse progression (42) au lieu de (27).
  • Version PC : cela s’est aussi un peu amélioré (68) au lieu de (54).

Les résultats obtenus sur GTmetrix, version 2021 ont fortement progressés, mais tout en restant dans la moyenne.

On peut constater qu’en activant simplement WP Fastest Cache, j’obtiens :

  • Une notation GTmetrix de C au lieu de E.
  • Un score de performance de 63%  au lieu de 38 %
  • L’affichage de ma page prend 1.5 seconde au lieu de 3.3 secondes.
PageSpeed Insights version mobile - WP Fastest Cache
Résultats Google Page Speed Insights version mobile avec WP Fastest Cache
PageSpeed Insights version PC avec WP Fastest Cache
Résultats PageSpeed Insights version PC avec WP Fastest Cache
GT Metrix avec WP Fastest Cache
Résultats GTmetrix avec WP Fastest Cache

Résultats avec Autoptimize et WP Fastest Cache

Analyse des résultats avec les plugins WP fastest Cache et Autoptimize activés :
Les résultats obtenus sur PageSpeed Insights sont bons, mais sans être excellents non plus.

On peut constater qu’en :

  • Version mobile : il y a eu une petite progression (56).
  • Version PC, cela s’est beaucoup amélioré (86).

Les résultats obtenus sur GTmetrix, version 2021 ont fortement progressés, mais tout en restant dans la moyenne haute.

On peut constater qu’en activant simplement WP Fastest Cache, j’obtiens :

  • Une notation GTmetrix de B
  • Un score de performance de 79%.
  • L’affichage de ma page ne prend plus que 0.8 seconde.
PageSpeed Insights version mobile avec Autoptimize et WP Fastest Cache
Résultats Page Speed Insights version mobile avec Autoptimize et WP Fastest Cache
PageSpeed Insights version PC avec Autoptimize et WP Fastest Cache
Résultats PageSpeed Insights version PC avec Autoptimize et WP Fastest Cache
GT Metrix avec Autoptimize et WP Fastest Cache
Résultats GTmetrix avec Autoptimize et WP Fastest Cache

Conclusion sur Autoptimize

Comme vous avez pu le constater, saupoudrer WP Fastest Cache d’un zest d’Autoptimize améliore grandement les performances de vitesse d’affichage d’une page web.

Et le résultat obtenu est plus que satisfaisant pour une association de plugins gratuits d’optimisations.

Mais l’installation de ces deux extensions SEO n’aura que peu d’effets sur un thème non optimisé nativement pour sa légèreté et qui est mis sur un hébergeur lent (mutualisé ou non). 

Pour cela, je ne peux que vous conseiller comme :

Mais avoir un site WordPress qui s’affiche rapidement, c’est bien, mais avoir un site rapide qui s’affiche sur les premières pages de résultats du moteur de recherche Google, c’est encore mieux !

Et là est tout l’intérêt de faire appel à un sympathique consultant en référencement naturel pour réaliser un audit SEO.

Laisser un commentaire