Forum Moderators: coopster

Message Too Old, No Replies

Tip to drastically reduce file size

... without compromising code readability

         

isorg

10:25 am on Nov 15, 2005 (gmt 0)

10+ Year Member



I thought I would share this tip with you. I implemented it on a site yesterday and was very impressed with the impact.

When you are coding in HTML or CSS, you want to remove all the white spaces in your final HTML document. All the spaces, carriage returns, tabs etc.

The white space is just "noise" and is not displayed by the browser. Removing it will not have any impact on what is shown in the browser.

Reducing white space will make the filesize a lot smaller, be quicker to download for your visitor, be take up less bandwidth when your site is crawled. It increases the content:markup ratio, which is good for SEO purposes.

The problem is that if you go too far with removing all the spaces, carriage returns, tabs etc. you are left with code that is impossible for you, as the developer, to understand, read and debug. It makes code maintenance a nightmare.

So conventional wisdom was that you have to find a happy balance between removing the white space and keeping the code readable.

What I did was to add this to the top of every page:

function callback($buffer)
{
$holdit=$buffer;
$holdit=str_replace(" ", " ", $holdit);
$holdit=str_replace("\n", "", $holdit);
$holdit=str_replace("\r", "", $holdit);
return $holdit;
}

ob_start("ob_gzhandler");
ob_start("callback");

The WebmasterWorld post does not let me insert multiple blank spaces, but that's what I am doin in line 4 - str_replacing multiple spaces with a single space.

The results have been tremendous - an already optimised file which was 19kb has been reduced to 4kb! My 7kb external style sheet is a single line of 1kb. The whole site is a lot faster and more responsive. The resulting code is unreadable for the visitor (which is not such a bad thing...) but I still have the original with all the spaces and formatting preserved. The pages validate as before.

Doing this does add to the server load, as the page must be processed further before it is served. But if the server load improvement from serving a smaller file is more than the strain of more processing, then there will be a net benefit.

Don't try this with Javascript files though, as they do not work without the carriage returns / line breaks.

Similarly, Adsense code in the middle of your page will break down if you do this. I got round this problem by (1) placing a marker around Adsense code that I do not want compressing, (2) in the callback function: explode()-ing around the marker, compressing each exploded fragment as required and then implode()-ing before return()-ing.

larryhatch

10:59 am on Nov 15, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



For those who want something simple, this worked for me.

One by one I call up my pages in Wordpad, yeah the plain old MS text editor.

I click on Edit -> Replace. A little window opens.

In the upper box (to be replaced) I type in two spaces and NOTHING else.
In the lower box (the replacement string) I put in ONE space only.

Click on 'Replace' to test this out a few times.
Click on 'Replace All' to finish the first pass.
Repeat until RH scroll bar stops moving.
Things may go faster if you replace 3 or 4 spaces with one the first time.
Save and upload amended file.

Its simple, no danger of removing line breaks etc.
Your code won't become unreadable, at most it will shift to the left a bit.

Your pages will load faster. If everybody did this the whole internet would speed up.
Any idea how many totally needless spaces get sent over the lines? -Larry