Wordpress

Comment configurer l'optimisation automatique pour votre site WordPress

Autoptimize est un plugin d'optimisation WordPress gratuit. En plus de l'optimisation HTML, CSS et JavaScript, Autoptimize inclut également des fonctionnalités d'optimisation ciblées sur d'autres aspects des sites WordPress modernes.

Dans cet article, nous partagerons les meilleurs paramètres de plugin Autoptimize pour améliorer les performances et la vitesse des pages de votre site WordPress.

Pourquoi l'optimisation automatique ?

Avant de plonger dans les meilleurs paramètres Autoptimize, examinons rapidement trois raisons pour lesquelles Autoptimize est un excellent plugin d'optimisation.

  1. La version gratuite d'Autoptimize dispose d'un ensemble complet de fonctionnalités pour optimiser votre site WordPress.
  2. Autoptimize est strictement un plugin d'optimisation et ne fait aucune mise en cache de page HTML. Cela signifie qu'il est compatible avec tous les hébergeurs Web - même ceux avec des configurations de mise en cache de pages personnalisées comme Behmaster.
  3. Autoptimize compte plus d'un million d'installations actives dans le référentiel WordPress et est constamment mis à jour avec de nouvelles fonctionnalités et des corrections de bogues.

Optimiser automatiquement les paramètres JS, CSS et HTML

HTML, CSS et JavaScript sont le pain quotidien d'Autoptimize. Comme pour les autres plugins d'optimisation, creuser dans le vaste ensemble de fonctionnalités et les paramètres d'Autoptimize peut être une tâche intimidante. Pour faciliter les choses, nous avons compilé les meilleurs paramètres d'optimisation automatique pour améliorer les performances de votre site.

Options JavaScript

Optimisation JavaScript dans Autoptimize.
Optimisation JavaScript dans Autoptimize.

Optimiser le code JavaScript

Nous vous recommandons d'activer cette option. Lorsque « optimiser le code JavaScript » est activé, Autoptimize réduira vos fichiers JavaScript.

Agréger les fichiers JS

L'option "Agréger les fichiers JS" d'Autoptimize combinera tous vos fichiers JavaScript en un seul fichier. Dans le passé, combiner les fichiers JS et CSS était une étape clé dans l'optimisation de WordPress. À Behmaster, 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 de 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 entraînera toujours un ralentissement pour certains types de sites WordPress, nous vous recommandons donc de tester la vitesse de votre page avec cette option activée et désactivée.

Agréger également Inline JS

L'option "Agréger également le JS en ligne" extrait le JS en ligne dans votre code HTML et le combine avec le fichier JS optimisé d'Autoptimize. Étant donné que cette option peut entraîner une augmentation rapide de la taille du cache d'Autoptimize, nous vous recommandons de laisser cette option désactivée à moins que vous n'ayez une raison spécifique de l'activer.

Forcer JavaScript dans

Dans la plupart des cas, nous vous déconseillons de forcer le chargement des fichiers JavaScript dans le code HTML de votre site. élément. Forcer JS à se charger tôt peut entraîner des éléments bloquant le rendu qui peuvent ralentir la vitesse de votre page. Si vous avez des fichiers JavaScript qui doivent être chargés dans le élément, nous vous recommandons d'exclure ces scripts d'Autoptimize.

Exclure les scripts de l'optimisation automatique

Cette option vous permet d'exclure des répertoires et des fichiers JavaScript spécifiques de l'agrégation. Par défaut, Autoptimize exclut les scripts suivants.

  • wp-inclut/js/dist/
  • wp-inclut/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 réduits à moins que « minifier les fichiers CSS et JS exclus » ne soit décoché sous « Options diverses ».

Ajouter un emballage Try-Catch

L'activation de l'option « ajouter un emballage try-catch » encapsulera votre code JavaScript 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 un emballage try-catch » activée, nous vous recommandons de travailler avec un développeur pour parcourir 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.

