Minifiers

Description

The framework provides scripts that will minify Javascript and CSS just-in-time. This allows one to avoid minifying their Javascript and CSS every time it is altered, and it makes it possible to deliver particular CSS and JS to only devices of a given classification. It should be noted that, for pages that include the CSS Handler and JS Handler, these handlers have the same functionality and should be used instead to minify to reduce the number of HTTP requests. The syntax is the same as described below for the minifiers.

The framework provides a script that will compress an image to ideal dimensions based on the user's device. This feature allows one to provide a single image and let the framework scale it dynamically for the end user so that a high-resolution and low-resolution device both need only download an image optimized for their screen size.

Intent

Load times prove to be the major delimiting factor to the mobile browsing experience, and therefore a set of scripts should exist that enable sites to compress assets, just-in-time, through the framework.

CSS & JS Minifiers

Standalone Minifiers

The standalone minifier for Javascript:

http://{MWF_INSTALLATION_ROOT}/assets/min/js.php

The standalone minifier for CSS:

http://{MWF_INSTALLATION_ROOT}/assets/min/css.php

Classification Awareness

Minification of custom sheets can target a specific classification:

  • basic
  • standard
  • full

The minification scripts and handlers all take the above three classification names as GET parameters. The values of these parameters, if used, should be a set of URL encoded web paths. If more than one path is specified for a single GET parameter, then they should be concatenated with a plus sign (+).

This example produces a minified version of a Javascript file for standard devices and above:

<script src="http://{MOBILE_DOMAIN}/assets/min/js.php?standard={URL_ENCODED_PATH}" type="text/javascript"></script>

This example produces a minified version of two CSS files:

<link rel="stylesheet" href="http://{MOBILE_DOMAIN}/assets/min/css.php?standard={URL_ENCODED_PATH}+{URL_ENCODED_PATH_2}" type="text/css">

These can be used in combination at multiple classification levels:

<script src="http://{MOBILE_DOMAIN}/assets/min/js.php?standard={URL_ENCODED_PATH}&full={URL_ENCODED_PATH_2}" type="text/javascript"></script>

Image Compression

The framework provides a script that can be run off of {MOBILE_DOMAIN} to compress images suited for a user's device.

http://{MOBILE_DOMAIN}/assets/min/img.php?img={IMG_PATH}

It leverages caching policies to ensure that it does not, except when necessary, have to recompress the same image of the same size multiple times. In addition, it provides three different mechanisms by which a content provider can inform the script of compression:

  • browser_width_force & browser_height_force - These parameters do not take an attribute but instead merely inform the script to compress the image to a maximum width or height equal to the user's browsing device.
  • browser_width_percent & browser_height_percent - These parameters take a value between 1 and 100 and inform the script to compress the image to a maximum width or height equal to the percent specified of the user's browsing agent.
  • max_width & max_height - These parameters do not take into consideration the user's browsing device but instead inform the script to compress the image to a maximum height or width specified in pixels by this parameter. In terms of maximum size, the browser_width_percent and browser_height_percent parameters overrule the browser_width_force and browser_height_force parameters and the max_width and max_height parameters overrule both other sets.

In this example, the image will never be larger than 400 pixels when compressed and in addition will also never be larger than 80% width and 60% height of the user's browsing device.

<img src="http://m.ucla.edu/assets/min/img.php?img=http%3A%2F%2Fm.ucla.edu%2Fsomeimage.jpg
&browser_width_percent=80&browser_height_percent=60&max_width=400" />

Limitations

The image compression script caching support is a work in progress. The framework development group is revisiting the caching policies which currently have an inordinately long retention period.

There is a bug in Android 2.2 and 2.3 such that the screen dimensions are not reported reliably. MWF can't reliably determine screen width if the OS/browser won't reliably report it. Users of the image minifier are especially encouraged to confirm that results are acceptable in Android 2.2 or 2.3, and to provide a fallback using CSS or other techniques in cases where the minifier cannot provide a satisfactory scaling on those devices.