How to optimize html, css runtime on server for better loading time?

Many times I have read on many question's answers that we don't need to remove white-space and comments from html, css and js files to reduce file size manually We can do this automatically on server.

1) Is it like in my dreamweaver it will be like this

/*Some Comment*/
.footer li h3 {
    margin: 0 0 6px;
    font-weight: bold;
    display: inline;
    color: #e92e2e; }
/*Some comment*/
    .footer li h3 a {
        font-weight: no开发者_如何学JAVArmal;
        font-size: 1em;
        color: #e92e2e; }

On server it will be this ?

.footer li h3{margin:0 0 6px;font-weight:bold;display:inline;color:#e92e2e}.footer li h3 a{font-weight:normal;font-size:1em;color:#e92e2e}

I can do this by hand or using this tool http://www.refresh-sf.com/yui/

2) How to do this on Lamp server?

3) On server do we just remove white space and comments?

You need a minifying tool. Try googling yuicompressor and go through its docs. You will need to create an Ant script to automate this.

If you want to remove white space on runtime, you could use PHP to serve the CSS:

<?php
$lines = file('yourCssFile.css');
$content = '';
foreach ($lines as $line_num => $line) {
    $content .= trim($line);
}
header("Content-type: text/plain"); // <-- change accordingly

echo $content;

Then you would just link to the php file in your html instead. You can do similarly for html, js and css. Of course, the effect that this will have on the overall speed will be minimal. Using gzip compression will be far better.

If that's how your CSS file looks in Dreamweaver, it will display the same for anyone else (even if they open it in Notepad).

In order to reduce file sizes you should minify your code. There are several tools/compilers/sites that will do it for you. Below are three well-known sites/tools for compression.

• Minify CSS
• Google Minify (HTML/CSS/JS)
• Yahoo UI Compressor (HTML/CSS/JS)

Something else you may want to take into consideration is caching your sites. Hope this helps!