Hello, my name is Jan Jarfalk and I am an interaction designer and interface developer.

I’ve been working professionally with the web since 2002. Back then I had my own company and did everything myself. Now I am a bit more specific - I do usability, accessibility and a lot of client side coding. This, Unwrongest, is my personal lab. This is where I try, learn and evolve.

I am a Swedish citizen from Stockholm that currently lives and works in Sydney, Australia. From here I work for Getupdated's Stockholm based division 'Social Media', where we help our clients to create social networks.

I put function, before design. I love beautiful interfaces, but I like them simple and obvious. I like things that are fast and responsive. Take a look at my projects and I am certain you will notice and appreciate my slipstreamed approach.

For users to feel they are interacting freely the response time must be within 1 second. This is a blog post about how you reach that goal with the help of some simple Wordpress plugins, Firefox extensions and more.

40 years ago Robert B. Miller wrote a paper on ‘Response Time in Man-Computer Conversational Transactions’ which described three levels of response time. A response time of 0.1 seconds feels instantaneous. A response time within 1 second is fast enough for users to feel they are interacting freely and if the response time go above 10 seconds the user’s will lose its focus on the dialog. Miller concluded that a consistent 2 second response would be ideal.

Then the Internet happened and the rules were changed. In 2001 Zona Research released report that stated that the average web user will wait about eight seconds for a page to download, later known as the ‘8 second rule’.

For a long time, by Internet standards, the 8 second rule misguided web workers to create web pages that just barely keeps the user focused. If you already haven’t it’s really the time to create a web page that get your users to feel they are interacting freely. Its time to create a web page that loads up at a lot close to 1 second than 8.

Dust-Me Selectors a Firefox extension

Dust-Me Selectors is a Firefox extension that finds unused CSS selectors. You can test pages individually, or spider an entire site, and you’ll end up with a profile of which selectors are not used anywhere. Essentially it removes unnecessary data that is transferred to the user.
Download Dust-Me Selectors from Sitepoint

WP CSS a Wordpress plugin

<link rel="stylesheet" href="/wp-css-compress.php?f=style.css" type="text/css" />

This plugin will combine all your stylesheets in to one, thus reduce the number of HTTP requests required to render the page. It will also strip your files from whitespaces, compress it with GZIP and set a cache expiry time of your choosing.
Download WP CSS from Wordpress

WP JS a Wordpress plugin

<script src="wp-js-compress.php?f=1.js,2.js,3.js" type="text/javascript"></script>

This plugin will GZIP and JSMIN your JavaScript files as well as allowing the ability to put JavaScript files into a single file at the client’s end. Just like the WP CSS plugin this will reduce the number of HTTP requests and lower your blogs response time.
Download WP JS from Wordpress

WP Super Cache a Wordpress plugin

This plugin generates static html files from your dynamic WordPress blog. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts. Super Cache also has the feature to compress your html files using GZIP. There is also a special version of WP Super Cache which has the ability to minify HTML.
Download WP Super Cache from Wordpress
Download WP Super Cache with WPSCMin from Lyncd

Optimize DB a Wordpress plugin

This plugin lets you optimize the tables of your database, to reduce their overhead.
Download Optimize DB from Wordpress

Yahoo YSlow a Firefox Firebug extension

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. It lets you know if you have too many DOM elements, if your javascripts are positioned wrong, if you compression is working and much, much more.
Download YSlow from Yahoo

Last, but not least. Upgrade and do a clean up.

Upgrade Wordpress to the latest version. Remove the plugins you are not using and upgrade those you are. Keep your code light. Try to code what you want to code with as few words as elements, attributes and functions as possible. Minimize requests, use css sprites and read Yahoos guide about ‘Best Practices for Speeding Up Your Web Site’.

Reducing the number of HTTP requests is the key to faster pages. A simple way of doing this is by combining javascripts and stylesheets into single files using Rakaz’s combine script.

According to Yahoos article “Best Practices for Speeding Up Your Web Site” about 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page.

One way of reducing the number of HTTP requests while still support rich page designs is to use a server side script that combines all your javascripts and styles into single files. A php script that does exactly that is Rakaz’s combine.php.

When the script is configured and ready to use all you need to change are the urls to your scripts and styles. You will go from doing, in this case, four requests to only one.

	
	<script src="jquery-1.3.2.js" type="text/javascript"></script>
	<script src="jquery.valid8-1.1.1.js" type="text/javascript"></script>
	<script src="jquery.defaultvalue-1.0.js" type="text/javascript"></script>
	<script src="global.js" type="text/javascript"></script>
	
	<script src="jquery-1.3.2.js,jquery.valid8-1.1.1.js,jquery.defaultvalue-1.0.js,global.js" type="text/javascript">

Rakaz’s script will also compress and cache your combined files to reduce loading times even more. You can find a complete installation guide and more information about the script over at rakaz.nl

Real world example

I just uploaded and configured combine.php for http://chat.unwrongest.com. Before the script was added you needed to download 10 javascript files that weighed 232 kb in total. On average this took about 3 seconds to download. After installing the combine.php script you now need to download only a single file of 68 kb which only takes around 1 second to download. The total loading time of chat.unwrongest.com is now, for me, around 2 seconds instead of just above 4 seconds.