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, 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 consider performance important, you really should use one of the many caching plugins to do page caching. Some good candidates to complement Autoptimize that way are e.g. Speed Booster pack, KeyCDN’s Cache Enabler, WP Super Cache or if you use Cloudflare WP Cloudflare Super Page Cache.

Support Premium
Nous proposons d’excellents services le support d’Autoptimize Pro et un service d’optimisation des performances Web, consultez notre offre sur https://autoptimize.com/ !

(Image de speed-surfing sous creative commons par 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 aider à accélérer mon site ?

Elle concatène tous les scripts et styles, les réduit et les compresse, ajoute les en-têtes expirés, les met en cache et déplace les styles de l’en-tête de la page, et les scripts (en option) vers le pied de page. Il réduit également le code HTML lui-même, ce qui rend votre page vraiment légère.

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

HTTP/2 est un grand pas en avant, c’est certain, car il réduit considérablement l’impact des requêtes multiples provenant du même serveur en utilisant la même connexion pour effectuer plusieurs requêtes simultanées. Cela étant dit, la concaténation des CSS/JS peut encore avoir beaucoup de sens (en), comme le décrit cet article de css-tricks.com (en) ou cet article de blog d’un des ingénieurs d’Ebay (en). En conclusion : configurez, testez, reconfigurez, re-testez, modifiez et regardez ce qui fonctionne le mieux dans votre contexte. Peut-être est-ce juste HTTP/2, peut-être est-ce HTTP/2 + agrégation et minification, peut-être est-ce HTTP/2 + minification (ce que l’AO peut aussi faire, il suffit de décocher les options « agréger les fichiers JS » et/ou « agréger les fichiers CSS »). Et Autoptimize peut faire beaucoup plus que « juste » optimiser votre JS & CSS bien sûr 😉

Est-ce que ça fonctionnera avec mon site ?

Bien qu’Autoptimize soit livré sans aucune garantie, il fonctionnera en général parfaitement si vous le configurez correctement. Voir « Dépannage » ci-dessous pour savoir comment configurer en cas de problème.

Pourquoi jquery.js n’est-il pas optimisé

A partir de AO 2.1, le cœur de WordPress jquery.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.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é ?

S’il n’est pas « forcé dans l’en-tête », le JS Autoptimizé n’a pas le rendu bloqué car il a le drapeau « différé » ajouté. Il est cependant possible qu’une autre extension retire le drapeau « différé ». Speed Booster Pack a été signalé comme faisant cela, mais le comportement n’a pas encore été confirmé (en).

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 (en) et le générateur de chemin critique (en) 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 ».

Configuration & Dépannage d’Autoptimize

Après avoir installé et activé l’extension, vous aurez accès à une page d’administration où vous pourrez activer l’optimisation HTML, CSS et JavaScript. Selon vos goûts, vous pouvez commencer par les activer tous ou, si vous êtes plus prudent, un à la fois.

Si votre site ne fonctionne pas normalement après avoir activé l’option sur Autoptimize, voici quelques conseils pour identifier et résoudre ces problèmes en utilisant les « Réglages avancés » :

  • Si tout fonctionne, mais que vous remarquez que votre site est plus lent, assurez-vous d’avoir installé une extension de mise en cache des pages (WP Super Cache ou similaire) et vérifiez également les informations sur la taille du cache dans cette FAQ (la source de ce problème a également un impact sur les performances des pages non mises en cache).
  • Au cas où votre site aurait l’air bizarre, c’est-à-dire lorsque la mise en page est chamboulée, il y a un problème d’optimisation CSS. Essayez d’exclure un ou plusieurs fichiers CSS de l’optimisation. Vous pouvez également forcer le CSS à ne pas être concaténé en l’enveloppant dans des balises noptimize dans votre thème ou widget ou en ajoutant un nom de fichier (pour les feuilles de style externes) ou une chaîne (pour les styles en ligne) à la liste d’exclusion.
  • Si certaines fonctionnalités de votre site cessent de fonctionner (un carrousel, un menu, l’entrée de recherche…), il est probable que vous rencontriez des problèmes d’optimisation JavaScript. Modifiez les réglages « Concaténer les fichiers JS » et/ou « Forcer le JavaScript à charger dans l’en-tête de la page » et réessayez. Exclure « js/jquery/jquery.js » de l’optimisation (voir ci-dessous) et activer optionnellement « Ajouter try/catch wrapping« ) peut également aider. Vous pouvez également – pour des raisons techniques – exclure certains scripts du traitement (déplacement et/ou concaténation) par Autoptimize en ajoutant une chaîne qui correspondra au Javascript incriminé ou en l’excluant de vos fichiers de modèles ou de vos widgets en enveloppant le code entre des balises noptimize. L’identification du JavaScript incriminé et le choix de la chaîne d’exclusion correcte peuvent se faire par essais et erreurs, mais dans la majorité des cas, les problèmes d’optimisation du JavaScript peuvent être résolus de cette manière. Lors du débogage des problèmes de JavaScript, la console d’erreur de votre navigateur est l’outil le plus important pour vous aider à comprendre ce qui se passe.
  • Si votre thème ou extension nécessite jQuery, vous pouvez essayer soit de forcer tout en en-tête et/ou d’exclure jquery.js (et les extensions jQuery si nécessaire).
  • Si vous ne parvenez pas à faire fonctionner l’optimisation CSS ou JS, vous pouvez bien sûr toujours continuer à utiliser les deux autres techniques d’optimisation.
  • Si vous avez essayé les conseils de dépannage ci-dessus et que vous n’arrivez toujours pas à faire fonctionner les CSS et JS, vous pouvez demander de l’aide sur le le forum WordPress du support d’Autoptimize. Vous trouverez ci-dessous une description des informations à fournir dans votre « ticket de dépannage ».

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 dgune manière incompatible (désactiver 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.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.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_');

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 is not defined ». A 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.

Ai-je encore besoin de Critical CSS power-up lorsque j’ai Autoptimize 2.7 ?

Lorsque Autoptimize 2.7 et Critical CSS power-up sont installés et actifs, power-up prendra en charge la partie CSS critique. Lorsque vous désactivez la mise sous tension, le code CSS critique intégré dans Autoptimize 2.7 prend le relais.

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).

