TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment configurer correctement l’optimisation automatique dans le site WordPress ?

10

Autoptimize est l’un des plugins populaires pour accélérer votre site WordPress. Il y a plus d’un million d’installations actives de ces plugins avec une note moyenne de 4,7 sur 1K+ utilisateurs. Il ne peut pas être faux que tant de personnes installent et utilisent ce plugin pour optimiser leur site. Cependant, vous devez vous assurer que la configuration est correcte pour que le plugin fonctionne pour vous.

Connexe : Top 8 des plugins de mise en cache pour WordPress.

Que fait l’optimisation automatique ?

Tout d’abord, vous devez comprendre qu’Autoptimize n’est pas un plugin de mise en cache comme WP Rocket ou W3 Total Cache. C’est un plugin d’optimisation qui permet de faire les choses suivantes :

  • Combinez tous les fichiers CSS et JavaScript
  • Minimisez les fichiers compressés et cachez-les, minifiez également le HTML en supprimant les commentaires et les espaces
  • Ajouter un en-tête d’expiration aux fichiers pour servir la version mise en cache
  • Déplacer le CSS vers l’en-tête et les scripts vers le pied de page

Plus tard, le développeur a également inclus l’optimisation d’image pour le chargement paresseux et la diffusion d’images WebP afin d’accélérer les fichiers multimédias. Comme mentionné dans la page du plugin sur WordPress.org, les serveurs HTTP/2 peuvent automatiquement faire beaucoup de choses que fait ce plugin. Par conséquent, vous devez tester avec des essais pour vous assurer que le plugin ajoute réellement de la valeur à votre installation.

Comment configurer correctement l’optimisation automatique dans WordPress ?

Autoptimize est l’un des plugins les plus simples à configurer. Après avoir installé et activé le plugin, allez dans le menu "Paramètres > Optimisation automatique". Il a les options pour optimiser JS, CSS, HTML et les images sur votre site.

Comment configurer correctement l'optimisation automatique dans le site WordPress ?

Paramètres d’optimisation automatique

Paramètres JS, CSS et HTML

Cet onglet a plusieurs options pour séparer et optimiser les fichiers sur votre site. Autoptimize agrégera et minimisera les scripts, CSS et HTML de votre thème et de vos plugins. Par conséquent, le choix de certaines options peut endommager votre site, en particulier si vous utilisez un thème basé sur jQuery.

Options JavaScript

  • Optimiser le code JavaScript – Activez cette option pour réduire les fichiers JavaScript. Cela compressera et réduira la taille des fichiers de script sur votre site.
  • Agréger les fichiers JS ? – activez cette option pour combiner tous les fichiers JavaScript et le serveur de manière asynchrone lors du chargement des pages sur votre site. Cela vous aidera à supprimer le problème de script de blocage de rendu dans l’outil Google PageSpeed ​​Insights. Cependant, dans la plupart des cas, cela endommagera votre site. La meilleure option est de l’activer et de fournir les exceptions afin que la page puisse se charger sans se casser. Mais cela entraînera un problème de blocage de rendu dans PageSpeed ​​Insights. Vous pouvez désactiver cette option et activer uniquement « Optimiser le code JavaScript » pour ne réduire que les fichiers.
  • Agréger également JS en ligne ? – nous vous recommandons de désactiver cette option lorsque votre thème ou plugin injecte de nombreux scripts de manière dynamique. L’activation de cette option peut entraîner une croissance plus rapide et plus importante de la taille du cache, affectant ainsi les performances au lieu de s’améliorer.

Comment configurer correctement l'optimisation automatique dans le site WordPress ?

