Autoptimize

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.

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

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.

从 AO 2.1 开始, WordPress 核心的 jquery.min.js 并未进行优化, 原因很简单, 因为许多流行的插件都注入了未聚合的内联 JS(由于内联 JS 中的独特代码可能存在缓存大小问题), 这依赖于 jquery 可用, 因此排除 jquery.min.js 可确保大多数网站开箱即用。如果您还想优化 jquery, 则可以将其从 JS 优化排除列表中删除(您可能还必须启用 "也聚合内联 JS" 或切换为 "强制 JS 执行")。

当聚合 JavaSCript 并勾选“force in head”选项时，或者当不聚合且不延迟时，会发生这种情况。 考虑更改设置。

使用默认的 Autoptimize 配置时, CSS 链接在头部, 这是一个安全的默认设置, 但 Google PageSpeed Insights 会抱怨。您也可以查看"内联所有 CSS"(简单)或"内联和延迟 CSS"(更好), 这在本常见问题解答中也有介绍。

一般而言, CSS 应该放在文档的开头。最近, 谷歌(Google)开始推广推迟不必要的 CSS, 同时内嵌在页面上方构建页面所需的那些样式。这对于在移动设备上尽快渲染页面尤为重要。从 Autoptimize 1.9.0 开始, 这很容易。选择 "内联并延迟 CSS", 将 "折叠 CSS 上方" 块粘贴到输入字段(文本区域)中, 您就可以开始了!

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 将使 CSS 成为非阻塞渲染, 但这将导致您的基本 HTML 页面变得更大, 从而需要更多的 "往返时间"。此外, 当考虑到在浏览会话中请求多个页面时, 每次都会发送内联 CSS, 而当没有内联时, 它将从缓存中提供。最终, 内联的 CSS 将把 HTML 中的元标记向下推送至 Facebook 或 Whatsapp 可能不再寻找它的位置, 从而破坏了 在这些平台上共享时的缩略图。

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. 相反, 您可以通过以下任一方法将缓存大小保持在可接受的水平:

• 停用 "聚集内联 JS" 和/或 "聚集内联 CSS" 选项
• 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.

When clicking the "Delete Cache" link in the Autoptimize dropdown in the admin toolbar, you might to get a "Your cache might not have been purged successfully". In that case go to Autoptimizes setting page and click the "Save changes & clear cache"-button. 此外, 请不要担心您的缓存是否永远不会降到 0 个文件/ 0KB, 因为 Autoptimize (从 2.2 版开始)将在清除缓存后立即自动预加载缓存, 以加快进一步缩小的速度。

清除 AO 的缓存时, 任何页面缓存都不应包含引用已删除的优化 CSS/JS 的页面 (HTML)。尽管为此目的在 Autoptimize 和某些页面缓存之间进行了集成, 但是这种集成不能覆盖 100%的设置, 因此您可能需要手动清除页面缓存。

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.

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.

很多; 您可以使用一些过滤器来有条件地禁用每个请求的自动优化, 更改 CSS 和 JS 排除项, 更改要在 CSS 中内联的 CSS 背景图像的限制, 定义哪些 JS 文件在聚合后移动一种, 更改聚集的 JS 脚本标签上的 defer 属性, ... 在 autoptimize_helper.php_example 和此 FAQ 中有一些过滤器的示例。

