Autoptimize est une extension WordPress gratuite d’optimisation. En plus de l’optimisation HTML, CSS et JavaScript, Autoptimize comprend également des fonctions d’optimisation ciblées sur d’autres aspects des sites WordPress modernes.
Dans cet article, nous allons partager les meilleurs réglages de l’extension Autoptimize pour améliorer les performances et la vitesse des pages de votre site WordPress.
Pourquoi Autoptimize ?
Avant de nous plonger dans les meilleurs réglages d’Autoptimize, passons rapidement en revue trois raisons pour lesquelles Autoptimize est une excellente extension d’optimisation.
- La version gratuite d’Autoptimize dispose d’un ensemble complet de fonctionnalités pour optimiser votre site WordPress.
- Autoptimize est strictement une extension d’optimisation et ne fait pas de mise en cache de pages HTML. Cela signifie qu’elle est compatible avec tous les hébergeurs web, même ceux qui ont des configurations de mise en cache de pages personnalisées comme Kinsta.
- Autoptimize compte plus d’un million d’installations actives dans le dépôt WordPress et est constamment mise à jour avec de nouvelles fonctionnalités et des corrections de bugs.
Réglages JS, CSS et HTML d’Autoptimize
HTML, CSS et JavaScript sont le pain et le beurre d’Autoptimize. Comme pour les autres extensions d’optimisation, il peut être difficile de se plonger dans le vaste ensemble de fonctionnalités et de réglages d’Autoptimize. Pour vous faciliter la tâche, nous avons compilé les meilleurs réglages pour Autoptimize afin d’améliorer les performances de votre site.
Options JavaScript
Optimiser le code JavaScript
Nous recommandons d’activer cette option. Lorsque l’option « Optimize JavaScript Code » est activée, Autoptimize va minifier vos fichiers JavaScript.
Fichiers JS agrégés
L’option « Aggregate JS-Files » d’Autoptimize combinera tous vos fichiers JavaScript en un seul fichier. Dans le passé, la combinaison des fichiers JS et CSS était une étape clé de l’optimisation de WordPress. Chez Kinsta, nous utilisons des serveurs HTTP/2 modernes qui prennent en charge les téléchargements parallèles et le multiplexage – cela signifie que la combinaison des fichiers n’est plus aussi importante qu’auparavant car HTTP/2 permet de télécharger plusieurs fichiers en même temps. Cela dit, l’agrégation de fichiers CSS et JS se traduira toujours par un gain de vitesse pour certains types de sites WordPress, c’est pourquoi nous vous recommandons de tester la vitesse de votre page avec cette option activée et désactivée.
Agréger aussi les JS inline
L’option « Also aggregate inline JS » extrait le JS en ligne dans votre HTML, et le combine avec le fichier JS optimisé d’Autoptimize. Comme cette option peut entraîner une augmentation rapide de la taille du cache d’Autoptimize, nous vous recommandons de la désactiver, sauf si vous avez une raison particulière de l’activer.
Forcer le JavaScript dans l’en-tête
Dans la plupart des cas, nous ne recommandons pas de forcer les fichiers JavaScript à se charger dans l’élément HTML d’en-tête de votre site, notamment avec l’option « Force JavaScript in <head> ». Forcer JS à se charger tôt peut entraîner des éléments de blocage du rendu qui peuvent ralentir la vitesse de votre page. Si vous avez des fichiers JavaScript qui doivent être chargés dans l’élément <head>, nous vous recommandons d’exclure ces scripts de l’option Autoptimize.
Exclure les scripts d’Autoptimize
Cette option vous permet d’exclure des répertoires et des fichiers JavaScript spécifiques de l’agrégation. Par défaut, l’option Autoptimize exclut les scripts suivants.
- wp-includes/js/dist/
- wp-includes/js/tinymce/
- js/jquery/jquery.js
Notez que l’ajout d’un script à exclure n’affecte que l’agrégation par défaut. Les fichiers JavaScript exclus seront toujours minifiés à moins que la case « Minifier les fichiers CSS et JS exclus » ne soit décochée sous « Options diverses ».
Ajouter une gestion des erreurs (trycatch)
En activant l’option « Ajouter une gestion des erreurs », votre code JavaScript sera enveloppé dans des blocs try-catch. Cette option est utile pour déboguer les problèmes causés par la minification et l’agrégation JS. Si votre site ne fonctionne qu’avec l’option « Ajouter une gestion des erreurs » activée, nous vous recommandons de travailler avec un développeur pour passer en revue vos fichiers JavaScript afin d’identifier celui qui cause le problème, car une utilisation excessive des blocs try-catch peut réduire les performances de JS.
Options CSS
Optimize CSS Code
Nous recommandons d’activer cette option. Lorsque l’option « Optimiser le code CSS » est activée, Autoptimize va minifier vos fichiers CSS.
Aggregate CSS Files
L’option « Agréger les fichiers CSS » d’Autoptimize permet de combiner tous vos fichiers CSS en un seul fichier. Comme nous l’avons déjà mentionné, cette fonction peut ne pas être utile aux sites qui supportent HTTP/2. Nous vous recommandons de tester cette option sur votre site afin de déterminer si elle a un impact positif sur la vitesse des pages.
Also aggregate inline CSS
Cette option permet de déplacer le CSS inline vers le fichier CSS d’Autoptimize. Bien que le déplacement du CSS inline vers un fichier CSS pouvant être mis en cache par le navigateur puisse réduire la taille de la page, nous recommandons de laisser cette option désactivée dans la plupart des cas.
Generate Data : URLs for images
Lorsque cette option est activée, Autoptimize va coder en base64 de petites images d’arrière-plan et les intégrer dans le CSS. Nous vous recommandons de tester cette option pour évaluer l’impact sur la vitesse de votre page. Bien que le codage des images au format base64 réduise le nombre de requêtes HTTP, les fichiers de représentation base64 sont généralement 20 à 30 % plus volumineux que leurs équivalents binaires.
Inline and Defer CSS
La mise en ligne de CSS critiques peut entraîner une augmentation significative de la vitesse de certains sites. Il s’agit ici des styles en ligne qui sont nécessaires pour les éléments qui se trouvent « au-dessus du pli ». En pratique, le CSS en ligne cible généralement des éléments tels que les éléments structurels, les familles et tailles de police globales et le style de navigation.
En soulignant ces éléments clés, le fichier CSS complet plus volumineux peut être chargé ultérieurement sans que l’aspect de la page en soit affecté. Bien qu’il soit possible d’extraire manuellement les styles critiques, nous recommandons d’utiliser comme point de départ un outil comme celui-ci pour générer les styles.
Après avoir généré le CSS critique, copiez le et collez le dans les réglages d’Autoptimize.
L’étape suivante consiste à tester l’expérience de votre site sur l’interface publique. Si vous remarquez des flashs étranges de contenu non stylisé (FOUC), vous devrez probablement identifier ces éléments non stylisés et ajouter les styles correspondants dans Autoptimize pour l’inlining.
Autoptimize offre un « boost » qui génère automatiquement les CSS critiques pour vos pages WordPress. D’après notre expérience, cette fonctionnalité peut parfois ralentir votre site car elle utilise des appels d’API externes pour générer les CSS critiques. Ainsi, la génération initiale du CSS critique dépend de la réactivité d’un serveur externe. Dans la plupart des cas, la méthode susmentionnée, qui ne nécessite aucun appel d’API externe, est une solution plus propre.
Inline All CSS
Pour la plupart des sites, nous ne recommandons pas la mise en ligne de tous les CSS car cela peut augmenter considérablement la taille des pages. De plus, la mise en ligne de tous les CSS rend impossible la mise en cache des CSS par le navigateur web.
Exclude CSS from Autoptimize
Par défaut, Autoptimize exclut les répertoires et les fichiers CSS suivants de l’agrégation. Si vous souhaitez empêcher Autoptimize d’agréger l’un de vos fichiers CSS, vous pouvez l’ajouter à cette liste. Comme pour l’exclusion JavaScript, le comportement par défaut de cette fonction n’empêche pas la réduction des fichiers CSS, mais seulement leur agrégation.
- wp-content/cache/
- wp-content/uploads/
- admin-bar.min.css
- dashicons.min.css
Options HTML
L’optimisation HTML d’Autoptimize peut aider à réduire la taille de vos pages en supprimant les espaces.
Optimize HTML Code
Nous vous recommandons d’activer la fonction « Optimiser le code HTML » car elle permet de réduire la taille des pages en supprimant les espaces inutiles dans votre code HTML. Bien que cette fonction soit compatible avec la plupart des sites, la suppression des espaces peut entraîner des problèmes sur certains sites. Nous vous recommandons donc de tester soigneusement l’optimisation du code HTML avant de l’utiliser dans un environnement de production.
Keep HTML comments
Activez cette fonction si vous souhaitez conserver des commentaires HTML pour vos pages optimisées.
Options CDN
Si vous utilisez Kinsta CDN ou un service proxy avec des capacités CDN comme Cloudflare, vous n’avez rien à configurer dans les options CDN d’Autoptimize. Pour améliorer encore plus rapidement et plus facilement votre optimisation globale, vous pouvez envisager de minifier votre code. Vous pouvez le faire directement dans le tableau de bord MyKinsta en utilisant la fonction de minification du code.
Si, toutefois, vous utilisez un autre service CDN pour accélérer vos ressources, vous devez saisir l’URL du CDN dans ce champ.
Informations du cache
Les « informations de cache » d’Autoptimize affichent des informations importantes comme l’emplacement et les autorisations du dossier de cache, ainsi que la taille totale des styles et des scripts mis en cache. Si vous voyez « Non » à côté de « Droits d’écriture ? », vous devrez travailler avec votre hébergeur pour corriger les permissions du dossier.
Options diverses
Autoptimize dispose de quelques réglages d’optimisation divers. Si vous avez des problèmes pour obtenir des fichiers CSS et JS optimisés à charger sur votre site, vous devrez peut-être reconfigurer certains des réglages ci-dessous.
Enregistrer les scripts agrégés/CSS sous forme de fichiers statiques
Nous recommandons d’activer cette option pour enregistrer localement les fichiers agrégés sous forme de fichiers statiques. Vous devrez peut-être la désactiver si votre serveur n’est pas configuré pour gérer la compression et l’expiration des fichiers.
Minifier les fichiers CSS et JS exclus
Nous recommandons d’activer cette option pour garantir que tous les fichiers CSS et JS sont minifiés. Cependant, si vous remarquez des problèmes de minification avec certains de vos fichiers CSS et JS exclus, vous pouvez désactiver cette option.
Optimiser également pour les rédacteurs et administrateurs connectés
Nous recommandons d’activer cette fonction pour garantir l’optimisation des ressources pour les éditeurs et les administrateurs connectés. C’est important si vous testez les réglages d’Autoptimize en tant qu’utilisateur connecté.
Optimisation d’image dans Autoptimize
La fonction d’optimisation automatique est intégrée à ShortPixel pour optimiser les images. En plus d’un réglage de qualité d’image, l’intégration d’Autoptimize vous permet également de générer et de servir des versions WEBP de vos images.
Pour les utilisateurs de Kinsta, nous ne recommandons pas l’utilisation de la fonction d’optimisation d’image dans Autoptimize. Nous recommandons plutôt d’utiliser directement les extensions complètes de ShortPixel ou Imagify. Avec l’extension complète, vous aurez un contrôle plus granulaire des réglages d’optimisation, y compris la réécriture des images pour utiliser la balise, qui est nécessaire pour le support WEBP sur Kinsta.
Autoptimize comprend également une fonction de chargement différé des images. Nous recommandons d’activer cette fonction pour améliorer la vitesse des pages pour les pages contenant beaucoup d’images. Lorsque le chargement différé est activé, la fonction d’Autoptimize vous permet d’exclure certaines classes d’images et certains noms de fichiers du chargement différé.
Le réglage d’exclusion est utile pour les images comme les logos, les icônes sociales et d’autres éléments d’image importants qui ne doivent pas être chargés en différé. Si vous cherchez une solution qui vous permette de mieux contrôler le chargement différé, consultez notre guide sur le chargement différé d’images et de vidéos dans WordPress.
Optimisations supplémentaires dans Autoptimize
Les polices Google
Autoptimize propose différentes options pour optimiser les polices Google. La meilleure option pour vous dépendra de la façon dont votre site utilise les polices Google.
- Laisser tel quel
- Supprimer les polices Google.
- Combiner et relier dans l’en-tête.
- Combiner et précharger dans l’en-tête.
- Combiner et charger les polices de manière asynchrone avec webfont.js.
Nous ne recommandons pas d’utiliser l’option « laisser tel quel » car elle n’offre aucun avantage en termes de rapidité.
Si les polices Google ne sont pas une condition essentielle pour votre site, leur suppression et l’utilisation à la place d’une pile de polices système peuvent avoir un impact positif énorme sur la vitesse de votre page.
Si vous souhaitez conserver les polices Google sur votre site, nous vous recommandons de tester les trois dernières options afin de déterminer celle qui convient le mieux à votre site.
Supprimer les Emojis
Cette option d’optimisation automatique supprime les CSS et JavaScript liés aux émojis du cœur de WordPress. Nous vous recommandons d’activer cette option car elle peut vous aider à réduire la taille de votre page. De plus, la plupart des systèmes d’exploitation courants sont livrés avec des piles de polices qui incluent des émois. Bien entendu, il existe d’autres moyens de désactiver les émois sur votre site WordPress.
Supprimer les chaînes de requête des ressources statiques
Si vous souhaitez supprimer des chaînes de requête (par exemple ?ver=) des ressources statiques, vous pouvez activer cette option. La suppression des chaînes de requête n’aura pas d’incidence sur le temps de chargement, mais elle peut contribuer à améliorer le score de votre site dans GTmetrix, Google Pagespeed et d’autres services de test de performance.
Pré-connexion à des domaines tiers
La directive de pré-connexion permet à votre navigateur de se connecter à des domaines spécifiques pour traiter les consultations (lookups) DNS et les négociations handshake SSL avant qu’une requête HTTP complète ne soit envoyée.
Par exemple, si votre site a une image de logo qui est servie depuis https://site.kinsta.cdn.com/logo.png, vous pouvez demander à Autoptimize d’ajouter une directive de pré-connexion pour gérer les connexions DNS et SSL initiales dans l’élément <head> avant que la requête HTTP ne soit faite dans l’élément <body> HTML.
Vous pouvez utiliser les outils de développement ou l’inspecteur de votre navigateur pour trouver des domaines externes importants auxquels vous pouvez vous connecter. Dans l’exemple de page ci-dessous, il y a des requêtes externes pour les domaines suivants.
https://cdn.brianli.comhttps://www.google-analytics.comhttps://www.googletagmanager.com
Ces trois domaines peuvent être ajoutés à la liste de pré-connexion d’Autoptimize.
Pour des raisons de performances, nous recommandons de ne pas ajouter plus de six domaines à la liste de pré-connexion d’Autoptimize, car la spécification de directives de pré-connexion pour un trop grand nombre de domaines peut entraîner une baisse des performances.
Précharger les requêtes spécifiques
Les directives de préchargement indiquent à votre navigateur web de télécharger une ressource dès que possible. Cette directive est utile pour télécharger les ressources qui sont nécessaires très tôt dans le processus de chargement de la page. En pratique, le préchargement est souvent utilisé pour accélérer le temps de chargement des polices personnalisées en les chargeant avant qu’elles ne soient demandées dans le CSS de la page.
Nous vous recommandons de consulter un développeur pour savoir quels ressources, le cas échéant, doivent être préchargées sur votre site WordPress. Comme pour de nombreuses autres modifications liées aux performances, le préchargement d’un trop grand nombre d’éléments peut ralentir le chargement de votre site.
Fichiers JavaScript asynchrones
La fonction « fichiers JavaScript asynchrones » d’Autoptimize vous permet de spécifier certains fichiers JavaScript externes à charger de manière asynchrone via le HTML async. Bien que le chargement asynchrone des fichiers JS puisse améliorer la vitesse de la page, nous recommandons de faire des tests adéquats pour s’assurer qu’aucune fonctionnalité du site n’est affectée.
Résumé
Si vous savez maintenant comment modifier ses réglages, l’extension Autoptimize est une option solide pour les utilisateurs de WordPress qui cherchent à améliorer les performances de leur site.
Avec des fonctionnalités de base comme l’optimisation HTML et CSS et des fonctionnalités plus avancées, comme l’intégration CDN et la possibilité de spécifier des directives de pré-connexion et de préchargement, Autoptimize a tout ce dont vous avez besoin pour optimiser les performances de l’interface publique de votre site WordPress.
Si vous souhaitez en savoir plus sur l’optimisation de WordPress et sur la manière d’optimiser l’administration de votre site, n’oubliez pas de consulter notre guide complet des performances de WordPress.
Bonjour,
Merci pour vote article.
Savez vous comment supprimer le cache régulièrement autre que manuellement.
Merci.