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

Question

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: normal;
        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?

Using mod_pagespeed for example. But a properly configured mod_deflate is often sufficient. — mario
– mario, Commented Oct 11, 2011 at 16:23
Agreed. Don't bother minifying. All modern browsers support gzip/deflate encoding. Just properly configure the server to compress output. — Tim Rogers
– Tim Rogers, Commented Oct 11, 2011 at 16:32
The browser will parse the CSS faster if you reduce the deepness of inheritence. Google recommends to use no more than two levels. — Karolis
– Karolis, Commented Oct 11, 2011 at 16:35
This tool will help you decide which parts of your page need more attention for optimization: pagespeed.googlelabs.com/pagespeed — Karolis
– Karolis, Commented Oct 11, 2011 at 16:44

Uzair · Accepted Answer · 2011-10-11 16:23:26Z

1

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

answered Oct 11, 2011 at 16:23

Uzair

1352 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike · Accepted Answer · 2011-10-11 16:38:23Z

1

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.

answered Oct 11, 2011 at 16:38

Mike

24.5k14 gold badges84 silver badges93 bronze badges

Comments

Andreas Köberle · Accepted Answer · 2012-01-01 21:15:23Z

1

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!

edited Jan 1, 2012 at 21:15

Andreas Köberle

112k58 gold badges281 silver badges308 bronze badges

answered Oct 11, 2011 at 16:25

rebz

2,1333 gold badges16 silver badges16 bronze badges

1 Comment

Jitendra Vyas Over a year ago

I already know about these tools but i want to compress on runtime

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related