从 1.7.0 版开始, 进入 CDN 博客根目录 (例如 http://cdn.example.net/wordpress/)后, 就会激活 CDN。如果存在该网址, 它将用于所有 Autoptimize 生成的文件(即, 聚合的 CSS 和 JS), 包括 CSS 中的背景图片(不使用 data-uri 时)。 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!

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' );

没什么, 在 Cloudflare 上时, 您自动优化的 CSS/JS 自动在 Cloudflare 的 CDN 上。

如果您的网络服务器已正确配置为处理压缩(gzip 或 deflate)和缓存过期(具有足够的可缓存性的过期和缓存控制), 则不需要 Autoptimize 来为您处理。在这种情况下, 您可以选中 "将聚合的脚本/css 保存为静态文件吗?" 选项, 这将强制 Autoptimize 将聚合的文件另存为 .css 和 .js 文件(这意味着不需要 PHP 即可提供这些文件)。自 Autoptimize 1.8 起, 此设置为默认设置。

通过将 "标识符" 添加到以逗号分隔的排除列表中, CSS 和 JS 优化都可以跳过代码的聚集和最小化。可以使用这种方式确定要使用的确切标识符字符串:

• 如果要排除特定文件, 例如 wp-content/plugins/funkyplugin/css/style.css, 则可以简单地排除 "funkyplugin/css/style.css"
• 如果要排除特定插件的所有文件, 例如 wp-content/plugins/funkyplugin/js/*, 则可以排除例如 "funkyplugin/js/" 或 "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".

在 https://blog.futtta.be/2022/05/05/what-to-do-when-autoptimize-breaks-your-site/ 查看故障排除说明

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

确保您没有同时运行其他 HTML, CSS 或 JS 缩小插件 (BWP minify, WP minify, ...) 同时也没有运行该功能或禁用了页面缓存插件(W3 Total Cache, WP Fastest Cache……)。尝试仅启用 CSS 或仅启用 JS 优化, 以查看是哪一种导致服务器错误, 然后按照常规的故障排除步骤查找解决方法。

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' );

在实际优化之前, Autoptimize 会进行大量检查。如果满足以下条件之一, 则不会优化您的页面:

• 当在定制器中
• 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)
• 如果输出是 RSS 提要 (is_feed()函数)
• 如果输出是 WordPress 管理页面 (is_admin()函数)
• 如果请求该页面并在 URL 后面附加 ?ao_noptimize=1
• 如果代码挂接到 Autoptimize 以禁用优化(请参阅 Visual Composer 上的主题)
• 如果其他插件以不兼容的方式使用输出缓冲区(有选择地禁用其他插件以识别罪魁祸首)

禁用对登录用户启用自动优化功能的选项, 并疯狂地拖放;-)

禁用用于优化购物车/结帐页面的选项(适用于 WooCommerce, Easy Digital Downloads 和 WP eCommerce)。

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

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

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");

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

是的, 如果您要从 /wp-content/resources/aggregated_12345.css 提供文件, 而不是从默认的 /wp-content/cache/autoptimize/autoptimize_12345.css 提供文件, 请将其添加到 wp-config.php: define('AUTOPTIMIZE_CACHE_CHILD_DIR','/resources/'); define('AUTOPTIMIZE_CACHEFILE_PREFIX','aggregated_');

不可以, Autoptimize 不支持开箱即用的非默认 WP_CONTENT_URL, 但这可以通过将几行代码连接到 Autoptimize 的 API 中来完成。

是的, 但是默认情况下处于关闭状态。您可以通过将 "true" 传递给 "autoptimize_filter_cache_create_static_gzip" 来启用此功能。显然, 您仍然必须将网络服务器配置为使用这些文件, 而不是使用非压缩文件, 以避免动态压缩的开销。

Autoptimize 2.3 中的此新选项删除了 WordPress 核心添加的内联 CSS, 内联 JS 和链接的 JS 文件。因此, 这可能会对您网站的性能产生较小的积极影响。

尽管某些在线性能评估工具会将 "静态文件的查询字符串" 作为性能问题来挑选出来, 但是通常这些影响几乎不存在。像这样 Autoptimize(自 2.3 版开始)允许您删除查询字符串(或更准确地说是 "ver" 参数), 但是勾选 "从静态资源中删除查询字符串" 对您网站的性能几乎是毫秒级的影响。

Google 字体通常由 "阻塞渲染" 链接的 CSS 文件加载。如果您有使用 Google 字体的主题和插件, 则最终可能会得到多个这样的 CSS 文件。Autoptimize (自 2.3 版开始)现在使您可以通过一起删除 Google 字体或优化它们的加载方式来减轻它们的影响。有两种优化口味; 第一个是 "组合和链接", 它将所有对 Google 字体的请求替换为一个请求, 该请求仍然会阻止渲染, 但允许立即加载字体(这意味着您不会看到字体在页面被更改时正在加载)。替代方法是 "合并并加载异步", 它使用 JavaScript 以非渲染阻止的方式加载字体, 但可能会导致 "未样式化文本闪烁"。

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.

未自动优化的 JavaScript 文件(因为它们被排除在外或因为它们在其他地方托管)通常会渲染阻塞。通过在逗号分隔的 "异步 JS" 字段中添加它们, Autoptimize 将添加异步标志, 从而导致浏览器异步加载这些文件(即, 非渲染阻止)。但是, 这可能会破坏您的站点(页面), 例如, 如果异步 "js/jquery/jquery.min.js", 则很可能会收到 "未定义 jQuery" 错误。小心使用。

启用图像优化后, Autoptimize 将在图像标签和从您自己的域加载的 CSS 文件中查找 png, gif, jpeg(.jpg) 文件, 并将这些文件的 src(源)更改为 ShortPixel CDN。重要提示:这仅适用于公开可用的图像, 否则图像优化代理将无法获取图像来对其进行优化, 因此防火墙或代理或密码保护甚至热链接防护都可能会中断图像优化。

没有; 图像优化取决于外部图像优化服务从您的站点获取原始图像, 对其进行优化并将其保存在 CDN 上的能力。如果匿名访问者无法下载图像(由于防火墙/代理/密码保护/热链接保护), 则图像优化将无法进行。

Have a look at Shortpixel's FAQ.

从 AO 2.4 开始, AO 会 "监听" 页面缓存清除以清除其自身的缓存。您可以使用此过滤器禁用此行为; add_filter('autoptimize_filter_main_hookpagecachepurge','__return_false');

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

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

不，不再需要 Critical CSS power-up，所有功能（以及许多修复/改进）现在都是 Autoptimize 的一部分。

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

以下伟大的开源项目以某种形式在 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 for the critical CSS rules/ jobs display
• jQuery unslider for the mini-slider in the top right corner on the main settings page (repo gone)
• JavaScript-md5 for critical CSS rules editing
• Speed Booster Pack for advanced JS deferring
• Disable Remove Google Fonts for additional Google Font removal

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.

• 禁用插件(这将删除选项和缓存)
• 移除插件
• 清除所有可能仍具有引用自动优化 CSS/JS 的页面的缓存(例如, 页面缓存插件(例如 WP Super Cache)的页面)

Just fork Autoptimize on Github and code away!