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 :
- Téléversez le fichier zip et dézippez-le dans le répertoire
/wp-content/plugins/. - Activez lâextension via le menu « Extensions » de WordPress.
- Allez dans
Réglages > Autoptimizeet 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Ătruede 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_themepar 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:stylesheetdans la rĂ©ponse (indiquant que la sortie nâest pas HTML mais XML) - sâil y a
<html ampdans 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.jsest 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 404au .htaccess (tel quâutilisĂ© par Apache) et se connecte Ă©galement au cĆur de WordPresstemplate_redirectpour 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 :
- Mr Clay’s Minify pour la minification JS & HTML
- YUI CSS compressor PHP Port pour la minification CSS
- Lazysizes pour le chargement différé
- Persist Admin Notices Dismissal pour les notifications des Ă©crans dâadministration
- Plugin Update Checker pour les mises Ă jour automatisĂ©es de Github pour la version bĂȘta
- LoadCSS pour reporter le CSS complet
- jQuery cookie pour stocker la sélection de la catégorie « futtta about » dans un cookie
- jQuery tablesorter pour lâaffichage des rĂšgles/tĂąches CSS critiques
- jQuery unslider pour le mini-diaporama en haut à droite de la page des réglages principaux (repo disparu)
- JavaScript-md5 pour la modification des rĂšgles CSS critiques
- Speed Booster Pack pour le report avancé de JS
- Disable Remove Google Fonts for additional Google Font removal
-
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 !
