Plugin Autoptimize

Table des matières

Autoptimize est un plugin WordPress gratuit qui va vous permettre de minifier vos fichiers CSS, JavaScript et HTML et de concaténer vos fichiers JavaScript et CSS. La minification allège le code de vos fichiers respectifs ainsi que le poids de vos pages web. La concaténation, quant à elle, consiste à mettre bout à bout ces fichiers JavaScript et CSS. Ainsi, le nombre de requêtes HTTP émises par le navigateur de vos utilisateurs est réduit et l’affichage des pages est plus rapide.

En plus de cela, l’extension WordPress Autoptimize propose depuis peu une fonction de compression de vos images. C’est-Ă -dire que celles-ci verront leur poids diminuer, sans dĂ©gradation de qualitĂ©.
Attention, la compression des images ne redimensionne pas les images. Il faut pour cela passer par un outil externe tel que iLoveIMG ou par un plugin comme Ajax Thumbnail Rebuild. Ce service supplémentaire n’est cependant pas compris dans l’offre gratuite d’Autoptimize.

Vous pourrez également retrouver une fonctionnalité de lazy loading pour vos images. Cette option permet aux images de n’être chargées qu’au dernier moment, c’est-à-dire au moment où l’utilisateur est sur le point de voir l’image, et non pas lorsqu’il charge la page. En diminuant ainsi le poids de la page à charger, on augmente la vitesse de chargement.

Installation et configuration de l'extension Autoptimize

  • Rendez-vous sur le back office de votre site WordPress.
  • Cliquez sur l’onglet Extensions du menu vertical de votre back office, puis cliquez sur le bouton « Ajouter ».
  • Dans la barre de recherche d’extensions, recherchez « Autoptimize » puis installez et activez l’extension.

Besoin d'aide pour installer le plugin Autoptimize ?

Comment utiliser le plugin Autoptimize avec WordPress ?

  • Rendez-vous sur le back office de votre site WordPress.
  • Cliquez sur l’onglet « RĂ©glages » du menu latĂ©ral de votre back office puis sur “Autoptimize”.

 

Depuis les paramètres Autoptimize, dans “JS, CSS & HTML” :

  • Vous pouvez laisser les paramètres de “Options JavaScript” tels quels, Ă  savoir de ne laisser cocher que “Optimiser le code JavaScript” et “ConcatĂ©ner les fichiers JS”.
  • Pour les paramètres “Options CSS”, ne cochez que les deux premiers paramètres, Ă  savoir “Optimiser le code CSS” et “ConcatĂ©ner les fichiers CSS”. 
  • Options HTML : ne cochez que le premier paramètre, c’est-Ă -dire “Optimiser le code HTML”. Il est inutile de conserver les commentaires.
  • Dans les options diverses, laissez les paramètres “Enregistrer les script js/css en tant que fichiers statiques”, “Optimiser les fichiers CSS/JS exclus” et “Optimiser aussi pour les Ă©diteurs et administrateurs connectĂ©s” cochĂ©s.

 

N’oubliez pas d’enregistrer les modifications avant de poursuivre !

 

Depuis les paramètres Autoptimize, dans “Images” :

  • Vous pouvez ici activer le lazy loading de vos images. Nous vous recommandons de de l’activer afin de maximiser les performances de votre site web.

 

Depuis les paramètres Autoptimize, dans “Extra” :

  • Google fonts : choisissez le paramètre “combiner et prĂ©charger dans l’en-tĂŞte”
  • Si vous n’utilisez pas d’emojis, cochez la case “dĂ©sactiver les emojis”.
  • Cochez Ă©galement le paramètre “Supprimer les chaĂ®nes de requĂŞtes des ressources statiques”

 

Voilà qui conclut notre paramétrage de Autoptimize. N’oubliez pas de sauvegarder vos modifications !

Le conseil de votre formateur WordPress

N’oubliez pas de purger votre cache si vous changez vos paramètres ou que vous n’avez pas fini de construire votre site. Cela évitera de garder en cache des paramètres ou un rendu obsolètes !

Besoin d'aide pour configurer et utiliser le plugin Autoptimize ?