This setting aims to prevent things from breaking by serving « fallback » CSS or JS. The fallback-files are copies of the first Autoptimized CSS & JS files created after the cache was emptied and as such will based on the homepage. This means that the CSS/ JS migth not apply 100% on other pages, but at least the impact of missing CSS/ JS will be lessened (often significantly).

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;
}

What open source software/ projects are used in Autoptimize?

The following great open source projects are used in Autoptimize in some form or another:

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

24 septembre 2020
When I used Edge I can sow my site fine, but in Chrome the post of my home page doesn't appear. I've tried in my cel phone and the same. I deactivated Autoptimize and my site works well again
20 septembre 2020
If you think your work is done installing WP Fastest Cache turning a few things on and being done with it you would be wrong. While WPFC will improve your score in a couple of ways, Autoptimize will work with it to make it even better. Adding Critical CSS will be the icing on the cake. The cherry on top, however, was a lovely exchange via email I had with Frank, one of the plugin developers who was kind enough to gently guide me from an average Google Page Speed Insights score of 50 to an average score of 84. 3 out of 10 times, I'm even in the green with a score of 90-92. I have been working all week to improve my site performance and I couldn't have done it without Autoptimize. For those interested, my setup ended being this: Autoptimize WP Fastest Cache reSmush.it Image Optimization WebP Express (further image optimization for modern browsers) Asset Cleanup (to remove WooCommerce assets from non-shop pages)
19 septembre 2020
After installing this plugin it helped with performance grade on website testing engines. It uplifted the performance grade from D to B. But extremely slowed down my website. Decreased the loading time and I had to uninstall the plugin. Instead I used the WP-Optimize – Clean, Compress, Cache - plugin and it's just amazing. Try that one and you will be more satisfied.
17 septembre 2020
I installed the plugin and default setting worked but I could not enable "lazy load" because of my METASLIDER plugin. The autor replied fast and we found a way to fix it. This support is OUTSTANDING - thank you Frank!
17 septembre 2020
Works as expected, uses core functionality where possible and doesn't have any excessive or annoying ads. I don't personally use it because of how my servers are setup, but I do recommend it to all my Total theme customers. - AJ
Lire les 1 139 avis

Contributeurs & développeurs

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

Contributeurs

“Autoptimize” a été traduit dans 28 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

2.7.7

  • critical CSS: make sure pages get a path-based rule even if a CPT or template matches (when « path based rules for pages » option is on)
  • critical CSS: make sure the « unload CCSS javascript » is only added once
  • settings screens: switch jQuery .attr() to .prop() as suggested by jQuery Migrate to prepare for the great oncoming big jQuery updates
  • HTML minify: reverse placeholder array to make sure last replaced placeholder is changed back first to fix rare issues
  • security fix: kudos to Erin Germ for finding & reporting an authenticated XSS vulnerability
  • security fix: props to an anonymous pentester for finding & reporting an authenticated malicous file upload vulnerability

2.7.6

  • fix for top frontend admin-bar being invisible when « inline & defer » is active.
  • fix for 3rd party CSS-files not being deferred when « inline & defer » is active.
  • small copy changes on Extra settings screen.