Autoptimize : le plugin d'optimisation WordPress gratuit dont vous ne saviez pas avoir besoin… mais qui rendra votre site ultra-rapide ⚡️Ce guide explique exactement pourquoi vous en avez besoin 🚀Click to Tweet

Options CSS

Optimisation automatique de l'optimisation CSS.
Optimisation automatique de l'optimisation CSS.

Optimiser le code CSS

Nous vous recommandons d'activer cette option. Lorsque « optimiser le code CSS » est activé, Autoptimize réduira vos fichiers CSS.

Agréger les fichiers CSS

L'option "Agréger les fichiers CSS" d'Autoptimize combinera tous vos fichiers CSS en un seul fichier. Comme nous l'avons mentionné précédemment, cette fonctionnalité peut ne pas profiter aux sites prenant en charge HTTP/2. Nous vous recommandons de tester A/B cette option sur votre site pour déterminer s'il y a un impact positif sur la vitesse de la page.

Agréger également le CSS en ligne

Cette option déplacera le CSS en ligne vers le fichier CSS d'Autoptimize. Bien que le déplacement du CSS en ligne vers un fichier CSS pouvant être mis en cache par le navigateur puisse réduire la taille de la page, nous vous recommandons de laisser cette option désactivée dans la plupart des cas.

Générer des données : URI pour les images

Lorsque cette option est activée, Autoptimize encode en base64 les petites images d'arrière-plan et les intègre dans CSS. Nous vous recommandons de tester cette option pour évaluer l'impact sur la vitesse de votre page. Alors que l'encodage des images au format base64 réduit le nombre de requêtes HTTP, les fichiers de représentations base64 sont généralement 20 à 30 % plus volumineux que leurs homologues binaires.

CSS en ligne et différé

L'incorporation de CSS critiques peut entraîner une augmentation significative de la vitesse de certains sites. L'idée ici est des styles en ligne qui sont requis pour les éléments qui sont "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 polices globales et le style de navigation.

En insérant ces éléments clés, le fichier CSS complet plus volumineux peut être chargé ultérieurement sans affecter l'apparence de la page. Bien qu'il soit possible d'extraire manuellement les styles critiques, nous vous recommandons d'utiliser un outil comme celui-ci pour générer les styles comme point de départ.

Générez des CSS critiques.
Générez des CSS critiques.

Après avoir généré le CSS critique, copiez-le et collez-le dans les paramètres d'optimisation automatique.

Inline et différer CSS dans Autoptimize.
Inline et différer CSS dans Autoptimize.

L'étape suivante consiste à tester l'expérience frontale de votre site. Si vous remarquez des éclairs étranges de contenu sans style (FOUC), vous devrez probablement identifier ces éléments sans style et ajouter les styles correspondants dans Autoptimize pour l'inline.

Autoptimize propose un « power-up » qui génère automatiquement des 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 le CSS critique. Ainsi, la génération CSS critique initiale 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 tout CSS

Pour la plupart des sites, nous ne recommandons pas d'intégrer tous les CSS car cela peut augmenter considérablement la taille de la page. De plus, l'incorporation de tous les CSS empêche le navigateur Web de mettre en cache CSS.

Exclure CSS de l'optimisation automatique

Par défaut, Autoptimize exclut les répertoires et fichiers CSS suivants de l'agrégation. Si vous souhaitez empêcher Autoptimize d'agréger l'un de vos fichiers CSS, vous pouvez les ajouter à cette liste. Semblable à l'exclusion JavaScript, le comportement par défaut de cette fonctionnalité n'empêche pas les fichiers CSS d'être minifiés - seulement agrégés.

  • wp-contenu/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.

Optimisation HTML dans Autoptimize.
Optimisation HTML dans Autoptimize.

Optimiser le code HTML

