常见问题

插件怎么帮助加快我的网站？

It concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them, and moves styles to the page head, and scripts (optionally) to the footer. It also minifies the HTML code itself, making your page really lightweight.

But I’m on HTTP/2, so I don’t need 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. 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 😉

这将与我的博客工作？

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.

为什么 jquery.js 没有优化

Starting from AO 2.1 WordPress core’s jquery.js is not optimized for the simple reason a lot of popular plugins inject inline JS that is not aggregated either (due to possible cache size issues with unique code in inline JS) which relies on jquery being available, so excluding jquery.js ensures that most sites will work out of the box. If you want optimize jquery as well, you can remove it from the JS optimization exclusion-list (you might have to enable “also aggregate inline JS” as well or switch to “force JS in head”).

为什么自动优化的 JS 呈现阻塞？

If not “forced in head”, Autoptimized JS is not render blocking as it has the “defer” flag added. It is however possible another plugin removes the “defer”-flag. Speed Booster Pack was reported doing this, but the behavior has not been confirmed yet.

为什么自动优化的CSS仍然被称为渲染阻塞？

With the default Autoptimize configuration the CSS is linked in the head, which is a safe default but has Google PageSpeed Insights complaining. You can look into “inline all CSS” (easy) or “inline and defer CSS” (better) which are explained in this FAQ as well.

“内嵌和推迟CSS”的用法是什么？

CSS in general should go in the head of the document. Recently a.o. Google started promoting deferring non-essential CSS, while inlining those styles needed to build the page above the fold. This is especially important to render pages as quickly as possible on mobile devices. As from Autoptimize 1.9.0 this is easy; select “inline and defer CSS”, paste the block of “above the fold CSS” in the input field (text area) and you’re good to go!

But how can one find out what the “above the fold CSS” is?

There’s no easy solution for that as “above the fold” depends on where the fold is, which in turn depends on screensize. There are some tools available however, which try to identify just what is “above the fold”. This list of tools is a great starting point. The Sitelocity critical CSS generator and Jonas Ohlsson’s criticalpathcssgenerator are nice basic solutions and http://criticalcss.com/ is a premium solution by the same Jonas Ohlsson. Alternatively this bookmarklet (Chrome-only) can be helpful as well.

还是应该内联所有CSS？

The short answer: probably not. Although inlining all CSS will make the CSS non-render blocking, it will result in your base HTML-page getting significantly bigger thus requiring more “roundtrip times”. Moreover when considering multiple pages being requested in a browsing session the inline CSS is sent over each time, whereas when not inlined it would be served from cache. Finally the inlined CSS will push the meta-tags in the HTML down to a position where Facebook or Whatsapp might not look for it any more, breaking e.g. thumbnails when sharing on these platforms.

我的缓存越来越大了，Autoptimize不会清除缓存吗？

Autoptimize does not have its proper cache purging mechanism, as this could remove optimized CSS/JS which is still referred to in other caches, which would break your site. Moreover a fast growing cache is an indication of other problems you should avoid.

Instead you can keep the cache size at an acceptable level by either:

• disactivating the “aggregate inline JS” and/ or “aggregate inline CSS” options
• excluding JS-variables (or sometimes CSS-selectors) that change on a per page (or per pageload) basis. You can read how you can do that in this blogpost.

Despite above objections, there are 3rd party solutions to automatically purge the AO cache, e.g. using this code or this plugin, but for reasons above these are to be used only if you really know what you’re doing.

“清除缓存”似乎不操作？

在管理工具栏中点击自动优化下拉菜单中的”删除缓存”链接时, 您可能会收到”您的缓存可能未被成功清除”。 在这种情况下, 请转到”自动优化设置”页面, 然后单击”保存更改并清除缓存”按钮。

Moreover don’t worry if your cache never is down to 0 files/ 0KB, as Autoptimize (as from version 2.2) will automatically preload the cache immediately after it has been cleared to speed further minification significantly up.

当我清除Autoptimize缓存时，我的网站看起来很糟糕！

When clearing AO’s cache, no page cache should contain pages (HTML) that refers to the removed optimized CSS/ JS. Although for that purpose there is integration between Autoptimize and some page caches, this integration does not cover 100% of setups so you might need to purge your page cache manually.

