[thelist] Website speed smart practices (was gzip and far future expires header )

[Benjamin Hawkes-Lewis]

On 16/1/09 04:58, Bob Meetin wrote:
> Post should have been: Website speed smart practices
>
> Background: I use both websiteoptimization.com and YSlow to review
> websites. I could use some clarification on purpose and approach to a
> couple optimization techniques:
>
> Q1)  Is there a difference in effect/purpose on setting header expires
> in a PHP file vs. in the .htaccess?

It makes no difference to the client.

> Q2) gzip vs minify or removing white space - Example - you have a
> javascript or php file with comments and perhaps white space.
> If you use gzip as in the above PHP script, is there any further
> 'significant' savings by stripping the file of white space.

Define "significant".

$ curl -s -o example.html http://www.bbc.co.uk/
$ wc -c example.html
   112674 example.html
$ perl -p -e "s/\s{2}/ /g" example.html | wc -c
   105872
$ gzip --stdout example.html | wc -c
    22946
$ perl -p -e "s/\s{2}/ /g" example.html | gzip --stdout | wc -c
    22458
$ perl -e 'print ( ( ( 22946 - 22458 ) / 22946 ) * 100 ); print "%\n";'
2.12673232807461%

Replacing every instance of two whitespace characters with a single 
space and then gzipping results in a saving of about 2% over just gzipping.

Note that stripping whitespace is a lot more complicated than the above 
regular expression since some whitespace in code is significant.

>  If so is
> there a utility that can be downloaded to do this rather than doing it
> manually?

For JS and CSS, examples include:

* http://developer.yahoo.com/yui/compressor/ (Java)

* http://dojotoolkit.org/docs/shrinksafe (Java)

* http://code.google.com/p/cssmin/ (PHP)

* http://www.crockford.com/javascript/jsmin.html (various languages)

Automatically stripping whitespace from HTML is problematic; potentially 
_any_ intra-element whitespace in HTML can be significant because of:

http://www.w3.org/TR/CSS21/text.html#white-space-prop

> I read something about minify where you do something like coming css or
> js files in a list like:
>
> <link rel="stylesheet" href="main.css, layout.css" type="text/css" />  or
> <link rel="stylesheet" href="main.php, layout.php" type="text/css" />
>
> Any significant effect?

Yes. Concatenating CSS or JS assets cuts down on HTTP requests:

http://developer.yahoo.com/performance/rules.html#num_http

> Q3) With many CMS systems such as Joomla, the way the template system is
> built (off the shelf), you end up with a lot of HTTP requests as a
> result of many modules accompanied by both stylesheets and javascript
> files. Add in a few images and you could easily have 40 HTTP requests.
> What is a good way to handle this if it cannot be avoided?

I don't see how Joomla can absolutely prevent you concatenating JS and 
CSS or spriting background images ( 
http://spritegen.website-performance.org/ ), but if you must request 
each asset separately plenty of the other Yahoo! performance suggestions 
are still applicable:

http://developer.yahoo.com/performance/

For example: use a content delivery network like Amazon's S3 to serve 
each asset as locally as possible.

> Q4) Yslow report that images, js and css files have Etags?  If it should
> be done, how do you configure or disable them?

http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.19

http://www.php.net/header

http://httpd.apache.org/docs/2.2/mod/core.html#fileetag

http://developer.yahoo.com/performance/rules.html#etags

--
Benjamin Hawkes-Lewis