Nous vous recommandons d'activer la fonctionnalité de code « optimiser HTML », car elle réduit la taille de la page en supprimant les espaces inutiles dans votre code HTML. Bien que cette fonctionnalité soit compatible avec la plupart des sites, la suppression des espaces peut provoquer des problèmes sur certains sites. Ainsi, nous vous recommandons de tester minutieusement l'optimisation du code HTML avant de l'utiliser dans un environnement de production.

Conserver les commentaires HTML

Activez cette fonctionnalité si vous souhaitez conserver les commentaires HTML pour vos pages optimisées.

Options CDN

Si vous utilisez un CDN comme BehmasterCDN pour accélérer les actifs statiques, vous devrez ajouter l'URL CDN à Autoptimize. Si vous utilisez un service proxy avec des capacités CDN comme Cloudflare, vous n'avez rien à configurer dans les options CDN d'Autoptimize.

Configurez les paramètres CDN dans l'optimisation automatique.
Configurez les paramètres CDN dans l'optimisation automatique.

Infos cache

Les "informations de cache" d'Autoptimize affichent des informations importantes telles que 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 « Peut-on écrire ? », vous devrez travailler avec votre hôte pour corriger les autorisations de dossier.

Optimiser automatiquement les informations du cache.
Optimiser automatiquement les informations du cache.

Options diverses

Autoptimize a quelques paramètres d'optimisation divers. Si vous rencontrez des problèmes pour charger des fichiers CSS et JS optimisés sur votre site, vous devrez peut-être reconfigurer certains des paramètres ci-dessous.

Optimisations diverses dans Autoptimize.
Optimisations diverses dans Autoptimize.

Enregistrer les scripts/CSS agrégés en tant que fichiers statiques

Nous vous recommandons d'activer cette option pour enregistrer localement les fichiers agrégés en tant que fichiers statiques. Vous devrez peut-être désactiver cette option si votre serveur n'est pas configuré pour gérer la compression et l'expiration des fichiers.

Minimiser les fichiers CSS et JS exclus

Nous vous recommandons d'activer cette option pour vous assurer que tous les fichiers CSS et JS sont réduits. Cependant, si vous remarquez des problèmes liés à la minification avec certains de vos fichiers CSS et JS exclus, vous pouvez continuer et désactiver cette option.

Optimiser également pour les éditeurs/administrateurs connectés

Nous vous recommandons d'activer cette option pour garantir que les ressources sont optimisées pour les éditeurs et les administrateurs connectés. Ceci est important si vous testez les paramètres d'optimisation automatique en tant qu'utilisateur connecté.

Besoin d'un hébergement haut de gamme, rapide et sécurisé pour votre nouveau site e-commerce ? Behmaster fournit des serveurs ultra rapides et une assistance de classe mondiale 24h/7 et XNUMXj/XNUMX par des experts WooCommerce. Découvrez nos forfaits

Optimisation d'image dans Autoptimize

Autoptimize dispose d'une intégration intégrée avec ShortPixel pour optimiser les images. En plus d'un paramètre 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 Behmaster utilisateurs, nous ne recommandons pas d'utiliser la fonction d'optimisation d'image dans Autoptimize. Au lieu de cela, nous vous recommandons d'utiliser directement les plugins complets de ShortPixel ou Imagify. Avec le plugin complet, vous aurez un contrôle plus précis sur les paramètres d'optimisation, y compris la réécriture d'images pour utiliser le balise, qui est requise pour la prise en charge de WEBP sur Behmaster.

Images à chargement paresseux avec Autoptimize.
Images à chargement paresseux avec Autoptimize.

Autoptimize inclut également une fonctionnalité de chargement paresseux pour les images. Nous vous recommandons d'activer cette fonctionnalité pour améliorer la vitesse de la page pour les pages contenant beaucoup d'images. Lorsque le chargement paresseux est activé, Autoptimize vous permet d'exclure certaines classes d'images et certains noms de fichiers du chargement paresseux.

Le paramètre d'exclusion est utile pour les images telles que les logos, les icônes sociales et d'autres éléments d'image importants qui ne doivent pas être chargés paresseux. Si vous recherchez une solution qui offre plus de contrôle sur le chargement paresseux, consultez notre guide sur le chargement paresseux d'images et de vidéos dans WordPress.