我还能使用Cloudflare的Rocket Loader吗？

Cloudflare Rocket Loader is a pretty advanced but invasive way to make JavaScript non-render-blocking, which Cloudflare still considers Beta. Sometimes Autoptimize & Rocket Loader work together, sometimes they don’t. The best approach is to disable Rocket Loader, configure Autoptimize and re-enable Rocket Loader (if you think it can help) after that and test if everything still works.

At the moment (June 2017) it seems RocketLoader might break AO’s “inline & defer CSS”, which is based on Filamentgroup’s loadCSS, resulting in the deferred CSS not loading.

I tried Autoptimize but my Google Pagespeed Scored barely improved

Autoptimize is not a simple “fix my Pagespeed-problems” plugin; it “only” aggregates & minifies (local) JS & CSS and images and allows for some nice extra’s as removing Google Fonts and deferring the loading of the CSS. As such Autoptimize will allow you to improve your performance (load time measured in seconds) and will probably also help you tackle some specific Pagespeed warnings. If you want to improve further, you will probably also have to look into e.g. page caching and your webserver configuration, which will improve real performance (again, load time as measured by e.g. https://webpagetest.org) and your “performance best practice” pagespeed ratings.

我能用API做什么？

A whole lot; there are filters you can use to conditionally disable Autoptimize per request, to change the CSS- and JS-excludes, to change the limit for CSS background-images to be inlined in the CSS, to define what JS-files are moved behind the aggregated one, to change the defer-attribute on the aggregated JS script-tag, … There are examples for some filters in autoptimize_helper.php_example and in this FAQ.

CDN 如何工作？

Starting from version 1.7.0, CDN is activated upon entering the CDN blog root directory (e.g. http://cdn.example.net/wordpress/). If that URL is present, it will used for all Autoptimize-generated files (i.e. aggregated CSS and JS), including background-images in the CSS (when not using data-uri’s).

If you want your uploaded images to be on the CDN as well, you can change the upload_url_path in your WordPress configuration (/wp-admin/options.php) to the target CDN upload directory (e.g. http://cdn.example.net/wordpress/wp-content/uploads/). Do take into consideration this only works for images uploaded from that point onwards, not for images that already were uploaded. Thanks to BeautyPirate for the tip!

为什么我的字体不能放在CDN上呢？

Autoptimize supports this, but it is not enabled by default because non-local fonts might require some extra configuration. But if you have your cross-origin request policy in order, you can tell Autoptimize to put your fonts on the CDN by hooking into the API, setting autoptimize_filter_css_fonts_cdn to true this way;

add_filter('autoptimize_filter_css_fonts_cdn',__return_true);

I’m using Cloudflare, what should I enter as CDN root directory

Nothing, when on Cloudflare your autoptimized CSS/ JS is on the Cloudflare’s CDN automatically.

我如何强制聚合文件是静态 CSS 或 JS 而不是 PHP？

If your webserver is properly configured to handle compression (gzip or deflate) and cache expiry (expires and cache-control with sufficient cacheability), you don’t need Autoptimize to handle that for you. In that case you can check the “Save aggregated script/css as static files?”-option, which will force Autoptimize to save the aggregated files as .css and .js-files (meaning no PHP is needed to serve these files). This setting is default as of Autoptimize 1.8.

“排除优化” 如何工作？

Both CSS and JS optimization can skip code from being aggregated and minimized by adding “identifiers” to the comma-separated exclusion list. The exact identifier string to use can be determined this way:

• if you want to exclude a specific file, e.g. wp-content/plugins/funkyplugin/css/style.css, you could simply exclude “funkyplugin/css/style.css”
• if you want to exclude all files of a specific plugin, e.g. wp-content/plugins/funkyplugin/js/*, you can exclude for example “funkyplugin/js/” or “plugins/funkyplugin”
• if you want to exclude inline code, you’ll have to find a specific, unique string in that block of code and add that to the exclusion list. Example: to exclude <script>funky_data='Won\'t you take me to, Funky Town'</script>, the identifier is “funky_data”.

Autotimize 配置 & 问题排查

After having installed and activated the plugin, you’ll have access to an admin page where you can to enable HTML, CSS and JavaScript optimization. According to your liking, you can start of just enabling all of them, or if you’re more cautious one at a time.

If your blog doesn’t function normally after having turned on Autoptimize, here are some pointers to identify & solve such issues using “advanced settings”:

• If all works but you notice your blog is slower, ensure you have a page caching plugin installed (WP Super Cache or similar) and check the info on cache size (the soution for that problem also impacts performance for uncached pages) in this FAQ as well.
• In case your blog looks weird, i.e. when the layout gets messed up, there is problem with CSS optimization. Try excluding one or more CSS-files from being optimized. You can also force CSS not to be aggregated by wrapping it in noptimize-tags in your theme or widget or by adding filename (for external stylesheets) or string (for inline styles) to the exclude-list.
• In case some functionality on your site stops working (a carroussel, a menu, the search input, …) you’re likely hitting JavaScript optimization trouble. Change the “Aggregate inline JS” and/ or “Force JavaScript in head?” settings and try again. Excluding ‘js/jquery/jquery.js’ from optimization (see below) and optionally activating “Add try/catch wrapping“) can also help. Alternatively -for the technically savvy- you can exclude specific scripts from being treated (moved and/ or aggregated) by Autoptimize by adding a string that will match the offending Javascript or excluding it from within your template files or widgets by wrapping the code between noptimize-tags. Identifying the offending JavaScript and choosing the correct exclusion-string can be trial and error, but in the majority of cases JavaScript optimization issues can be solved this way. When debugging JavaScript issues, your browsers error console is the most important tool to help you understand what is going on.
• If your theme or plugin require jQuery, you can try either forcing all in head and/ or excluding jquery.js (and jQuery-plugins if needed).
• If you can’t get either CSS or JS optimization working, you can off course always continue using the other two optimization-techniques.
• If you tried the troubleshooting tips above and you still can’t get CSS and JS working at all, you can ask for support on the WordPress Autoptimize support forum. See below for a description of what information you should provide in your “trouble ticket”

我排除了文件，但它们仍然被自动优化？

AO minifies excluded JS/ CSS if the filename indicates the file is not minified yet. As of AO 2.5 you can disable this on the “JS, CSS & HTML”-tab under misc. options by unticking “minify excluded files”.

帮助, 启用 Autoptimize 后, 我有一个空白页面或内部服务器错误！

Make sure you’re not running other HTML, CSS or JS minification plugins (BWP minify, WP minify, …) simultaneously with Autoptimize or disable that functionality your page caching plugin (W3 Total Cache, WP Fastest Cache, …). Try enabling only CSS or only JS optimization to see which one causes the server error and follow the generic troubleshooting steps to find a workaround.

But I still have blank autoptimized CSS or JS-files!

If you are running Apache, the .htaccess file written by Autoptimize can in some cases conflict with the AllowOverrides settings of your Apache configuration (as is the case with the default configuration of some Ubuntu installations), which results in “internal server errors” on the autoptimize CSS- and JS-files. This can be solved by setting AllowOverrides to All.

无法登录域映射的多站点

Domain mapped multisites require Autoptimize to be initialized at a different WordPress action, add this line of code to your wp-config.php to make it so to hook into setup_theme for example:

define( 'AUTOPTIMIZE_SETUP_INITHOOK', 'setup_theme' );

I get no error, but my pages are not optimized at all?

Autoptimize does a number of checks before actually optimizing. When one of the following is true, your pages won’t be optimized:

• 当在定制器中
• if there is no opening <html tag
• if there is <xsl:stylesheet in the response (indicating the output is not HTML but XML)
• if there is <html amp in the response (as AMP-pages are optimized already)
• if the output is an RSS-feed (is_feed() function)
• 如果输出是WordPress管理页面（is_admin()函数）
• 如果请求该页面并在URL后面附加?ao_noptimize = 1
• if code hooks into Autoptimize to disable optimization (see topic on Visual Composer)
• if other plugins use the output buffer in an incompatible manner (disable other plugins selectively to identify the culprit)

Visual Composer, 海狸生成器和类似的页面生成器解决方案被打破！

Disable the option to have Autoptimize active for logged on users and go crazy dragging and dropping 😉

帮助, 我的店铺结帐/付款不起作用！

Disable the option to optimize cart/ checkout pages (works for WooCommerce, Easy Digital Downloads and WP eCommerce).

Revolution Slider is broken!

Make sure js/jquery/jquery.js is in the comma-separated list of JS optimization exclusions (this is excluded in the default configuration).

I’m getting “jQuery is not defined” errors

In that case you have un-aggregated JavaScript that requires jQuery to be loaded, so you’ll have to add js/jquery/jquery.js to the comma-separated list of JS optimization exclusions.

I use NextGen Galleries and a lot of JS is not aggregated/ minified?

NextGen Galleries does some nifty stuff to add JavaScript. In order for Autoptimize to be able to aggregate that, you can either disable Nextgen Gallery’s resourced manage with this code snippet add_filter( 'run_ngg_resource_manager', '__return_false' ); or you can tell Autoptimize to initialize earlier, by adding this to your wp-config.php: define("AUTOPTIMIZE_INIT_EARLIER","true");

什么是 noptimize？

Starting with version 1.6.6 Autoptimize excludes everything inside noptimize tags, e.g.:
<!--noptimize--><script>alert(‘this will not get autoptimized’);</script><!--/noptimize-->

You can do this in your page/ post content, in widgets and in your theme files (consider creating a child theme to avoid your work being overwritten by theme updates).

Can I change the directory & filename of cached autoptimize files?

Yes, if you want to serve files from e.g. /wp-content/resources/aggregated_12345.css instead of the default /wp-content/cache/autoptimize/autoptimize_12345.css, then add this to wp-config.php:

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

Does this work with non-default WP_CONTENT_URL ?

No, Autoptimize does not support a non-default WP_CONTENT_URL out-of-the-box, but this can be accomplished with a couple of lines of code hooking into Autoptimize’s API.

Can the generated JS/ CSS be pre-gzipped?

Yes, but this is off by default. You can enable this by passing ´true´ to ´autoptimize_filter_cache_create_static_gzip´. You’ll obviously still have to configure your webserver to use these files instead of the non-gzipped ones to avoid the overhead of on-the-fly compression.

什么”删除表情符号”呢？

This new option in Autoptimize 2.3 removes the inline CSS, inline JS and linked JS-file added by WordPress core. As such is can have a small positive impact on your site’s performance.

“删除查询字符串”有用吗？

Although some online performance assessment tools will single out “query strings for static files” as an issue for performance, in general the impact of these is almost non-existant. As such Autoptimize, since version 2.3, allows you to have the query string (or more precisely the “ver”-parameter) removed, but ticking “remove query strings from static resources” will have little or no impact of on your site’s performance as measured in (milli-)seconds.

我应该（如何）优化Google字体？

Google Fonts are typically loaded by a “render blocking” linked CSS-file. If you have a theme and plugins that use Google Fonts, you might end up with multiple such CSS-files. Autoptimize (since version 2.3) now let’s you lessen the impact of Google Fonts by either removing them alltogether or by optimizing the way they are loaded. There are two optimization-flavors; the first one is “combine and link”, which replaces all requests for Google Fonts into one request, which will still be render-blocking but will allow the fonts to be loaded immediately (meaning you won’t see fonts change while the page is loading). The alternative is “combine and load async” which uses JavaScript to load the fonts in a non-render blocking manner but which might cause a “flash of unstyled text”.

我要怎样使用 “预连接”

Preconnect is a somewhat advanced feature to instruct browsers (if they support it) to make a connection to specific domains even if the connection is not immediately needed. This can be used e.g. to lessen the impact of 3rd party resources on HTTPS (as DNS-request, TCP-connection and SSL/TLS negotiation are executed early). Use with care, as preconnecting to too many domains can be counter-productive.

什么时候我不可以异步 JS？

JavaScript files that are not autoptimized (because they were excluded or because they are hosted elsewhere) are typically render-blocking. By adding them in the comma-separated “async JS” field, Autoptimize will add the async flag causing the browser to load those files asynchronously (i.e. non-render blocking). This can however break your site (page), e.g. if you async “js/jquery/jquery.js” you will very likely get “jQuery is not defined”-errors. Use with care.

图像优化如何工作？

When image optimization is on, Autoptimize will look for png, gif, jpeg (.jpg) files in image tags and in your CSS files that are loaded from your own domain and change the src (source) to the ShortPixel CDN for those. Important: this can only work for publicly available images, otherwise the image optimization proxy will not be able to get the image to optimize it, so firewalls or proxies or password protection or even hotlinking-prevention might break image optimization.

我可以对我的Intranet /受保护的站点使用图像优化吗？

No; Image optimization depends on the ability of the external image optimization service to fetch the original image from your site, optimize it and save it on the CDN. If you images cannot be downloaded by anonymous visitors (due to firewall/ proxy/ password protection/ hotlinking-protection), image optimization will not work.

在哪里可以获得有关图像优化的更多信息？

Have a look at Shortpixel’s FAQ.

我可以禁用AO来监听页面缓存清除吗？

As from AO 2.4 AO “listens” to page cache purges to clear its own cache. You can disable this behavior with this filter;

add_filter('autoptimize_filter_main_hookpagecachepurge','__return_false');

优化后，一些非ASCII字符会丢失

默认情况下，AO使用非多字节安全字符串方法，但如果您的PHP具有mbstring扩展名，则可以使用此过滤器启用多字节安全字符串函数;

add_filter('autoptimize_filter_main_use_mbstring', '__return_true');

我无法使用Critical CSS

Check the FAQ on the (legacy) “power-up” here, this info will be integrated in this FAQ at a later date.

使用Autoptimize 2.7时，我仍需要Critical CSS开机吗？

When both Autoptimize 2.7 and the separate Critical CSS power-up are installed and active, the power-up will handle the critical CSS part. When you disable the power-up, the integrated critical CSS code in Autoptimize 2.7 will take over.

“启用404后备广告”有什么作用？ 我为什么需要这个？

Autoptimize caches aggregated & optimized CSS/ JS and links to those cached files are stored in the HTML, which will be stored in a page cache (which can be a plugin, can be at host level, can be at 3rd party, in the Google cache, in a browser). If there is HTML in a page cache that links to Autoptimized CSS/ JS that has been removed in the mean time (when the cache was cleared) then the page from cache will not look/ work as expected as the CSS or JS were not found (a 404 error).

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

When the option is enabled, Autoptimize adds an ErrorDocument 404 to the .htaccess (as used by Apache) and will also hook into WordPress core template_redirect to capture 404’s handled by WordPress. When using NGINX something like below should work (I’m not an NGINX specialist, but it does work for me);

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

Autoptimize中使用了哪些开源软件/项目？

以下伟大的开源项目以某种形式在Autoptimize中使用：

• Mr Clay’s Minify for JS & HTML minification
• YUI CSS compressor PHP Port for CSS minification
• Lazysizes for lazyload
• Persist Admin Notices Dismissal for notices in the administration screens
• Plugin Update Checker for automated updates from Github for the beta version
• LoadCSS for deferring full CSS
• jQuery cookie to store the “futtta about” category selection in a cookie
• jQuery tablesorter用于显示关键的CSS规则/工作
• jQuery unslider用于主设置页面右上角的迷你幻灯片（已回购）
• JavaScript-md5用于关键的CSS规则编辑
• Speed Booster Pack用于高级JS延迟

我在哪里可以获得帮助？

You can get help on the wordpress.org support forum. If you are 100% sure this your problem cannot be solved using Autoptimize configuration and that you in fact discovered a bug in the code, you can create an issue on GitHub. If you’re looking for premium support, check out our Autoptimize Pro Support and Web Performance Optimization services.

I want out, how should I remove Autoptimize?

• Disable the plugin (this will remove options and cache)
• 移除插件
• Clear any cache that might still have pages which reference Autoptimized CSS/JS (e.g. of a page caching plugin such as WP Super Cache)

我如何帮助/贡献？

Just fork Autoptimize on Github and code away!