Autoptimize

Description

Autoptimize makes optimizing your site really easy. It can aggregate, minify and cache scripts and styles, injects CSS in the page head by default but can also inline critical CSS and defer the aggregated full CSS, moves and defers scripts to the footer and minifies HTML. You can optimize and lazy-load images (with support for WebP and AVIF formats), optimize Google Fonts, async non-aggregated JavaScript, remove WordPress core emoji cruft and more. As such it can improve your site’s performance even when already on HTTP/2! There is extensive API available to enable you to tailor Autoptimize to each and every site’s specific needs.
If you think performance indeed is important, you should at least consider one of the many free page caching plugins (e.g. Speed Booster pack or KeyCDN’s Cache Enabler) to complement Autoptimize or even consider Autoptimize Pro which not only has page caching but also image optimization, CDN, critical CSS and more!

Autoptimize Pro
Autoptimize Pro is a premium Power-Up, adding image optimization, CDN, page caching, automatic critical CSS rules and extra “booster” options, all in one handy subscription to make your site even faster!!

Premium Support
We provide great Premium Support and Web Performance Optimization services with Accelera, check out our offering on https://accelerawp.com/!

(Speed-surfing image under creative commons by LL Twistiti)

Installation

Il suffit de l’installer à partir de votre tableau de bord WordPress « Extensions > Ajouter » et tout ira bien. L’installation manuelle est également très simple :

  1. Téléversez le fichier zip et dézippez-le dans le répertoire /wp-content/plugins/.
  2. Activez l’extension via le menu « Extensions » de WordPress.
  3. Allez dans Réglages > Autoptimize et activez les options que vous souhaitez. En général, cela signifie « Optimiser HTML/CSS/JavaScript ».

FAQ

Que fait l’extension pour accélérer mon site ?

It minifies all scripts and styles and configures your webserver to compresses them with good expires headers. JavaScript be default will be made non-render-blocking and CSS can be too by adding critical CSS. You can configure it to combine (aggregate) CSS & JS-files, in which case styles are moved to the page head, and scripts to the footer. It also minifies the HTML code and can also optimize images and Google Fonts, making your page really lightweight.

Mais je suis en HTTP/2, donc je n’ai pas besoin d’Autoptimize ?

HTTP/2 is a great step forward for sure, reducing the impact of multiple requests from the same server significantly by using the same connection to perform several concurrent requests and for that reason on new installations Autoptimize will not aggregate CSS and JS files any more. That being said, concatenation of CSS/ JS can still make a lot of sense, as described in this css-tricks.com article and this blogpost from one of the Ebay engineers. The conclusion; configure, test, reconfigure, retest, tweak and look what works best in your context. Maybe it’s just HTTP/2, maybe it’s HTTP/2 + aggregation and minification, maybe it’s HTTP/2 + minification (which AO can do as well, simply untick the « aggregate JS-files » and/ or « aggregate CSS-files » options). And Autoptimize can do a lot more then « just » optimizing your JS & CSS off course 😉

Est-ce que ça fonctionnera avec mon site ?

Although Autoptimize comes without any warranties, it will in general work flawlessly if you configure it correctly. See « Troubleshooting » below for info on how to configure in case of problems. If you want you can test Autoptimize on a new free dummy site, courtesy of tastewp.com.

Why is jquery.min.js not optimized when aggregating JavaScript?

A partir de AO 2.1, le cœur de WordPress jquery.min.js n’est pas optimisé pour la simple raison que de nombreuses extensions populaires injectent du JS en ligne qui n’est pas non plus agrégé (en raison de problèmes éventuels de taille de cache avec un code unique dans le JS en ligne) qui repose sur la disponibilité de jquery, donc l’exclusion de jquery.min.js garantit que la plupart des sites fonctionneront dès le départ. Si vous souhaitez également optimiser jquery, vous pouvez le retirer de la liste d’exclusion d’optimisation JS (vous devrez peut-être activer « également agréger en ligne JS » ou passer à « forcer JS dans l’en-tête »).

Pourquoi le rendu JS Autoptimizé est-il bloqué ?

This happens when aggregating JavaSCript and ticking the « force in head » option or when not aggregating and not deferring. Consider changing settings.

Pourquoi le CSS Autoptimizé est-il encore signalé comme bloquant le rendu ?

Avec la configuration par défaut d’Autoptimize le CSS est lié dans l’en-tête, ce qui est sûr par défaut, mais Google PageSpeed Insights s’en plaint. Vous pouvez consulter les options « tous les CSS en ligne » (facile) ou « en ligne et différer le CSS » (mieux) qui sont également expliquées dans cette FAQ.

Quelle est l’utilité de « Mettre en ligne et différer le CSS » ?

