La mise en cache et la minification des fichiers HTML, CSS et Javascript sont deux solutions permettant d’optimiser les performances de son site WordPress à moindre frais. Il suffit en effet d’installer deux extensions et d’effectuer quelques réglages. Découvrez WP Fastest Cache et Autoptimize, deux extensions pour rendre son site web encore plus rapide et performant.
1. WP Fastest cache
L’installation se déroule depuis le menu Extensions > Ajouter de WordPress. Cherchez le nom du plugin, et cliquez sur « Installer » sans oublier d’activer le plugin ensuite.
L’installation du plugin crée un nouvel élément de menu, WP Fastest Cache, dans votre administration WordPress. C’est là que vous allez effectuer les réglages.
L’onglet Configuration du plugin de cache
Ici, vous pouvez déjà régler la langue grâce au menu déroulant en bas de l’onglet.
Système de cache – Cette case permet tout simplement d’activer le plugin.
Préchargement – Cette option permet de créer immédiatement une version en cache de votre site, pour qu’il se charge plus rapidement dès le passage du premier visiteur suivant l’activation du plugin.
Quand vous cochez l’option, vous pouvez choisir ce que vous incluez dans cette version préchargée : la page d’accueil, les publications, les catégories, les pages, les étiquettes, les fichiers joints, les types de publications et taxonomies personnalisés… Vous pouvez tout cocher et laisser le nombre de pages par minute par défaut, il est conçu pour ne pas surcharger votre serveur. Il n’est pas utile non plus de cocher la case « Redémarrer une fois terminé ».
Utilisateurs connectés – C’est la seule case que je vous conseille de ne pas cocher. Elle bloque le fonctionnement du cache pour les membres du site (dont vous, l’administrateur !). Je trouve pour ma part qu’il est préférable de voir la même version que ses visiteurs afin de détecter plus facilement d’éventuels problèmes.
Mobile – Cette option évite de montrer le cache créé sur ordinateur aux visiteurs qui sont sur un mobile.
Nouvelle publication – Cette option est utile car elle vide le cache et le « met à jour » quand vous publiez un nouvel article ou une nouvelle page.
Mettre à jour la publication – Dans le même esprit, cette option permet de vider le cache quand vous mettez à jour un contenu, l’idée étant là encore de faire en sorte que la version en cache soit la plus à jour possible pour vos visiteurs.
Options de compression des fichiers et des images – Nous avons ensuite accès à différentes options qui permettent de minifier les fichiers HTML, CSS et JavaScript, ainsi que les images pour réduire leur poids. Le plugin Autoptimize (voir ci-dessous) se chargera de la minification.
Cache navigateur – Cette option permet de tirer profit du navigateur de vos visiteurs réguliers, en stockant certains fichiers dedans. Par exemple, votre logo sera « mis en mémoire » dans le navigateur du visiteur, de telle sorte qu’il n’aura pas à le charger une seconde fois.
Désactiver les émoticônes – Cette option permet de supprimer les fichiers ajoutés automatiquement par WordPress dans le header du site, là encore pour alléger le poids des pages.
L’onglet Supprimer le cache
C’est là que vous pouvez effacer le cache complet ou le cache et le css/js minifié. Ces fonctionnalités sont utiles quand vous apportez des changements à votre blog (par exemple en modifiant un élément du design) et que vous ne les voyez pas apparaître même en rechargeant la page : le cache est souvent resté actif et vous montre donc encore la version gardée en mémoire au lieu de vous montrer la version modifiée des pages. Vider le cache permet alors de visualiser la page telle qu’elle est réellement.
Notez que l’on peut aussi effacer le cache via un bouton « Supprimer le cache » présent dans la barre d’options en haut de l’administration.
2. Autoptimize
La fonction principale de ce plugin est de concaténer et de minifier les fichiers CSS et Javascript dans un fichier unique mis en cache en remplacement de la multitude de fichiers que vous avez installés (ou que d’autres extensions ont installés pour vous). Ce plugin permet également d’optimiser les images de votre site web par réduction du poids.
Installer et configurer Autoptimize
Après l’installation et l’activation du plugin, un nouveau menu « Autoptimize » s’ajoutera à votre tableau de bord. Cliquez dessus afin d’accéder à la page des réglages du plugin.
Une fois sur cette page, vous remarquerez quelques options qui s’offrent à vous. Ces options vous permettent notamment d’optimiser le code HTML, JavaScript, et CSS, et d’optimiser les images.
Pour un réglage optimisé
JavaScript
- Optimiser le code Javascript — Concatène et compresse votre code Javascript.
- Concaténer les fichiers JS — Concaténer tous les fichiers JS pour éviter de bloquer le rendu de la page ? Si cette option est désactivée, les fichiers JS individuels ne seront pas regroupés mais juste optimisés.
CSS
- Optimiser le code CSS — Concatène et compresse votre code CSS.
- Concaténer les fichiers CSS — Concaténer tous les fichiers CSS liés ? Si cette option est désactivée, les fichiers CSS individuels ne seront pas regroupés mais juste optimisés.
- Agréger aussi les CSS inline — Cochez cette option pour qu’Autoptimize agrège aussi les CSS dans le code HTML.
HTML
- Optimiser le code HTML — Concatène et compresse votre code HTML
Optimisation des images
- Optimiser des images — Optimiser les images à la volée et les distribuer via le CDN de Shortpixel.
- Utiliser le format WebP pour les navigateurs compatibles — Utiliser automatiquement le format d’image WebP pour les navigateurs compatibles (le lazy-loading doit être activé).
- Affichage des images en lazy-loading — Le Lazy-loading permet de retarder l’affichage des images non visibles (hors du viewport) afin d’optimiser le chargement des ressources au dessus de la ligne de flottaison (« above the fold »).
