-
Notifications
You must be signed in to change notification settings - Fork 84
FAQ: Minification
View your page source in your browser and search for any <style>, <link> or <script> tags that contain external CSS or JS files and one by one add them to the minify settings page. Do not include any CSS in conditional statements (unless you know what you are doing) like:
<!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="/wp-content/themes/default/lte.css" media="screen,projection" />
<![endif]-->
Or simply use the "Help" tool available on the minify settings page which will identify CSS and JS files used in the templates of your theme and properly assign them to the same. Simply tick the checkbox for files you wish to minify, click "Apply & close", then save your settings.
The plugin will combine, minify, HTTP compress and check for updates to these files automatically from now on. If you have any CSS or JS that are inline consider making them external files so that you can use them with minify.
I've used the plugin to optimize all my theme's JS and plugins JS, but there are some function calls, where do those go?
Just place them above </head> if that's where your embed is done or above </body> if that's where you need them. Wherever they need to be to be called after the JS that needs them, it'll be fine.
Yes you can, but since there are numerous ways to do so, so be sure to test your results carefully. Having said that we do encourage it as it will mean that less processing has to be done to deliver your pages.
First let me point out that in many cases we suggest putting all the JS that's not required for interactivity with your site at the bottom of the document. Anything JS that makes the site work as intended we suggested embedding in the <head>. Depending on your specific situation, having the majority of your JS at the bottom of the document will mean that your visitors won't have to download things they don't want to begin interacting with your site or reading it's content. Quite often the additional HTTP transaction is worthwhile.
Definitely. Removing white space from your files make gzip (HTTP compression) more effective.
Many developers like to have comments in the code for various reasons, however these comments add no value from the blog readers (or search engine for that matter) point of view and only contribute to increased load time and wasted bandwidth as a result. Now only you can use them and view them in your site (as a logged in administrator viewing the page source), which is really what (we assume) you intended.
<link> is a non-blocking method to embed CSS into a document. We recommend this approach for optimal performance.
In the case of objects (files) you don't host yourself, this could add several seconds to
your page's load time as the DNS lookups, HTTP transaction roundtrip times and wait times add up. Even when all the scripts are hosted locally, the same adversities exist. Since all objects in the <head> of a document have to be ready before the page can be rendered, having them load in a parallel fashion as opposed to linear (or near linear) gives night and day results.
Nothing yet. We're evaluating use cases to deal with common issues (like inline CSS for tag clouds for example).
Pretty much. If you monetize your blog with ads you will want to spend some time making sure that the ad code works well with your optimization settings. There are also the occasional pieces of code that conflict with the others and have to be in a specific order to work well, but that's not a problem that this plugin introduces.
No, the plugin looks for conditional statements in your markup used for CSS (and sometimes JS) and makes sure that the minified files precede it, so keep that in mind.
Yes and no. In general, packed JS cannot be minified reliably. Obfuscated JS also is hit or miss. A minified and gzipped JS file will be smaller than a packed file in any case, so using the (uncompressed, unpacked or un obfuscated) developer versions of your plugins is no longer a concern when using this plugin. Alternatively, you can use the non-blocking embed option to continue to use your packed or obfuscated file without minification.
On the contrary, as with any other action a user can perform on a site, faster performance will encourage more of it. The cache is so quickly rebuilt in memory that it's no trouble to show visitors the most current version of a post that's experiencing Digg, Slashdot, Drudge Report, Yahoo Buzz or Twitter effect.
Unfortunately a 400 bad request error may be generated. So use the "Check URI" button to make sure that you have entered the correct URL or path to the file.
No. If you include a script in the minify settings twice or it already exists in your theme we do not automatically remove the extra code. That's tricky business and it's better for us to just let you make the decisions conscientiously.
I have some CSS classes with declarations being overwritten or JS with dependencies, do I really have to copy and paste all my CSS and JS file settings around?
No, you can drag and drop them into the desired order on the minify settings page.
Steve Souders identified that placing inline scripts between JS and CSS embeds creates a blocking situation, so we're try to help you avoid that. If you'd like to experiment with various scenarios related specifically to your blog, we recommend Steve's tool, Cuzillion. Have some beneficial input on other common cases for WordPress users? Reach out to us.
Happy to! Login as an administrator, go to the Minify Settings page and check off "Show un-minified pages to administrators" and save the changes. Now stay logged in as an administrator in the same browser you used to change the settings and now when you view the source of a given page in the site, the source will not be minified.
files on different types of pages in my theme; how is this done?
On the minify settings tab, use the drop-down selection menu to define the CSS or JS files that appear on all pages using the "Default" group first. Then specify unique files for the other pages.
In case you were using @media declarations in your document, we'd have you covered. We will likely allow you to modify this attribute as subsequent features are finalized.
No, this plugin is not similar. While valid HTML and W3C standards ensure consistent behavior across user agents and promote accessibility, any invalidity that exist in the code is not going to bring your site to its knees.
Unlikely, you're saving them bandwidth and using their applications, so they will probably appreciate it as long as their application still works as intended and you're using their software in an authorized manner. Look at it this way, even before this plugin, you and thousands of other people were still downloading it, now you're just downloading it first.
Google already minified and HTTP compressed jQuery (and other libraries) for me, why can't I just use their bandwidth and embed other code after it?
You can! Just add Google's script to your minify settings use non-blocking mode and your visitors will download jQuery directly from them as you wish. And the same is obviously true for any other library you wish. Remember you are creating additional DNS Lookups and HTTP transactions when you do this.
I wanted to use a different version jQuery with my theme, how do I replace WordPress' jQuery with Google's minified version using your plugin?
Currently you cannot, replacement is not yet supported.
This is definitely a special case. Files like "http://domain.com/wp-content/themes/default/js /script.js?ver=20090102" etc need to be specified with the full URL. This is an exception to the general rule of specifying a local path to file like: "wp-content/themes/default/js/script.js", which should also work fine. Be sure to click the "Verify URL" button to be sure that everything is ok before saving changes.
When using Minify and JS/CSS placement, custom placement, the following tags are available:
-
<!-- W3TC-include-css -->Used with "Auto" and "Manual". Inserts the minified/combined CSS files at the location you choose. -
<!-- W3TC-include-js-head -->Used with "Manual". Inserts the minified/combined JS files. Embed location "in<head>" in "Manual" mode. -
<!-- W3TC-include-js-body-start -->Used with "Manual". Inserts the minified/combined JS files. Embed location "after<body>" in "Manual" mode. -
<!-- W3TC-include-js-body-end -->Used with "Manual". Inserts the minified/combined JS files. Embed location "before</body>" in "Manual" mode.
With the various hosted 3rd party applications available (from web site statistics to social media sharing widgets), the problems we've noticed are: additional HTTP transactions, DNS lookups and latencies from busy servers that we can't control and often un-minified files with no HTTP compression all add up to a very slow page load and poor user experience. With your own copy of external files, updated as frequently as you wish, none of these problems exist.