Autoptimize

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, 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

  • 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.

Comment l'utiliser ?

  • 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

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 !