The Source for Java Technology Collaboration
User: Password:



Felipe Gaucho's Blog

August 2007 Archives


Jazoon'07: Presentations published

Posted by felipegaucho on August 21, 2007 at 12:50 AM | Permalink | Comments (1)

Jazoon'07 presentations

Jazoon organizers have prepared all presentations for download on jazoon.com. Go to http://jazoon.com/en/conference.html and browse the website for the talks you require.

Jazoon'07 videos

The first videos of Jazoon'07 keynote presentations are up and running on parleys: http://parleys.com/label/PARLEYS/jazoon07 * More videos will follow.

Jazoon'08 contribute

Do you wish to have a presentation at Jazoon'08? We will publish the call for paper in September. You can then submit your abstract on jazoon.com until the end of November. We are looking forward to receive your proposal.

spotjazoon.JPG


Mozilla about cache

Posted by felipegaucho on August 15, 2007 at 01:26 AM | Permalink | Comments (1)

I continue my studies about web applications optimization focusing in the browser side. My previous blog was about YSlow, the excellent add on of Firebug. Now, I focused more to understand how browsers cache works and how to trace problems caused by its storage strategies.

The browser side was a great concern few years ago, when the power of the client machines and the available broadband were quite restricted. Nowadays, it really doesn't matter if you push 1 or 2 MB of data over the Internet because the most part of the users will not feel much difference. Despite that, as engineer I am always looking for an optimal configuration and dropping useless characters in the server response or simply ignoring the garbage around my site goes against my sense of quality.

Well, if you want to thing about old concerns, you must go old school and check the old books, so I found this very old and yet useful reference about using Mozilla to inspect the web pages contents. The most part of the text is already obsolete, but there is a forgotten pearl in the end of the page, it is about cache.

Mozilla Cache Manager

From the original page: The cache manager in Mozilla provides you with full access to see what's in the memory and disk cache.

The single step to inspect your browser cache is to load the following address in your browser: about:cache. That's it, then you have access to all information about the objects in the memory and also in the disk cache. You can also include the type of device you want to inspect: about:cache?device=[memory|disk]

A friend of mine just notified me about other interesting tricks in the address bar of Mozilla, including the about:config

A new javascript minifier: YUI Compressor

Another good new for the web developers is the YUI Compressor, a javascript minifier that promises to work better than its predecessors. Thanks for Milfont for this last minute tip :). There is a lot of controversial on how much it impacts on web performance or how much is worth to spend time and money doing small optimizations, but for now I accept the thesis about quality as an overall concern - let's see.



Expires Http header: the magic number of YSlow

Posted by felipegaucho on August 08, 2007 at 11:29 AM | Permalink | Comments (2)

A good way to reduce the number of Http Connections required to load a web page is to store images and other resources in the browser cache. It is very well presented in this other blog. The problem is to find a correct configuration of the names and values used by different browsers to optimize the cache usage. To help us to identify what is going on during the communication between browsers and servers, we have a large set of tools available on the internet. One of my recent discoveries and preferred tool is YSlow.

yslow icon YSlow for Firebug

YSlow is an easy-for-use plugin that allows you to inspect any web page just clicking a button. For me, it is a preliminary step in any web site optimization - an indicator about the site pitfalls.

For example: applying YSlow in the blog page you are reading right now, I got the results presented in the right box (website grades go from 1 to 99 and items values are from A to F). I will not depict every small detail about the java.net blog evaluation, I strongly recommend you to download and use YSlow by yourself before trying to understand that information. I suggest you to apply YSlow against the popular sites like google.com or against your current web project.

For those familiar to sites optimization, I would like to talk about a minor and interesting detail about the expiration header - item #3.

Performance Grade of this page: F (59)

  1. A 1. Make fewer HTTP requests
  2. F - Use a CDN
  3. F - Add an Expires header
  4. F - Gzip components
  5. B - Put CSS at the top
  6. A - Move scripts to the bottom
  7. A - Avoid CSS expressions
  8. n/a - Make JS and CSS external
  9. C - Reduce DNS lookups
  10. A - Minify JS
  11. A - Avoid redirects
  12. A - Remove duplicate scripts
  13. F - Configure ETags

How to setup Expires headers

Expires is a Http header that allows you to define when a resource (image, css, ...) will need to be reloaded. It is a String representation of a Date in the format EEE, dd MMM yyyy HH:mm:ss z. There is lots of Java code available on the internet to produce the Expires header, the most part is similar to the following code I used during my experiments:

 	public static void setCacheExpireDate(HttpServletResponse response,
			int seconds) {
		if (response != null) {
			Calendar cal = new GregorianCalendar();
			cal.roll(Calendar.SECOND, seconds);
			response.setHeader("Cache-Control", "PUBLIC, max-age=" + seconds + ", must-revalidate");
			response.setHeader("Expires", htmlExpiresDateFormat().format(cal.getTime()));
		}
	}

        public static DateFormat htmlExpiresDateFormat() {
            DateFormat httpDateFormat = new SimpleDateFormat("EEE, dd MMM yyyy HH:mm:ss z", Locale.US);
            httpDateFormat.setTimeZone(TimeZone.getTimeZone("GMT"));
            return httpDateFormat;
        }

With the code, the browser started receiving headers like these:

        Last-Modified:  Sun, 19 Sep 2004 22:06:49 GMT
        Cache-Control:  PUBLIC, max-age=57600, must-revalidate
        Expires:         Thu, 09 Aug 2007 05:22:55 GMT
        Content-Type:   image/gif
        Content-Length: 377
        Date:             Wed, 08 Aug 2007 13:22:55 GMT
        Server:           Apache-Coyote/1.1

It was supposed to be a simple configuration step of my website optimization, but - after trying different values for the headers, including Expires header, Cache-Control and Last-Modified - the YSlow was still saying the Expires header was not present. I got confused and started to navigate on discussions lists and blogs when I finally figured out the problem: YSlow uses the idea of a far future.

A far future Expires header

Well, far future seems to be one of that relatives measures, when for a butterfly it could be 23 hours and for a mountain it could be one million years. So, I suppose the far notion should be pre-defined some way. I didn't find and I confess didn't search too much about the standard values adopted by YSlow, but from my desktop experiences I found it: The YSlow magic number far future is

172801 seconds = 48 hours + 1 second

That's it, everything more than two days seems to be far enough to YSlow - a minor detail in this complex task of websites tunning. And it is not an official information, just an empirical observation. If you need more precise guidance about YSlow, the Chief Performance Yahoo!, Steve Souders, is launching a book entirely dedicated to website optimization - a promising publishing from a company that serves millions of users every day :)

A last and very important advise: don't take decisions based only on YSlow. It is just an indicator, a tool created for Yahoo site optimization that can give you a glimpse about the quality of your web site - a helpful tool that should evolve from now on to become part of the arsenal of tips and tricks for websites tunning.





Powered by
Movable Type 3.01D
 Feed java.net RSS Feeds