Optimisations supplémentaires dans Autoptimize

Optimisations supplémentaires dans Autoptimize.
Optimisations supplémentaires dans Autoptimize.

Google Fonts

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.

  • Laissez tel quel.
  • Supprimez les polices Google.
  • Combinez et reliez dans la tête.
  • Combinez et préchargez en tête.
  • Combinez et chargez les polices de manière asynchrone avec webfont.js.

Nous vous déconseillons d'utiliser l'option « laisser tel quel » car elle n'offre aucun avantage en termes de vitesse.

Si les polices Google ne sont pas une exigence critique sur votre site, leur suppression et l'utilisation d'une pile de polices système à la place 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 pour déterminer celle qui convient le mieux à votre site.

Supprimer les émojis

Cette option Autoptimize supprime les CSS et JavaScript liés aux emojis principaux 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 traditionnels sont livrés avec des piles de polices qui incluent des emojis. Bien sûr, il existe également d'autres moyens de désactiver les emojis sur votre site WordPress.

Supprimer les chaînes de requête des ressources statiques

Si vous souhaitez supprimer les 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'impact sur le temps de chargement, mais cela peut aider à améliorer le score de votre site dans GTmetrix, Google Pagespeed et d'autres services de test de performances.

Préconnexion à des domaines tiers

La directive preconnect permet à votre navigateur de se connecter à des domaines spécifiés pour traiter les recherches DNS et les négociations d'établissement de liaison SSL avant l'envoi d'une requête HTTP complète.

Par exemple, si votre site comporte une image de logo diffusée à partir de https://site.behmaster.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 le élément avant que la requête HTTP ne soit faite dans le élément de votre HTML.

Vous pouvez utiliser les outils de développement ou l'inspecteur de votre navigateur pour trouver des domaines externes importants auxquels vous préconnecter. Dans l'exemple de page ci-dessous, il existe des demandes externes vers les domaines suivants.

  • https://cdn.brianli.com
  • https://www.google-analytics.com
  • https://www.googletagmanager.com

Ces trois domaines peuvent être ajoutés à la liste de préconnexion d'Autoptimize.

Trouvez des ressources externes avec des outils de développement.
Trouvez des ressources externes avec des outils de développement.

Pour des raisons de performances, nous vous 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 des 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 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 les 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 actifs, le cas échéant, précharger sur votre site WordPress. Comme pour de nombreux autres ajustements liés aux performances, le préchargement d'un trop grand nombre d'éléments peut ralentir le chargement de votre site.

Fichiers JavaScript asynchrones

La fonctionnalité « fichiers JavaScript asynchrones » d'Autooptimize vous permet de spécifier certains fichiers JavaScript externes à charger de manière asynchrone via le async Indicateur HTML. Bien que le chargement de fichiers JS de manière asynchrone puisse améliorer la vitesse de la page, nous vous recommandons de faire des tests adéquats pour vous assurer qu'aucune fonctionnalité du site n'est affectée.

Si vous n'utilisez pas déjà Autoptimize, vous voudrez ajouter ce plugin d'optimisation WordPress à votre site dès que possible après avoir lu ce guide 🚀Click to Tweet

Résumé

Si vous savez comment modifier ses paramètres, le plugin Autoptimize est une option solide pour les utilisateurs de WordPress qui cherchent à améliorer les performances du site.

Avec des fonctionnalités de base telles que l'optimisation HTML et CSS et des fonctionnalités plus avancées, telles que 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 frontales de votre site WordPress.

Si vous souhaitez en savoir plus sur l'optimisation de WordPress et sur la façon d'optimiser le backend de votre site, n'oubliez pas de consulter notre guide complet des performances de WordPress.

Articles Relatifs

0 Commentaires
Commentaires en ligne
Voir tous les commentaires
Retour à bouton en haut