Autoptimize WordPress Plugin

Autoptimize Wordpress Plugin is used to Autoptimize speeds up your website and helps you save bandwidth by aggregating and minimizing JS, CSS and HTML..

Autoptimize makes optimizing your site really easy. It concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them, and moves styles to the page head and can move scripts to the footer. It also minifies the HTML code itself, making your page really lightweight. There are advanced options and an 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. WP Super Cache, HyperCache, Comet Cache or KeyCDN's Cache Enabler.

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

What does the plugin do to help speed up my site? 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. Will this work with my blog? 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. What is the use of "inline and defer 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. http://jonassebastianohlsson.com/criticalpathcssgenerator/ is a nice basic solution and http://criticalcss.com/ is a premium solution by the same developer. Alternatively this bookmarklet (Chrome-only) can be helpful as well. Or should you inline all CSS? The short answer: probably not (but I do). Back in the days CSS optimization was easy; put all CSS in your head, aggregating everything in one CSS-file per media-type and you were good to go. But ever since Google included mobile in PageSpeed Insights and started complaining about render blocking CSS, things got messy (see "deferring CSS" elsewhere in this FAQ). One of the solutions is inlining all your CSS, which as of Autoptimize 1.8.0 is supported. Inlining all CSS has one clear advantage (better PageSpeed score) and one big disadvantage; your base HTML-page gets significantly bigger and if the amount of CSS is big, Pagespeed Insights will complain of "roundtrip times". Also when looking at a test that includes multiple requests (let's say 5 pages), performance will be worse, as the CSS-payload is sent over again and again whereas normally the separate CSS-files would not need to be sent any more as they would be in cache. So the choice should be based on your answer to some site-specific questions; how much CSS do you have? How many pages per visit do your visitors request? If you have a lot of CSS o a high number of pages/ visit, it's probably not a good idea to inline all CSS. But I do (as I have a low amount of average requests/ visitor and only a small amount of CSS as I use a pretty simple theme). You can find more information on this topic in this blog post. My cache is getting huge, doesn't Autoptimize purge the cache? 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. As from version 2.0.0 Autoptimize will display a notice on the administration pages if the cache size surpasses the half a Gigabyte mark. 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. Where is the "look only in head" option? While "look only in head" still works, it is now (since Autoptimize 2.0.0) no longer visible on the settings-page if it is not active. As long as the option is active (for JS or CSS), it will however remain visible until you deactivate it. If you're comfortable with PHP, there still are filters available to;

Autoptimize Wordpress Plugin free download

Here is the Autoptimize wordpress plugin download link you can download and install to your Wordpress blog

Autoptimize Authors

Frank Goossens
turl
Optimizing Matters

Download Autoptimize Wordpress plugin directly

Download Autoptimize from wordpress Plugin repostiory