Options JavaScript

  • Forcer JavaScript dans ? – la bonne pratique est de charger les fichiers JavaScript en pied de page afin qu’ils se chargent à la fin du chargement de la page. Cela supprimera efficacement le blocage de rendu et les problèmes liés au script affichés dans les outils de mesure de la vitesse. Cependant, si vous voyez que les options précédentes endommagent votre site, activez-les pour charger des scripts dans l’en-tête pour tester si cela vous aide. Encore une fois, le chargement des scripts dans l’en-tête affichera un avertissement de blocage de rendu dans l’outil PageSpeed ​​Insights.
  • Exclure le script d’Autoptimize – le plugin par défaut remplit cette case avec jquery.js et d’autres fichiers importants sur votre site. Si vous remarquez qu’un thème ou un fichier de plug-in spécifique endommage votre site, vous pouvez inclure le fichier ici. N’oubliez pas de renseigner le chemin relatif du fichier en ignorant le nom de domaine. De plus, comme mentionné dans la description, le plugin minimise toujours les fichiers exclus, sauf si vous les excluez dans la section « Divers ». Après avoir testé avec différents thèmes, nous vous recommandons d’exclure jquery.js afin d’éviter tout problème de rupture de mise en page sur votre site. Parfois, vous ne remarquerez peut-être pas le problème sur le site, mais vous pouvez voir l’erreur de la console dans les outils de développement de Google Chrome. L’erreur affichera quelque chose comme "$ ou jQuery n’est pas défini" ou "fonction inconnue".
  • Ajouter un emballage try-catch ? – activez cette option lorsque vous trouvez que le plugin casse votre site. Nous vous recommandons de désactiver cette option et d’exclure le fichier qui s’interrompt dans l’exception.

Options CSS

Les options CSS sont presque similaires aux options JavaScript.

  • Optimiser le code CSS ? – activez cette option pour compresser et réduire les fichiers CSS sur votre site.

Comment configurer correctement l'optimisation automatique dans le site WordPress ?

Options CSS

  • Agréger les fichiers CSS ? – activez cette option pour combiner tous les fichiers CSS de votre site et servir de fichier CSS unique compressé et minifié.
  • Agréger également le CSS en ligne – permet d’inclure le CSS en ligne pour l’agrégation. Si votre thème ou plugin injecte beaucoup de CSS en ligne, cette option augmentera la taille du cache.
  • Générer des données : URI pour les images ? – activez cette option pour qu’Autoptimize puisse insérer les petites images téléchargées par votre thème et vos plugins.
  • CSS en ligne et différé – pour activer cette option, vous devez d’abord connaître le CSS critique pour votre site. Malheureusement, il n’est pas facile d’obtenir un CSS critique car chaque modèle de votre site nécessite un CSS critique distinct. Par exemple, lorsque vous avez WooCommerce sur votre site, vous ne pouvez pas utiliser le CSS de publication ou de page critique pour les pages de produits WooCommerce. À notre avis, vous devriez désactiver cette option dans Autoptimize. Sinon, vous pouvez obtenir l’API premium sur criticcss.com et l’intégrer à Autoptimize sous l’onglet "Critical CSS".
  • Inline all CSS – activez cette option pour inline all CSS au lieu de créer un lien en tant que fichier. Après avoir activé cette option, vous pouvez afficher le code source de votre site pour voir l’énorme quantité de CSS. L’incorporation de CSS peut améliorer considérablement la vitesse, mais cela peut avoir un effet négatif si vous avez un énorme fichier CSS.
  • Exclure CSS d’Autoptimize – si vous trouvez que le site est en panne, vous pouvez exclure les fichiers CSS spécifiques dans cette zone de texte. Semblable aux fichiers JavaScript, vous devez fournir le chemin relatif en ignorant le nom de domaine. Autoptimize exclura également le cache, les icônes et autres CSS par défaut. Vous pouvez également fournir les dossiers relatifs tels que "wp-content/uploads/" pour exclure tous les fichiers CSS de ce dossier.

Apprendre WordPress : Découvrez plus de 400 tutoriels WordPress gratuits.

Options HTML

Semblable à JS et CSS, activez l’option "Optimiser le code HTML" pour compresser et réduire le contenu HTML de votre site. Vous pouvez également activer ou supprimer les commentaires en utilisant « Conserver les commentaires HTML ? » option. Nous vous recommandons d’activer ces deux options.

Comment configurer correctement l'optimisation automatique dans le site WordPress ?

Options HTML

Options CDN

Si vous utilisez un CDN qui crée une URL de zone, vous devez saisir l’URL racine ici dans la zone de texte « URL de base CDN ». Cependant, vous pouvez l’ignorer si vous n’utilisez pas de CDN ou si vous utilisez Cloudflare ou tout autre CDN qui utilise des serveurs de noms DNS.

Comment configurer correctement l'optimisation automatique dans le site WordPress ?

Options CDN

Cache Info

