Minify HTML using SED

Since I redeveloped the Keyboard Playing site, I’ve been interested in optimizing the website delivery. I ran the Page Speed analysis, and it proposed me to minify.

Due to server constraints, I could not install YUI compressor, so I made some approximates using SED.

My CSS is generated from LESS and already minified. The only JavaScript file is jQuery, so I already use the minified version. HTML remains

Minify HTML

Bulk minify

I found inspiration in a script to minify CSS, but made it quite simpler. I apply it to all .php files of the site. Being no expert in shell script, I used the basic find command:

Remove heading and trailing spaces

Developing under NetBeans, I have beautifully formatted code. Pleasant when developping, heavy on networks.

So, I first remove all heading and trailing spaces:

Already, the page is much lighter.

Remove newlines

New lines are useful for humans, but useless to rendering. A new line is still a useless character, so let us get rid of it.

The version of the script I had was not fully functional, but I found an enhancement on StackOverflow.

The comment problem

I had a problem using this script. Some of my PHP pages did not work any longer. I discovered that I used single-line comments. You know, // that kind of comment

Only problem is, when you remove all newlines, everything after this comment is also commented…

So, I took the time to remove all single-line comments before minifying.

The final script

Once again, using LEGOs:

One weakness though: single-line comments are removed when they are alone on their line. If at the end of a code line, they stay. But I will keep it so, so that URLs in code would not be removed by the script. Weary of you use single-line comments, then.

Published by

Cyrille Chopelet

Programming addict, UX philosopher, casual gamer, sci-fi enthusiast, hi-tech dilettante, ... Some people even call me a geek.

3 thoughts on “Minify HTML using SED”

  1. Good posting!
    But I think you missed -i option in second line.
    find -name *.php -exec sed ‘s/^[ \t]*//g; s/[ \t]*$//g;’ {} \;
    Should be
    find -name *.php -exec sed -i ‘s/^[ \t]*//g; s/[ \t]*$//g;’ {} \;

    This article much helps me.
    Thank you.

"Wit beyond measure is man's greatest treasure." − Rowena Ravenclaw

This site uses Akismet to reduce spam. Learn how your comment data is processed.