Configuring - web-optimizator - Configuring - Project Hosting on Google Code

Updated Nov 10, 2009 by sunny.dreamwind
Labels:	Id-3., Featured
Locales:	en, ru

Configuring

Below are listed several groups of options to configure in latest version of Web Optimizer.

Options groups

Cache Directories. Here you can set paths to cache folders (on file system), where all minified CSS, JavaScript, and HTML files will be stored. There you can also define root directory for your website (it's required to correct calculation of all relative paths). Be default all cache directories are located in cache folder inside Web Optimizer installation.

Minify and Combine. This group of settings is responsible for combining and minify JavaScript and CSS files. Be default JavaScript files are minified with JSMin (or YUI Compressor if there is java). Also you can obfuscate JavaScript with the help of Dean Edwards Packer (will be the best choice on disabled gzip). Here you can also set options to minify resulted HTML code (simple line breaks, tabulations, and spaces removal, one-string mode, or(and) removing HTML comments). Conditional comments for IE are not parsed in all cases.

External and inline code. Web Optimizer can download and parse external JavaScript files (included from different domains) and inline code (located right inside <script>). Here you can set CSS code merging, that is inside <style> (enabled by default). Also you can set (separated by space) file names (just names, not full paths), that must be excluded from merging logic. There are some bugs with merging initial Tiny MCE and FCE Editor JavaScript libraries, so they are excluded by default.

Gzip Options. This group of settings manages whether JavaScript, CSS, or HTML files will be server as archives. Gzip saves about 70-85% of traffic while transferring textual files, but it can be not so optimal for web server (in case of gip via PHP and high load). In any case if it's possible all gzip settings are written via .htaccess (for CSS and JavaScript files in static mode). If it's impossible to change .htaccess gzip versions of JavaScript and CSS files are stored inside cache directories to minimize CPU load (via PHP).

Unobtrusive JavaScript. This group consists of settings responsible for non-blocking load of different JavaScript approaches. For example you can move include of merged JavaScript file before <body> (or just load it on DomContentLoaded event), you also can move load of some JavaScript counters, advertisements, and widgets to the very bottom of the document (after JavaScript code is loaded the results HTML code will be inserted to the initial place on the page, that ensures load of additional ads after the main content is loaded).

Client-side caching. This option adds an expires header to your JavaScript and CSS files which ensures that files are cached on the client-side by the browser. When you change your JS or CSS, a new filename is generated and the latest version is therefore downloaded and cached.

Server-side caching. This option allow Web Optimizer to cache generated HTML output and prevent a lot of server-side work to generate it. Note, with this option all server-dependent logic will be disabled. All pages will be completely static. Please turn it on only if you are completely sure.

Performance options. Usually Web Optimizer checks if files have been changed since the last access to the page. And uses retrieved information to give existing file from cache or generate a new one. It's not good from the server side optimization point of view so you can disable this check. By enabling this option you need to manage Web Optimizer cache manually to clean cache folders from out-of-date cached files when new assets are available.

CSS Sprites. This is maybe the most powerful and the most innovative part of the Web Optimizer. Right usage of this technique can reduce the number of HTTP requests to the server on the page with a lot of background images by order (!) - from 20-100 to 3-10. But there are some troubles with displaying combined images for IE6 (images are created as PNG32, but IE6 can't handle transparency properly for such PNGs), these problems are solved by excluding IE6 from CSS Sprites process by CSS hacks (option is enabled by default). Also this can be prevented by using not-transparent images. Also you can use JPEG instead of PNG for full color images, set "aggressive" mode (repeat-x and repeat-y will be combined without calculating actual sizes of containers and there will be no free space between images), add free space between images (allow to resolve some issue with scaling CSS Sprites in modern browsers). There is "restricted" memory mode to increase stability of CSS Sprites creation process. If PHP process has less than 64 Mb of memory (this will be enough for CSS Sprites about 3000x3000 pixels, almost all cases are covered with these dimensions), images larger 4000 square pixels will be excluded. Also you can exclude images by their linear sizes (in pixels, 900 by default) and their file names (not full paths just file names) from CSS Sprites creation process.

data:URI. Data:URI technique allows you to include background images right inside CSS file. It is supported with all modern browsers and IE8. It has restriction in size with 24 Kb (32 Kb of data:URI code are encoded from 24576 bytes of binary code) - it's adjustable. To avoid problems with IE7- there are CSS hacks included into result file, so website design will be in order after this transformation. Also with data:URI creation it's highly recommended to optimize images (and reduce their initial size). To perform this operation API from smush.it is used. For correct optimization you need to make all images writable for your web server. This option is disabled by default because you usually perform this optimization only once and after that all subsequent CSS files builds will already use minified images.

Multiple hosts. This option allows you to enable images' distribution through multiple static hosts. Every image will be associated with the only host (to avoid caching one image from all available hosts). To use this acceleration technique you need to add to DNS all alternative hosts for the IP address which will serve them (usually it's the same as for the main website) and add to server configuration some aliases fir the main website. For example:

ServerAlias i1.site.com
ServerAlias i2.site.com

After this you need to add i1 i2 to Web Optimizer hosts' list and make sure that images are distributed through these hosts. During installation Web Optimizer automatically checks a number of default hosts to use them as alterative (with the same website root), also all set hosts are checked for availability (test images are loaded from them). Please keep in mind that enabling "protection" for Web Optimizer installation (there are some words about this option below) automatic hosts' check can be performed properly and you need to set list of hosts by hand, without Web Optimizer installation restart. Automatic check can be disabled if it's required.

.htaccess. Most of gzip and cache settings can be written via web server configuration file to avoid overhead of server scripts. This can be performed with .htaccess file (if you want you can transfer all settings to httpd.conf file manually after installation). Web Optimizer automatically checks for available Apache modules and configures . htaccess records accordingly (of course this file must be writeable). mod_gzip, mod_deflate, and mod_filter handle for gzip "on fly", mod_rewrite and mod_mime — for static archives. mod_headers and mod_setenvif — for correct rules for gzip in old browsers and proxy servers. mod_expires — for correct cache expires headers. Also you can place .htaccess either in the website directory (it can be useful if you have a lot of sites inside different folders), or right in the website root. Be default both locations are equal. Also you can protect Web Optimizer installation with .htpasswd. In this case to perform all setup and configuration you need to provide login and password through HTTP Basic Authorization in your browsers (this allows you to move Web Optimizer to any folder of your website, but don't forget to move cache directories outside protected Web Optimizer installation).

Footer text. There is small stamp in the right bottom corner of the optimized website "Accelerated with Web Optimizer" with the link (with rel="nofollow" attribute) to the project website. There are 3 different stamps available.

Changing /index.php. Web Optimizer supports automatic change required CMS's files for several dozens of systems (in case of unknown system it is displayed as CMS 42, and only root index.php is changed in a standard way). Before automatic change Web Optimizer performs chained optimization of the home page (to create all cached files and avoid long delay on the first load of optimized website).

Manual configuration recommendations

Here is the list of recommended changes in Web Optimizer configuration.

Common JavaScript or CSS file inclusion on all pages. Sometimes we need to use a common JavaScript library or general CSS file through the whole website. To tell Web Optimizer not to include this file with the others you can exclude it in the configuration:

External and inline code -> Excludes file from merging -> List of files separated by space

One-string mode for HTML. Web Optimizer can merge whole resulting HTML into one string as described above. For this you need to enable

Minify Options > Remove HTML comments > Yes
Minify Options > Shrink HTML to the one string > Yes

Please notice that these settings make additional load to the server (correct regular expression is very expensive) and can lead to exclusion of some JavaScript code (that is included via comments). Also all code inside script, textarea, pre won't be changed (due to HTML specification). So please use these settings very carefully.

Images optimization via smush.it. Smush.it service has been developed by Yahoo! and Google engineers and allows you to optimize file size of any images automatically. You can enable images' optimization via CSS Sprites library:

<?php
require('/full/path/to/css.sprites.php');
$smushit = new css_sprites();
$smushit->smushit('/full/path/to/image');
?>

After this instead of initial image (if there are sufficient rights to replace it) we will have its optimized copy. It's better to perform this operation not on live images but on their copies - to have opportunity to roll back all changes.

Protected installation. Web Optimizer can be installed into any folder (inside you website) and protected with htpasswd. To do this you need to enable:

Use .htaccess -> Protect Web Optimizer installation via htpasswd -> Yes

With this option you must be sure that Cache Directories are located outside the Web Optimizer folder (otherwise the whole website will be broken for all visitors except you). With HTTP Basic Authorization Web Optimizer will use the same username/password you entered on installation (or on settings configuration).