2.7.5

  • urgent fix for Google Fonts aggregate & preload that broke badly in 2.7.4.

2.7.4

  • Image optimization: also optimize icon links
  • Image optimization: fix webp-detection for Safari (contributed by @pinkasey)
  • Image lazyload: remove CSS that hides the placeholder image/ sets transistion between placeholder and final image
  • Critical CSS: new advanced option to unload CCSS on onLoad
  • Critical CSS improvement: cache templates in a transient to avoid overhead of having to search filesystem time and time again (contributed by @pratham2003)
  • Critical CSS improvement: better but still experimental jQuery deferring logic
  • Critical CSS fix: prevent MANUAL template-based rules being overwritten
  • CSS Inline & defer: move away from old loadCSS-based approach to Filamentgroup’s new, simpler method
  • 404 fallback enabled by default for new installations
  • changed all occurences of blacklist/ whitelist to blocklist/ allowlist. The filters autoptimize_filter_js_whitelist and autoptimize_filter_css_whitelist still work in 2.7.4 but usage is deprecated and should be replaced with autoptimize_filter_js_allowlist and autoptimize_filter_css_allowlist.
  • updated readme to explicitly confirm this is GPL + praise open source projects used in Autoptimize as praise was long overdue!
  • tested and confirmed working on WordPress 5.5 beta 2

2.7.3

  • Critical CSS: cache settings in the PHP process instead of re-fetching them
  • Critical CSS: shorter intervals between calls to criticalcss.com (shortening the asynchronous job queue processing time)
  • inline & defer CSS: fix for some excluded files not being preloaded
  • 404 fallback: only create fallback files for CSS/ JS, not for (background-)images
  • copy changes as suggested by Cyrille (@css31), un grand merci!
  • misc. other minor fixes, see the GitHub commit log.

2.7.2

  • Critical CSS: fix settings page issues with certain translation strings
  • Critical CSS: fix « inline & defer » not being « seen » on multisite network settings
  • Critical CSS: add links on path-based rules
  • Critical CSS: fix for non-asci URL’s not matching rules
  • Improvement: auto-disable autoptimize on misc. page builder URL’s
  • Improvement: don’t change non-aggregated CSS if it already has an onload attribute
  • Image lazyload improvement: remove &quot; from around background images

2.7.1

2.7.0

  • Integration of critical CSS power-up.
  • New option to ensure missing autoptimized files are served with fallback JS/ CSS.
  • Batch of misc. smaller improvements & fixes, more info in the GitHub commit log.

2.6.2

  • auto-exclude images from lazyload when they have loading="eager" attribute.
  • bugfix: don’t take querystring into account when deciding as-value for preloaded resources.
  • bugfix; ensure lqip images (used when both image optimization and lazyload are active) always work by normalizing the URL before sending it to shortpixel.
  • minimum WordPress version bumped to 4.4.

2.6.1

  • bugfixes for multiple lazyload bugs causing images not to load or load incorrectly
  • bugfixes for multiple multisite bugs causing settings-screen to be unavailable
  • bugfix re-added 3rd parameter to autoptimize_filter_js_minify_excluded-filter to ensure backwards-compatibility and thus avoid breaking Smart Cookie Kit which expected that 3rd parameter.

2.6.0

  • New: Autoptimize can be configured at network level or at individual site-level when on multisite.
  • Extra: new option to specify what resources need to be preloaded.
  • Extra: add display=swap to Autoptimized (CSS-based) Google Fonts.
  • Images: support for lazyloading of background-images when set in the inline style attribute of a div.
  • Images: updated to lazysizes 5.2.
  • CSS/ JS: no longer add type attributes to Autoptimized resources.
  • Improvement: cache clearing now also integrates with Kinsta, WP-Optimize & Nginx helper.
  • Added « Critical CSS » tab to highlight the criticalcss.com integration, which will be fully included in Autoptimize 2.7.
  • Batch of misc. smaller improvements & fixes, more info in the GitHub commit log.

2.5.1

  • Images: Also optimize & lazyload <picture><source>
  • Images: Misc. improvements to lazyload
  • Images: Updated to LazySizes 5.0.0
  • CSS: improvements to the deferring logic for non-aggregated CSS resources.
  • Settings-page: Show « JS, CSS & HTML » advanced options by default (many people did not see the button)

2.5.0

  • moved image optimization to a separate tab and move all code to a separate file.
  • added lazyloading (using lazysizes)
  • added webp support (requires image optimization and lazyloading to be active)
  • added option to enable/ disable the minification of excluded JS/ CSS files (on by default)
  • misc. bugfixes and smaller improvements

older