Dans la section « Infos sur le cache », vous pouvez trouver l’état de la mise en cache Autoptimize. Il vous montrera le chemin, la taille et le nombre de fichiers mis en cache.

Comment configurer correctement l'optimisation automatique dans le site WordPress ?

Cache Info

Options diverses

  • Enregistrer les scripts/CSS agrégés en tant que fichiers statiques ? – cela devrait être activé par défaut car les fichiers compressés doivent être servis en tant que ressource statique pour améliorer la vitesse. Comme mentionné dans la description, s’il y a un problème d’affichage, désactivez cette option et essayez cela aide.

Comment configurer correctement l'optimisation automatique dans le site WordPress ?

Options diverses

  • Réduire les fichiers CSS et JS exclus ? – le plugin minimise automatiquement tous les fichiers CSS et JS bien que vous ayez exclu des fichiers spécifiques dans les paramètres CSS ou JS. Désactivez cette case à cocher si vous souhaitez désactiver la minification des fichiers CSS et JS exclus.
  • Optimiser également pour les éditeurs/administrateurs connectés ? – nous vous recommandons de désactiver cette option afin de pouvoir afficher le site réel sans optimisation automatique lorsque vous êtes connecté en tant qu’administrateur ou éditeur. Sinon, vous pourriez remarquer des problèmes avec les plugins de création de pages.

Enregistrez toutes vos modifications pour que le plugin commence à fonctionner sur votre site.

Images

L’onglet «Images» propose des options d’ optimisation des images.

  • Optimiser les images – cette option vous aide à utiliser le CDN global Shortpixel pour optimiser et diffuser vos images lors de vos déplacements. Shortpixel est une solution de compression d’images premium qui vous permet d’optimiser 150 images par mois. Vous pouvez afficher l’état actuel et l’utilisation des quotas dans cette section.

Comment configurer correctement l'optimisation automatique dans le site WordPress ?

Optimisation des images

  • Qualité d’optimisation d’image – vous pouvez choisir l’une des options brillantes, avec perte ou sans perte. Vous pouvez vérifier les différences entre ces options et tester vos images sur la page Shortpixel. Cela vous aidera à choisir la meilleure option pour vos besoins.
  • Charger WebP dans les navigateurs pris en charge ? – choisissez cette option pour diffuser des images WebP pour Chrome et d’autres navigateurs pris en charge.
  • Images à chargement différé ? – le chargement paresseux différera les images hors écran et ne se chargera que lorsque l’utilisateur atteint la position de l’image sur le navigateur. Activez cette option pour améliorer la vitesse de chargement et améliorer le score sur l’outil Google PageSpeed ​​Insights.
  • Exclusions de lazy-load – ici, vous pouvez entrer les types d’images ou les noms de fichiers pour les exclure du lazy loading.

Notez que la plupart des plugins et des thèmes sont livrés avec un chargement paresseux en tant qu’option intégrée. Par exemple, le thème Newspaper, le plugin Jetpack, le plugin WP Smush et le plugin SG Optimizer pour les utilisateurs de SiteGround ont tous l’option de chargement paresseux. Nous vous recommandons d’utiliser le lazy loading uniquement lorsque vous n’utilisez pas d’options similaires sur d’autres plugins ou thèmes sur votre site. De même, activez Shortpixel uniquement lorsque vous n’avez pas de CDN externe pour la mise en cache des images. En outre, utilisez-le avec prudence car cela a une restriction d’utilisation.

Supplémentaire

L’utilisation de ressources tierces sur le site aura un impact sur la vitesse de chargement des pages. L’onglet « Extra » offre des options supplémentaires pour optimiser certains contenus tiers standard sur votre site.

  • Google Fonts – si vous utilisez Google Fonts sur votre site, vous avez la possibilité de les désactiver ou de les combiner.
  • Supprimer les emojis – WordPress utilise par défaut le script emoji Unicode pour ajouter des symboles emoji sur votre site. Si vous n’utilisez pas d’emojis, nous vous recommandons d’activer cette option pour désactiver les emojis.
  • Supprimez les chaînes de requête des ressources statiques – Les fichiers CSS et JS utilisent le contrôle de version et ajoutent un paramètre dans l’URL à l’aide de «ver ». Si vous avez un site Web statique (c’est le cas pour la plupart des sites WordPress à l’exception des forums et des sites personnalisés), il n’est pas nécessaire d’utiliser le versioning car les fichiers sont également de nature statique. Lorsque vous regroupez tous les fichiers CSS et JS, le plugin servira automatiquement le fichier mis en cache en tant que ressource statique. Cependant, si vous avez exclu certains fichiers ou n’agrégez pas CSS ou JS, activez cette option pour supprimer les versions de l’URL.