Le CSS en général doit aller dans l’en-tête du document. Récemment, par exemple, Google a commencé à promouvoir le report des CSS non essentiels, tout en soulignant les styles nécessaires pour construire la page au-dessus de la ligne de flottaison. Ceci est particulièrement important pour rendre les pages le plus rapidement possible sur les appareils mobiles. Depuis la version 1.9.0 d’Autoptimize, c’est facile : sélectionnez « Mettre en ligne le CSS et différer », collez le bloc « CSS au-dessus de la ligne de flottaison » dans le champ de saisie (zone de texte) et c’est bon !

Mais comment trouver le CSS « au-dessus de la ligne de flottaison » ?

Il n’y a pas de solution facile à ce problème car le « dessus de la ligne de flottaison » dépend de l’endroit où se trouve la ligne de flottaison, qui dépend à son tour de la taille de l’écran. Il existe cependant des outils qui tentent d’identifier exactement ce qui se trouve « au-dessus dessus de la ligne de flottaison ». Cette liste d’outils est un excellent point de départ. Le générateur de CSS critique et le générateur de chemin critique de Jonas Ohlsson sont de belles solutions de base et https://criticalcss.com est une solution haut de gamme du même Jonas Ohlsson. Sinon, cette bookmarklet (Chrome uniquement) peut également être utile.

Ou alors faut-il mettre en ligne tous les CSS ?

Réponse courte : probablement pas. Bien que l’insertion de tous les CSS rende le CSS bloquant, il en résultera que votre page HTML de base deviendra beaucoup plus grande, ce qui nécessitera plus de « temps d’aller-retour ». De plus, lorsque plusieurs pages sont demandées au cours d’une session de navigation, le CSS en ligne est envoyé à chaque fois, alors que s’il n’est pas en ligne, il est servi à partir du cache. Enfin, le CSS en ligne poussera les méta-balises dans le HTML jusqu’à une position où Facebook ou Whatsapp ne les chercheront plus, cassant par exemple les miniatures lors du partage sur ces plateformes.

Mon cache devient énorme, est-ce qu’Autoptimize purge le cache ?

Autoptimize n’a pas son propre mécanisme de purge de cache, car cela pourrait retirer les CSS/JS optimisés qui sont encore mentionnés dans d’autres caches, ce qui briserait votre site. De plus, un cache à croissance rapide est une indication d’autres problèmes que vous devriez éviter (en).

Au lieu de cela, vous pouvez maintenir la taille du cache à un niveau acceptable soit :

  • en désactivation les options « Concaténer le JS en ligne » et/ou « Concaténer le CSS en ligne »,
  • en excluant des variables JS (ou parfois des sélecteurs CSS) qui changent par page (ou par chargement de pages). Vous pouvez lire comment faire cela dans ce billet (en).

Malgré les objections ci-dessus, il existe des solutions tierces pour purger automatiquement le cache d’AO, par exemple en utilisant ce code ou cette extension, mais pour les raisons ci-dessus, ces solutions doivent être utilisées uniquement si vous savez réellement ce que vous faites.

« Vider le cache » ne semble pas fonctionner ?

Lorsque vous cliquez sur le lien « Vider le cache » dans le menu déroulant d’Autoptimize situé dans barre d’outils du back-office, vous pouvez obtenir un message « Votre cache n’a peut-être pas été bien purgé ». Dans ce cas, allez à la page de configuration d’Autoptimize et cliquez sur le bouton « Enregistrer les modifications & vider le cache ».

De plus, ne vous inquiétez pas si votre cache n’est jamais réduit à 0 fichier/0 ko, car Autoptimize (à partir de la version 2.2) préchargera automatiquement le cache immédiatement après qu’il ait été vidé pour accélérer encore plus la minification.

Mon site a l’air cassé quand je vide le cache d’Autoptimize !

Lors de l’effacement du cache d’AO, aucune page du cache ne doit contenir de pages (HTML) faisant référence aux CSS/JS optimisés supprimés. Bien qu’il existe à cette fin une intégration entre Autoptimize et certains caches de pages, cette intégration ne couvre pas 100 % des configurations, de sorte que vous pourriez devoir vider votre cache de pages manuellement.

Puis-je toujours utiliser le Rocket Loader de Cloudflare ?

Cloudflare Rocket Loader est un moyen assez avancé mais invasif de rendre JavaScript non bloquant pour le rendu, ce que Cloudflare considère toujours comme en bêta. Parfois, Autoptimize & Rocket Loader fonctionnent ensemble, parfois non. La meilleure approche consiste à désactiver Rocket Loader, à configurer Autoptimize et à réactiver Rocket Loader (si vous pensez que cela peut aider) après cela et à tester si tout fonctionne toujours.

En ce moment (juin 2017), il semble que RocketLoader pourrait casser la fonction « Mettre en ligne et différer le CSS » d’AO, qui est basé sur Filamentgroup’s loadCSS, ce qui fait que le CSS différé ne se charge pas.

J’ai essayé Autoptimize mais mon score Google Pagespeed s’est à peine amélioré

Autoptimize n’est pas une simple extension « corriger mes problèmes de vitesse ». Elle ne fait que concaténer et minifier JS (local) & CSS et images et permet quelques extras sympas comme la suppression des polices Google et le report du chargement du CSS. Ainsi, Autoptimize vous permettra d’améliorer vos performances (temps de chargement mesuré en secondes) et vous aidera probablement aussi à faire face à certains avertissements spécifiques concernant la vitesse des pages. Si vous voulez continuer à vous améliorer, vous devrez probablement aussi vous pencher sur la mise en cache des pages et sur la configuration de votre serveur web, ce qui améliorera les performances réelles (là encore, le temps de chargement est mesuré par exemple par https://webpagetest.org) et vos « meilleures pratiques en matière de performance » de la vitesse des pages.

Que puis-je faire avec l’API ?

Beaucoup de choses : il y a des filtres que vous pouvez utiliser pour désactiver conditionnellement Autoptimize par requête, pour changer les exclusions CSS et JS, pour changer la limite des images d’arrière-plan CSS à insérer dans le CSS, pour définir quels fichiers JS sont déplacés derrière le fichier agrégé, pour changer l’attribut de report sur le script-tag JS concaténé… Il y a des exemples pour certains filtres dans autoptimize_helper.php_example et dans cette FAQ.

Comment fonctionne le CDN ?

À partir de la version 1.7.0, le CDN est activé dès l’entrée dans le répertoire racine du site CDN (par exemple http://cdn.example.net/wordpress/). Si cette URL est présente, elle sera utilisée pour tous les fichiers générés par Autoptimize (c’est-à-dire les CSS et JS concaténés), y compris les images d’arrière-plan dans le CSS (lorsqu’on n’utilise pas les URL de données).

Si vous souhaitez que vos images téléchargées se trouvent également sur le CDN, vous pouvez modifier le chemin d’accès upload_url_path dans votre configuration WordPress (/wp-admin/options.php) pour le répertoire de téléchargement cible du CDN (par exemple http://cdn.example.net/wordpress/wp-content/uploads/). Prenez en considération que cela ne fonctionne que pour les images téléchargées à partir de ce point, et non pour les images qui ont déjà été téléchargées. Merci à BeautyPirate pour le conseil !

Pourquoi mes polices de caractères ne sont-elles pas mises sur le CDN également ?

Autoptimize prend en charge cette fonction, mais elle n’est pas activée par défaut car les polices non locales peuvent nécessiter une configuration supplémentaire. Mais si vous avez votre politique de requêtes inter-origines en ordre, vous pouvez dire à Autoptimize de mettre vos polices sur le CDN en vous connectant à l’API, en définissant autoptimize_filter_css_fonts_cdn à true de cette façon ;

add_filter( 'autoptimize_filter_css_fonts_cdn', '__return_true' );

J’utilise Cloudflare, que dois-je saisir comme répertoire racine du CDN ?

Rien, lorsque vous êtes sur Cloudflare votre CSS/JS Autoptimizé se trouve automatiquement sur le CDN du Cloudflare.

Comment puis-je forcer les fichiers agrégés à être statiques en CSS ou JS au lieu de PHP ?

Si votre serveur web est correctement configuré pour gérer la compression (gzip ou deflate) et l’expiration du cache (expiration et contrôle du cache avec une capacité de cache suffisante), vous n’avez pas besoin d’Autoptimize pour gérer cela à votre place. Dans ce cas, vous pouvez cocher l’option « Enregistrer les scripts/CSS concaténés sous forme de fichiers statiques », qui obligera Autoptimize à enregistrer les fichiers concaténés sous forme de fichiers .css et .js (ce qui signifie qu’aucun PHP n’est nécessaire pour servir ces fichiers). Ce paramètre est défini par défaut à partir de la version 1.8 d’Autoptimize.

Comment fonctionne « l’exclusion de l’optimisation » ?

L’optimisation CSS et JS permet d’éviter que le code soit concaténé et minimisé en ajoutant des « identifiants » à la liste d’exclusion séparée par des virgules. La chaîne d’identificateurs exacte à utiliser peut être déterminée de cette manière :

  • si vous souhaitez exclure un fichier spécifique, par exemple wp-content/plugins/funkyplugin/css/style.css, vous pouvez simplement exclure « funkyplugin/css/style.css ».
  • si vous voulez exclure tous les fichiers d’une extension spécifique, par exemple wp-content/plugins/funkyplugin/js/*, vous pouvez exclure par exemple « funkyplugin/js/ » ou « plugins/funkyplugin ».
  • si vous souhaitez exclure un code en ligne, vous devrez trouver une chaîne spécifique et unique dans ce bloc de code et l’ajouter à la liste d’exclusion. Exemple : pour exclure <script>funky_data='Won\'t you take me to, Funky Town'</script>, l’identifiant est « funky_data ».

Troubleshooting Autoptimize

Have a look at the troubleshooitng instructions at https://blog.futtta.be/2022/05/05/what-to-do-when-autoptimize-breaks-your-site/

J’ai exclu des fichiers mais ils sont toujours Autoptimizés ?

AO minifie les JS/CSS exclus si le nom du fichier indique que le fichier n’est pas encore minifié. Depuis la version 2.5 de l’AO, vous pouvez désactiver cette fonction dans l’onglet « JS, CSS & HTML » dans « Options diverses » en décochant « Minifier les fichiers CSS et JS exclus ».

À l’aide, j’ai une page blanche ou une erreur de serveur interne après avoir activé Autoptimize !

Assurez-vous que vous n’exécutez pas d’autres extension de minification HTML, CSS ou JS (BWP minify, WP minify…) simultanément avec Autoptimize ou désactivez cette fonctionnalité de votre extension de mise en cache des pages (W3 Total Cache, WP Fastest Cache…). Essayez d’activer uniquement l’optimisation CSS ou JS pour voir laquelle des deux provoque l’erreur du serveur et suivez les étapes de dépannage génériques pour trouver une solution.

Mais j’ai encore des fichiers CSS ou JS Autoptimizés vierges !

Si vous utilisez Apache, le fichier .htaccess écrit par Autoptimize peut dans certains cas entrer en conflit avec les paramètres AllowOverrides de votre configuration Apache (comme c’est le cas avec la configuration par défaut de certaines installations Ubuntu), ce qui entraîne des « erreurs interne de serveur » sur les fichiers CSS et JS auto-optimisés. Ce problème peut être résolu en réglant les réglages d’AllowOverrides sur All.

Impossible de se connecter sur les multisites mappés par domaine

Les multisites mappés par domaine nécessitent l’option Autoptimize pour être initialisés à une action WordPress différente, ajoutez cette ligne de code à votre wp-config.php pour qu’elle se branche dans setup_theme par exemple :

define( 'AUTOPTIMIZE_SETUP_INITHOOK', 'setup_theme' );

Je n’ai aucune erreur, mais mes pages ne sont pas du tout optimisées ?

Autoptimize effectue un certain nombre de contrôles avant d’optimiser réellement. Si l’une des conditions suivantes est remplie, vos pages ne seront pas optimisées :

  • lorsqu’il se trouve dans l’outil de personnalisation
  • s’il n’y a aucune ouverture de balise <html
  • s’il y a <xsl:stylesheet dans la réponse (indiquant que la sortie n’est pas HTML mais XML)
  • s’il y a <html amp dans la réponse (car les pages AMP sont déjà optimisées)
  • si la sortie est un flux RSS (fonction is_feed())
  • si la sortie est une page d’administration WordPress (fonction is_admin())
  • si la page est demandée avec ?ao_noptimize=1 en annexe à l’URL
  • si le code s’accroche (hook) à Autoptimize pour désactiver l’optimisation (voir le sujet sur Visual Composer)
  • si d’autres extensions utilisent le tampon de sortie de manière incompatible (désactivez les autres extensions de manière sélective pour identifier le coupable).

Les solutions Visual Composer, Beaver Builder et autres constructeurs de pages similaires sont cassées !

Désactiver l’option pour avoir Autoptimize active pour les utilisateurs connectés et devenir fou de glisser-déposer 😉

À l’aide, la validation de commande ou de paiement de ma boutique ne fonctionne plus !

Désactiver l’option pour optimiser les pages panier ou commande (fonctionne pour WooCommerce, Easy Digital Downloads et WP eCommerce).

Revolution Slider est cassé !

Assurez-vous que js/jquery/jquery.min.js est dans la liste des exclusions d’optimisation JS séparées par des virgules (ceci est exclu dans la configuration par défaut).

Je reçois des erreurs « jQuery n’est pas défini ».

Dans ce cas, vous avez un JavaScript non agrégé qui nécessite le chargement de jQuery, vous devrez donc ajouter js/jquery/jquery.min.js à la liste des exclusions d’optimisation JS séparées par des virgules.

J’utilise NextGen Galeries et beaucoup de JS ne sont pas concaténés ou minifiés ?

NextGen Galleries fait des trucs sympas pour ajouter du JavaScript. Pour qu’Autoptimize puisse l’agréger, vous pouvez soit désactiver la gestion des ressources de NextGen Gallery avec ce bout de code add_filter( 'run_ngg_resource_manager', '__return_false' ); ou vous pouvez dire à Autoptimize de lginitialiser plus tôt, en ajoutant ceci à votre wp-config.php : define("AUTOPTIMIZE_INIT_EARLIER", "true");

Qu’est-ce que noptimize ?

À partir de la version 1.6.6 Autoptimize exclut tout ce qui se trouve à l’intérieur des balises noptimize, par exemple :
<!--noptimize--><script>alert(‘ceci ne sera pas Autoptimizé’);</script><!--/noptimize-->

Vous pouvez le faire dans le contenu de votre page ou publication, dans les widgets et dans vos fichiers de thèmes (pensez à créer un thème enfant pour éviter que votre travail ne soit écrasé par les mises à jour des thèmes).

Puis-je modifier le répertoire et le nom des fichiers auto-optimisés mis en cache ?

Oui, si vous voulez servir des fichiers provenant par exemple de /wp-content/resources/aggregated_12345.css au lieu de /wp-content/cache/autoptimize/autoptimize_12345.css par défaut, alors ajoutez ceci à wp-config.php :

define('AUTOPTIMIZE_CACHE_CHILD_DIR','/resources/');
define('AUTOPTIMIZE_CACHEFILE_PREFIX','aggregated_');

Est-ce que cela fonctionne avec le WP_CONTENT_URL non standard ?

Non, Autoptimize ne prend pas en charge un WP_CONTENT_URL non standard prêt à l’emploi, mais cela peut être fait en ajoutant quelques lignes de code dans l’API d’Autoptimize.

Le JS/CSS généré peut-il être pré-gzippé ?

Oui, mais cette fonction est désactivée par défaut. Vous pouvez l’activer en passant « true » à « autoptimize_filter_cache_create_static_gzip ». Vous devrez évidemment configurer votre serveur web pour utiliser ces fichiers à la place des fichiers non compressés afin d’éviter la surcharge de la compression à la volée.

Que fait « Retirer les émojis » ?

Cette nouvelle option dans Autoptimize 2.3 retirer les fichiers CSS en ligne, JS en ligne et JS liés ajoutés par le cœur de WordPress. Cela peut donc avoir un léger impact positif sur les performances de votre site.

L’option « Retirer les chaînes de requête » est-elle utile ?

Bien que certains outils d’évaluation des performances en ligne considèrent les « chaînes de requête pour les fichiers statiques » comme un problème de performance, l’impact de ces dernières est en général presque inexistant. Ainsi, depuis la version 2.3, Autoptimize vous permet de faire supprimer la chaîne de requête (ou plus précisément le paramètre « ver »), mais le fait de cocher « Retirer les chaînes de requête des ressources statiques » n’aura que peu ou aucun impact sur les performances de votre site, mesurées en (milli-)secondes.

(Comment) devrais-je optimiser les polices de Google ?

Les polices de Google sont généralement chargées par un fichier CSS lié à un « blocage du rendu ». Si vous avez un thème et des extensions qui utilisent les Google Fonts, vous risquez de vous retrouver avec plusieurs fichiers CSS de ce type. La fonction d’optimisation automatique (depuis la version 2.3) vous permet désormais de réduire l’impact des polices Google en les supprimant toutes ou en optimisant leur chargement. Il existe deux types d’optimisation : le premier est « combiner et lier », qui remplace toutes les demandes de Google Fonts en une seule, ce qui bloque toujours le rendu mais permet de charger les polices immédiatement (ce qui signifie que vous ne verrez pas les polices changer pendant le chargement de la page). L’alternative est « combiner et charger asynchrone », qui utilise JavaScript pour charger les polices de manière non bloquante pour le rendu mais qui pourrait provoquer un « flash de texte non stylisé ».

Dois-je utiliser « pré-connexion » ?

La pré-connexion est une fonction quelque peu avancée qui permet de demander aux navigateurs (s’ils la prennent en charge) d’établir une connexion avec des domaines spécifiques même si la connexion n’est pas immédiatement nécessaire. Cette fonction peut être utilisée, par exemple, pour réduire l’impact des ressources de tiers sur le HTTPS (car la demande DNS, la connexion TCP et la négociation SSL/TLS sont exécutées de manière anticipée). À utiliser avec précaution, car la pré-connexion à un trop grand nombre de domaines peut être contre-productive.

Quand est-ce que je peux ou ne peux pas asynchroniser JS ?

Les fichiers JavaScript qui ne sont pas Autoptimizés (parce qu’ils ont été exclus ou parce qu’ils sont hébergés ailleurs) sont généralement des fichiers de rendu bloqués. En les ajoutant dans le champ « async JS » séparé par des virgules, Autoptimize ajoutera le drapeau async qui provoquera le chargement asynchrone de ces fichiers par le navigateur (c’est-à-dire le blocage du rendu). Cela peut cependant casser votre site (page), par exemple si vous asynchronisez « js/jquery/jquery.js » vous obtiendrez très probablement des erreurs « jQuery n’est pas défini ». À utiliser avec précaution.

Comment fonctionne l’optimisation des images ?

Lorsque l’optimisation des images est activée, Autoptimize recherche les fichiers png, gif, jpeg (.jpg) dans les balises d’image et dans vos fichiers CSS qui sont chargés depuis votre propre domaine et change la source (src) en CDN ShortPixel pour ceux-ci. Important : cela ne peut fonctionner que pour les images accessibles au public, sinon le proxy d’optimisation d’image ne pourra pas obtenir l’image pour l’optimiser, de sorte que les pare-feu ou les proxies ou la protection par mot de passe ou même la prévention des hotlinks pourraient casser l’optimisation d’image.

Puis-je utiliser l’optimisation des images pour mon intranet ou mon site protégé ?

Non : l’optimisation des images dépend de la capacité du service externe d’optimisation des images à récupérer l’image originale de votre site, à l’optimiser et à l’enregistrer sur le CDN. Si vos images ne peuvent pas être téléchargées par des visiteurs anonymes (en raison d’un pare-feu, d’un proxy, d’une protection par mot de passe ou d’une protection par hotlinking), l’optimisation des images ne fonctionnera pas.

Où puis-je obtenir plus d’informations sur l’optimisation des images ?

Consultez la Foire aux questions de Shortpixel.

Puis-je désactiver l’écoute des vidages de cache des pages par AO ?

À partir d’AO 2.4, AO « écoute » les vidages de cache des pages pour vider son propre cache. Vous pouvez désactiver ce comportement avec ce filtre ;

add_filter('autoptimize_filter_main_hookpagecachepurge','__return_false');

Certains des caractères non-ASCII se perdent après l’optimisation

Par défaut, AO utilise des méthodes de chaînes non sécurisées sur plusieurs octets, mais si votre PHP possède l’extension mbstring, vous pouvez activer les fonctions de chaînes sécurisées sur plusieurs octets avec ce filtre ;

add_filter('autoptimize_filter_main_use_mbstring', '__return_true');

Je n’arrive pas à faire fonctionner Critical CSS

Consultez la FAQ sur l’(ancien) Critical CSS power-up ici, cette information sera intégrée dans cette FAQ à une date ultérieure.

Do I still need the Critical CSS power-up when I have Autoptimize 2.7 or higher?

No, the Critical CSS power-up is not needed any more, all functionality (and many fixes/ improvements) are now part of Autoptimize.

Que fait « prendre en charge les solutions de repli pour les erreurs 404 » ? Pourquoi en aurais-je besoin ?

Les caches agrégés d’Autoptimize & les CSS/JS optimisés et les liens vers ces fichiers mis en cache sont stockés dans le HTML, qui sera stocké dans un cache de page (qui peut être une extension, peut être au niveau de l’hôte, peut être chez un tiers, dans le cache de Google ou dans un navigateur). S’il y a du HTML dans un cache de page qui renvoie à des CSS/JS Autoptimizés qui ont été supprimés entre-temps (quand le cache a été vidé), alors la page du cache n’aura pas l’apparence ou le fonctionnement attendu car les CSS ou JS n’ont pas été trouvés (erreur 404).

Ce réglage vise à éviter les ruptures en servant des CSS ou JS de « repli ». Les fichiers de repli sont des copies des premiers fichiers CSS & JS auto-optimisés créés après que le cache ait été vidé et, en tant que tels, seront basés sur la page d’accueil. Cela signifie que la migration CSS/JS ne s’applique pas à 100 % aux autres pages, mais au moins l’impact des CSS/ JS manquants sera réduit (souvent de manière significative).

Lorsque l’option est activée, Autoptimize ajoute un ErrorDocument 404 au .htaccess (tel qu’utilisé par Apache) et se connecte également au cœur de WordPress template_redirect pour capturer les 404 gérés par WordPress. En utilisant NGINX, quelque chose comme ci-dessous devrait fonctionner (je ne suis pas un spécialiste de NGINX, mais cela fonctionne pour moi) 😉

location ~* /wp-content/cache/autoptimize/.*\.(js|css)$ {
    try_files $uri $uri/ /wp-content/autoptimize_404_handler.php;
}

And this a nice alternative approach (provided by fboylovesyou);

location ~* /wp-content/cache/autoptimize/.*\.(css)$ {
    try_files $uri $uri/ /wp-content/cache/autoptimize/css/autoptimize_fallback.css;
}
location ~* /wp-content/cache/autoptimize/.*\.(js)$ {
    try_files $uri $uri/ /wp-content/cache/autoptimize/js/autoptimize_fallback.js;
}

Quels sont les logiciels/projets open source utilisés dans Autoptimize ?

Les supers projets open source suivants sont utilisés dans Autoptimize sous une forme ou une autre :

Où puis-je obtenir de l’aide ?

Vous pouvez obtenir de l’aide sur le forum de support de wordpress.org. Si vous êtes sûr à 100% que votre problème ne peut pas être résolu en utilisant la configuration Autoptimize et que vous avez en fait découvert un bug dans le code, vous pouvez créer une issue sur GitHub. Si vous recherchez une assistance premium, consultez nos services Support Autoptimize Pro et Optimisation des performances Web .

Je veux sortir, comment dois-je retirer Autoptimize ?

  • Désactivez l’extension (cela retirera les options et le cache)
  • Retirer l’extension
  • Effacer tout cache qui pourrait encore contenir des pages faisant référence à des CSS/JS Autoptimizés (par exemple d’une extension de mise en cache de pages telle que WP Super Cache)

Comment puis-je aider ou contribuer ?

Il suffit de forker Autoptimize sur Github et de coder !

Avis

31 janvier 2025 1 réponse
Just a few clicks and the site goes to 90% and B at GTMetrix 🙂
15 janvier 2025 1 réponse
I love how this plugin generates critical CSS automatically! It improved my website’s performance on PageSpeed Insights. However, the initial setup was a bit tricky as I had to tweak a few settings to avoid layout shifts.
16 décembre 2024 1 réponse
Autoptimize is an excellent plugin for website optimization. It’s user-friendly and immediately boosts website performance scores once activated. On top of that, Frank, the plugin’s creator, is incredibly helpful! He’s quick to respond to forum questions and provides clear, patient guidance to resolve any issues. I highly recommend this plugin for improving website performance. The exceptional support is definitely a standout feature! 🙂
12 novembre 2024 7 réponses
I only want to optimize the CSS and JS code for shrinking the front end, I don’t want the cache files because when I delete the Autoptimize cache and rebuild it, the previous CSS and JS paths will be lost. I want these file paths to stay the same forever, so I don’t want cached files, any solutions please? Thanks!Also the plugin creates some PHP files under the cache and their names are randomized.
29 septembre 2024 1 réponse
FAST RESPONSE FROM THE TEAM. VERY IMPRESSED. HELPED ME OUT AND GOT ISSUE RESOLVED.
Lire les 1 416 avis

Contributeurs/contributrices & développeurs/développeuses

« Autoptimize » est un logiciel libre. Les personnes suivantes ont contribué à cette extension.

Contributeurs

“Autoptimize” a été traduit dans 34 locales. Remerciez l’équipe de traduction pour ses contributions.

Traduisez « Autoptimize » dans votre langue.

Le développement vous intéresse ?

Parcourir le code, consulter le SVN dépôt, ou s’inscrire au journal de développement par RSS.

Journal

3.1.13

3.1.12

  • image optimization: improvements to the favicon regex
  • javascript optimization: integrate most recent version of jsmin.php
  • critical CSS: improve blocklist (url/ paths that should not be added to the job queue)
  • some other minor changes/ improvements/ filters, see the GitHub commit log.

3.1.11

3.1.10

  • improvement: with « don’t aggregate but defer » and « also defer inline JS » on, also defer JS that had the async flag to avoid the (previously) asynced JS from executing before the inline JS has ran.
  • improvement: show option to disable the default on « compatibility logic ».
  • fix for regression in 3.1.9 which caused JetPack Image optimization not working even if image optimization was off in AO.
  • API: some extra hooks in critical CSS to enable others (and AOPro) to act on changes in critical CSS rules
  • some other minor changes/ improvements/ filters, see the GitHub commit log.

3.1.9

  • improvement: activate JS, CSS & HTML optimization upon plugin activation (hat tip to Adam Silverstein (developer relations engineer at Google))
  • improvement: also defer asynced JS (to ensure execution order remains intact; asynced JS should not execute before deferred inline JS which it might depend upon)
  • improvement: exclude images from being lazyloaded if they have fetchpriority attribute set to high (as done by WordPress core since 6.3)
  • bugfix: disable spellcheck on CSS textarea’s (above the fold CSS/ critical CSS) which in some cases caused browser issues
  • add tab to explain Autoptimize Pro.
  • confirmed working with WordPress 6.4 (beta 3)
  • some other minor changes/ improvements/ filters, see the GitHub commit log.

3.1.8.1

  • urgent fix for PHP error, sorry about that!

3.1.8

  • Images: improve optmization logic for background images
  • Critical CSS: don’t trigger custom_post rule if not is_singular + adding debug logging for rule selection
  • some other minor changes/ improvements/ filters, see the GitHub commit log.

3.1.7

  • security: improve validation (import) and sanitization (output) of critical CSS rules, to fix a medium severity Admin+ Stored Cross-Site Scripting vulnerability as reported by WP Scan Security.

3.1.6

  • CSS: removing trailing slashes in <link tags for more W3 HTML validation love
  • Extra: also dequeue WooCommerce block CSS if « remove WordPress block CSS » option is active
  • imgopt: also act on non-aggregated inline CSS
  • imgopt: added logic to warn users if Shortpixel can’t reach their site
  • backend: AO toolbar JS/ CSS is finally minified as well.
  • explicitly disable optimization of login pages
  • some other minor changes/ improvements/ filters, see the GitHub commit log.

3.1.5

  • improvements to JSMin by Robert Ehrenleitner (big thanks Robert!).
  • do not consider jquery.js as minified any more (WordPress now uses jquery.min.js by default and jquery.js is the unminified version).
  • fix for « undefined array key » PHP errors in autoptimizeCriticalCSSCron.php
  • some other minor changes/ improvements/ filters, see the GitHub commit log.

3.1.4

  • Improvement: when all CSS is inlined, try doing so after SEO meta-tags (just before ld+json script tag which most SEO plugins add as last item on their list).
  • Img opt: also optimize images set in data-background and data-retina attributes (+ filter to easily add other attributes)
  • CSS opt: filter to enable AO to skip minification of calc formulas in CSS (as the CSS minifier on rare occasions breaks those)
  • Multiple other filters added
  • Some other minor changes/ improvements/ filters, see the GitHub commit log.

3.1.3

  • Multiple fixes for metabox LCP image preloads (thanks Kishorchand for notifying & providing a staging environment to debug on).
  • Fix in revslider compatibility (hat tip Waqar Ahmed for reporting & helping out ).
  • No image optimization or criticalcss attempts on localhost installations any more + notification of that fact if localhost detected.
  • Some other minor changes/ improvements/ filters, see the GitHub commit log.

3.1.2

  • Google Fonts: some more removal logic
  • fix for 404 fallback bug (hat tip to Asif for finding & reporting)
  • Some other minor changes/ improvements/ filters, see the GitHub commit log.

3.1.1.1

  • Quick workaround for an autoload conflict with JetFormBuilder (and maybe other Crocoblock plugins?) that causes a critical error on the AO settings page.

3.1.1

  • images: when optimizing images and lazyloading is on, then by default do not set an LQIP (low quality image placeholder) any more (reason: it might look nice but it comes with a small-ish perf. penalty). This can be re-enabled by returning true to the autoptimize_filter_imgopt_lazyload_dolqip filter.
  • security: further improvements to critical CSS settings page (again with the great assistance of WPScan Security).
  • some other minor changes/ improvements/ filters, see the GitHub commit log.

3.1.0

  • new HTML sub-option: « minify inline CSS/ JS » (off by default).
  • new Misc option: permanently allow the « do not run compatibility logic » flag to be removed (which was set for users upgrading from AO 2.9.* to AO 3.0.* as the assumption was things were working anyway).
  • security: improvements to the critical CSS settings page to fix authenticated cross site scripting issues as reported by WPScan Security.
  • bugfix: « defer inline JS » of very large chunks of inline JS could cause server errors (PCRE crash actually) so not deferring if string is more then 200000 characters (filter available).
  • some other minor changes/ improvements/ hooks, see the GitHub commit log

3.0.4

  • fix for « undefined array key ao_post_preload” on post/ page edit screens
  • fix for image optimization altering inline JS that contains an <img tag if lazyload is not active
  • improvements to exit survey
  • confirmed working with WordPress 6.0

3.0.3

  • fix for images being preloaded without this being configured when lazyload is on and per page/post settings are off.
  • ensure critical CSS schedule is always known.
  • when deferring non-aggregated JS, make the optimatization exclusions take the full script-tag into account instead of just the src URL.

3.0.2

  • rollback automatic « minify inline CSS/ JS » which broke more then expected, this will come back as a separate default off option later and can now be enabled with a simple filter: add_filter( 'autoptimize_html_minify_inline_js_css', '__return_true'); .
  • fix for « Call to undefined method autoptimizeOptionWrapper::delete_option() » in autoptimizeVersionUpdatesHandler.php

3.0.1

  • fix for minification of inline script with type text/template breaking the template (e.g. ninja forms), hat tip to @bobsled.
  • fix for regression in import of CSS-files where e.g. fontawesome CSS was broken due to being escaped again with help of @bobsled, thanks man!

3.0.0

  • fundamental change for new installations: by default Autoptimize will not aggregate JS/ CSS any more (HTTP/2 is ubiquitous and there are other advantages to not aggregating esp. re. inline JS/ CSS and dependancies)
  • new: no API needed any more to create manual critical CSS rules.
  • new: « Remove WordPress blocks CSS » option on the « Extra » tab to remove block- and global styles (and SVG).
  • new: compatibility logic for « edit with elementor », « revolution slider », for non-aggregated inline JS requiring jQuery even if not excluded (= auto-exclude of jQuery) and JS-heavy WordPress blocks (Gutenberg)
  • new: configure an image to be preloaded on a per page/ post basis for better LCP.
  • improvement: defer inline now also allowed if inline JS contains nonce or post_id.
  • improvement: settings export/ import on critical CSS tab now takes into account all Autoptimize settings, not just the critical CSS ones.
  • technical improvement: all criticalCSS classes were refactored, removing use of global variables.
  • technical improvement: automated unit tests on Travis-CI for PHP versions 7.2 to 8.1.
  • fix: stop Divi from clearing Autoptimize’s cache which is pretty counter-productive.
  • misc smaller fixes/ improvements, see the GitHub commit log

older