Eric Bergman-Terrell's Blog
In order to get the best performance out of your website, it's important to avoid sending bloated content to your website's visitors. This is especially true for visitors using mobile devices: bloated websites will not only be slow and unresponsive, they will tend to drain the battery faster than they should.
CSS and Javascript
This website had some CSS and Javascript that was not minified. In other words, the content was formatted for readability by the developer. For instance, while this javascript file was readable, thanks to the generous whitespace and long and meaningful variable names, its size was 368 bytes:
$(document).ready(function () {
var offsettop = parseInt($("body").css("height"));
window.scrollTo(0, offsettop);
$("#TopButton").click(function () {
window.scrollTo(0, 0);
});
$("#BottomButton").click(function () {
var offsettop = parseInt($("body").css("height"));
window.scrollTo(0, offsettop);
})
});
Minified version:
$(document).ready(function(){var a=parseInt($("body").css("height"));window.scrollTo(0,a);$("#TopButton").click(function(){window.scrollTo(0,0)});$("#BottomButton").click(function(){var b=parseInt($("body").css("height"));window.scrollTo(0,b)})});
After minifying this file with yuicompressor the file size was reduced to 247 bytes, a savings of almost 33%. And I didn't have to sacrifice readability. I used a "File Watcher" in WebStorm to automatically update a separate, minified version of the file every time the original file is updated. I did the same thing with the CSS files, with similar results.
HTML
This website's HTML content is generated with EJS templates. Like the Javascript and CSS files, these templates were formatted for readability, not to conserve the user's bandwidth. I could have minified HTML content the same way I minified Javascript and CSS content, but I chose a different approach. Instead, I wrote a middleware function that intercepts the bloated HTML responses and minifies the HTML using html-minifier. You'll notice that the middleware function makes sure that the content type is HTML before doing the HTML-specific minification. Also, it's important to catch any errors thrown during the minification process. Some HTML may render properly in the user's brower, but may contain errors that prevent it from being successfully minified.
requestHook.js:
...
var htmlMinifier = require('html-minifier');
...
function isHtml(text) {
var prefix = "<!DOCTYPE html>";
return text.length >= prefix.length && text.substring(0, prefix.length) === prefix;
}
exports.requestHook = function(req, res, next) {
if (req.method === 'GET' || req.method === 'POST') {
...
var oldSend = res.send;
res.send = function(data) {
if (data != null) {
var htmlText = data.toString();
if (htmlText.length > 0 && isHtml(htmlText)) {
try {
data = htmlMinifier.minify(htmlText, {
removeComments: true,
collapseWhitespace: true
});
}
catch(error) {
global.logger.error('requestHook: cannot minify html for ' + req.url);
global.logger.error(error);
}
}
}
oldSend.apply(res, [data]);
}
}
...
next();
...
};
app.js:
...
var requestHook = require('./libs/requestHook');
...
app.use(requestHook.requestHook);
...
I have mixed feelings about this minification solution for HTML content. On the plus side it's highly effective, it minifies the EJS templates, as well as any data dynamically inserted into those templates. On the minus side, it must be fairly CPU intensive. Perhaps a better solution would be a mechanism similar to the one I used for CSS and Javascript content, that would work for EJS templates.
Compression
Even after your Javascript, CSS, and HTML is minified, it's possible to conserve additional bandwidth by compression. I used the compression module. I chose to specify the threshold (i.e. the minimum size file that will be compressed).
app.js:
...
var compression = require('compression');
...
app.use(compression({
threshold: config.compressionThreshold
}));
Minify and compress your web content for maximal speed!
Reader Comments
Comment on this Blog PostRecent Posts
| Title | Date |
| .NET Public-Key (Asymmetric) Cryptography Demo | July 20, 2025 |
| Raspberry Pi 3B+ Photo Frame | June 17, 2025 |
| EBTCalc (Android) Version 1.53 is now available | May 19, 2024 |
| Vault 3 Security Enhancements | October 24, 2023 |
| Vault 3 is now available for Apple OSX M2 Mac Computers! | September 18, 2023 |
| Vault (for Desktop) Version 0.77 Released | March 26, 2023 |
| EBTCalc (Android) Version 1.44 is now available | October 12, 2021 |