Comment configurer correctement l'optimisation automatique dans le site WordPress ?

Options supplémentaires

  • Préconnexion aux domaines tiers – la préconnexion permet de se connecter au serveur tiers avant d’envoyer réellement la requête de navigateur HTTP. vous pouvez ajouter les domaines que vous souhaitez préconnecter dans cette zone de texte.
  • Précharger des requêtes spécifiques – le préchargement aide à charger les URL liées, augmentant ainsi la vitesse de chargement de la page. Saisissez les domaines tiers tels que fonts.google.com à précharger.
  • Fichiers JavaScript asynchrones : saisissez les fichiers JS tiers que vous souhaitez charger de manière asynchrone à l’aide de la propriété « async ».
  • Optimiser les vidéos YouTube – cette option nécessite un plugin supplémentaire pour charger paresseux les vidéos YouTube.

Problèmes fréquemment rencontrés avec Autoptimize

Lorsqu’il est optimisé correctement, le plug-in Autoptimize peut améliorer la vitesse et le score de votre site dans l’outil Google PageSpeed ​​Insights. Cependant, il présente peu de problèmes lorsqu’il est utilisé comme solution d’optimisation de la vitesse.

1 Utilisation avec d’autres plugins

Le problème avec Autoptimize est qu’il ne s’agit pas d’une mise en cache mais inclut la moitié des options d’optimisation offertes par un plugin de mise en cache à part entière. Vous devez choisir des plugins comme WP Super Cache pour travailler avec Autoptimize afin d’éviter les options redondantes. Sinon, vous n’avez pas besoin d’utiliser Autoptimize lorsque vous avez des plugins comme W3 Total Cache ou WP Rocket.

2 intégrations de vente incitative

Avec les quelques options disponibles, vous pouvez voir que le plugin vend l’intégration avec Shortpixel, WP YouTube Lyte et criticcss.com. chaque intégration nécessite un plugin ou un compte supplémentaire qui n’est pas nécessaire lorsque vous choisissez un plugin de mise en cache premium comme WP Rocket avec un bon CDN. De plus, il existe un « Optimiser plus ! » séparé. onglet pour vendre les produits partenaires.

3 CSS critiques

Le CSS critique est le CSS requis pour charger le contenu au-dessus du pli sur une page. Le problème est que chaque mise en page comme un article, une page, un produit, un portfolio, etc. nécessite un CSS critique séparé pour charger correctement le dessus du pli. Il s’agit d’une tâche compliquée pour générer des CSS critiques à l’aide d’un autre plug-in « Autoptimize criticcss.com power-up » et d’une clé API premium de crtialcss.com.

4 Rupture de la disposition du site

Dans la plupart des cas, le plugin casse la mise en page de votre site. Vous devez vérifier et analyser manuellement pour trouver le script ou l’option qui casse votre site et les exclure du plugin Autoptimize.

5 Taille de cache croissante

L’inlining de CSS et JS augmentera considérablement la taille du cache. Nous avons testé avec le thème populaire du journal pour trouver que la taille du cache atteint 100% en une seule journée. Le problème est que le plugin fournit ces options sans purge automatique du cache. Cela signifie que vous devez vous connecter manuellement au tableau de bord et supprimer le cache chaque fois que la taille augmente.

Comment configurer correctement l'optimisation automatique dans le site WordPress ?

Optimisation automatique du cache plein

Conclusion

À notre avis, ce plugin fonctionne bien lorsque vous avez un thème simple et que vous utilisez des plugins de mise en cache simples comme WP Super Cache. Cependant, la plupart des utilisateurs utiliseront les plugins standard comme Jetpack ou W3 Total Cache sur leur site. Dans ce cas, Autoptimize sera une option redondante que vous ne désactivez pas le plugin complet ou que vous désactivez certaines options.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails