Before Doing Anything Else, Gzip Your Pages!
The first line of defense in reducing the payload of an HTML page is to gzip, or compress, your files. Make sure you have taken that step first if you haven't before doing anything else mentioned here, as that will provide the biggest pay-off.Benchmark Your Speed, Before and After
I said I didn't implement this method on the particular project I was working on: often after your pages are gzipped, the benefits you get from further compression are either negligible or actually decrease load speed, the very thing you're hoping to improve.Whitespace Removal: Basic Steps
There are several steps you need to take to set it up and get it working.PHP Check:
First, is PHP already being used to render your page? If so, you're good to go as is—skip this paragraph. If not, does the page have an "htm," "html", or "shtml" file extension and does that extension matter? If the answer to the second question is no, just change your file extension to "php" and if your web service provides PHP you should be good. If the file extension does matter and you're hosted on an Apache server, take a look at Step 4 here on how to give PHP control of rendering your pages.Basic PHP Function with Associated "Gotchas" Explained:
Now we need to write a PHP function, so let's create a new file called compress_html.php that we include on all our pages we want to minify. Open the IDE or text editor of your choice and create this new file.
<?php
// This function is probably too simple to use: It can bite.
function replace_tabs_newlines($content) {
return preg_replace('(\r|\n|\t)', '', $content);
}
?>A very simple function like this that strips newline characters and tabs might be all you'd need. The danger with this approach though happens when your site includes any inline JavaScript or CDATA that uses single-line comments (double slashes) or any pre-filled textareas that need to have newline characters for human readability. For example... <script type="text/javascript">
// click event
myFormElement.onclick = function() {
this.submit();
};
</script>...our simple PHP function would cause all the JavaScript below the "click event" comment to fail, because it's just stripping newlines and tabs from the entire HTML page indiscriminately. Once the document gets parsed by the browser, as far as the interpreter is concerned, without the newlines the script tag contains nothing but a big, long comment: // click eventmyFormElement.onclick = function() {this.submit();};. That means, of course, that your click event just died a horrid death.Wrapper Function Using Minify:
My approach was to use Minify's little-documented and still-experimental HTML minifier instead. Simply download Minify, and check out this page on getting it set up and running.<?php
function replace_tabs_newlines($content) {
require_once 'min/lib/Minify/HTML.php';
require_once 'min/lib/Minify/CSS.php';
require_once 'min/lib/JSMin.php';
$content = Minify_HTML::minify($content, array(
'cssMinifier' => array('Minify_CSS', 'minify'),
'jsMinifier' => array('JSMin', 'minify')
));
return $content;
}
?>With some sort of callback method in place (such as the one above using Minify), you've now ensured that JavaScript and CSS at least should get handled correctly. Serving Minified HTML on a Platter:
Now, simply include in the very top line of the PHP or HTML page you want to minify the following code, which includes the file that contains our replace_tabs_newlines function and calls ob_start:<?php
// includes are relative to the including file: this example
// assumes compress_html.php lives at the same directory level
// as the file in which you'll include these lines
include('compress_html.php');
ob_start('replace_tabs_newlines');
?>ob_start tells PHP to output any file contents to its internal memory buffer rather than the screen (think "o.utput b.uffering start"—you are turning on output buffering). The "replace_tabs_newlines" tells ob_start to send the raw output from the buffer through the function we just wrote and included in a separate file. Notice the quotation marks—single or double doesn't matter: ob_start expects the function reference to be a string.<?php ob_end_flush(); ?>This does just what it says: it ends, or turns back off, output buffering, then flushes the contents previously held in the buffer either to the screen (if ob_start is passed no callback method) or through "replace_tabs_newlines" (or any other callback method, if one is specified).
Final Check:
View your source code, and you should see that white space and newlines * were stripped before the page was rendered.// edits made to "min/lib/Minify/CSS.php"
public static function minify($css, $options = array())
{
require_once 'CSS/Compressor.php'; // removed "Minify/" from the front
if (isset($options['preserveComments'])
&& !$options['preserveComments']) {
$css = Minify_CSS_Compressor::process($css, $options);
} else {
require_once 'CommentPreserver.php'; // removed "Minify/" from the front
$css = Minify_CommentPreserver::process(
$css
,array('Minify_CSS_Compressor', 'process')
,array($options)
);
}
if (! isset($options['currentDir']) && ! isset($options['prependRelativePath'])) {
return $css;
}
require_once 'CSS/UriRewriter.php'; // removed "Minify/" from the front
if (isset($options['currentDir'])) {
return Minify_CSS_UriRewriter::rewrite(
$css
,$options['currentDir']
,isset($options['docRoot']) ? $options['docRoot'] : $_SERVER['DOCUMENT_ROOT']
,isset($options['symlinks']) ? $options['symlinks'] : array()
);
} else {
return Minify_CSS_UriRewriter::prepend(
$css
,$options['prependRelativePath']
);
}
}Note that (a) I am using the Minify library a directory level deeper (/some_dir/min), and (b) I only ran into problems when including it in files that lived in directories deeper than root, not at the root level itself.<div id="fadeEl" FadeState="-2" FadeTimeLeft="33">
I am the fade element.
</div>and passes a spliced-together variable that looks up the same element over and over again: document.getElementById(eid),setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);neither of which are optimal.// declare class so we can use the "new" keyword to create unique instances
var AnimateFade = function(elmOrElmId, duration, state) {
this.setOptions(elmOrElmId, duration, state);
this.animate();
};
// prototype its methods
AnimateFade.prototype = {
setOptions: function(elmOrElmId, duration, state) {
this.fadeDuration = duration;
this.element = (typeof elmOrElmId == 'string') ? document.getElementById(elmOrElmId) : elmOrElmId;
this.fadeState = (state && state == 1) ? 1 : 0;
this.fadeTimeLeft = duration;
this.lastTick = this.newTick();
},
newTick: function() {
return (new Date).getTime();
},
getElapsedTicks: function() {
return this.currentTick - this.lastTick;
},
animate: function() {
this.currentTick = this.newTick();
var self = this;
var elapsedTicks = this.getElapsedTicks();
// helper function, called in the timeout below,
// recurses with correct reference to "this"
var helper = function() {
self.animate();
};
if (this.fadeTimeLeft <= elapsedTicks) {
this.element.style.opacity = this.fadeState;
this.element.style.filter = 'alpha(opacity = ' + (this.fadeState * 100) + ')';
return;
}
this.fadeTimeLeft -= elapsedTicks;
var newOptVal = this.fadeTimeLeft / this.fadeDuration;
newOptVal = (this.fadeState == 1) ? (1 - newOptVal) : newOptVal;
this.element.style.opacity = newOptVal;
this.element.style.filter = 'alpha(opacity = ' + (newOptVal * 100) + ')';
this.lastTick = this.currentTick;
this.currentTick = this.newTick();
setTimeout(helper, 24);
}
};
// initializer function
var init = function(elmsOrElmIdArr, duration, state) {
for (var i = 0, l = elmsOrElmIdArr.length; i < l; i++) {
// "new" keyword creates unique instance
new AnimateFade(elmsOrElmIdArr[i], duration, state);
}
};
// pass in either string id or element reference
// Example A: fade just one element
var myOnlyElement = ['myUniqueId'];
// Example B: fade multiple elements
var myMultElms = ['myId', document.getElementsByTagName('div')[7], 'anotherId'];
// how long fade should last
var myDuration = 1000;//1,000 milliseconds, or 1 second
// start fading out
init(myMultElms, myDuration);
// or fading in
init(myMultElms, myDuration, 1);// initializer function capitalizing on parallel arrays
var init = function(elmsOrElmIdArr, duration, state) {
for (var i = 0, l = elmsOrElmIdArr.length; i < l; i++) {
// "new" keyword creates unique instance
new AnimateFade(elmsOrElmIdArr[i], duration[i], state[i]);
}
};
...to take full advantage of arrays, simultaneously fading multiple elements in and out for different lengths of time:
// set parallel arrays var myElms = [elm1, elm2, elm3]; var myDurations = [1000, 2500, 300]; var myStates = [0, 1, 0]; // start effects init(myElms, myDurations, myStates); // elm1 fades out in 1 second // elm2 fades in in 2-and-a-half seconds // elm3 fades out in 3/10ths of a secondThis could be useful if you wanted to fade in one set of elements while simultaneously fading out another set, perhaps a confirmation dialog and its acknowledge that the user's choice has either been implemented or canceled. Or whatever.
// All the mail-to links on the page:
$$('a[href^=mailto:]');| = | The property is equal to the value. |
|---|---|
| ^= | The property begins with the value. |
| $= | The property ends with the value. |
| != | The property is not equal to the value. |
| *= | The property contains the value. |
| ~= | The property is found when the value is split on spaces (so ~=foo matches “blah foo bar” but not “blahfoobar”). |
| |= | The property is found when the value is split on dashes (so |=foo matches “blah-foo-bar” but not “blahfoobar”). |
// All the inputs where name equals 'email'
$$('input[name=email]')
// All the images with urls that end in .gif
$$('img[src$=gif]')
// All the links without target="_blank"
$$('[target!=_blank]')Note that these expressions can take double or single quotes when you want to search for something that has a space or other character:$$('input[name!="user[username]"]')
$$('img[src$=".gif"]')
