Favicons on popular sites and performance

What started out as an investigation to find out how many sites out there don’t have a favicon.ico file yet has turned into something  very interesting.

The importance of a favicon and the impact of it on performance has been discussed in various forums before, heck, it’s even listed in the first 14 rules of performance. So, how far have we come since 2007?

To find out more about favicons, I got the list of top 1000 sites from Alexa’s top 1,000,000 websites and wrote a small shell script to download the favicon.ico file from the webroot. That’s hostname/favicon.ico.

#!/bin/bash
for i in `cat ../source/top-1m.csv | head -n 1000`
do
	url=`echo $i | cut  -d "," -f2`
	curl --dump-header ${url}_header.txt --location  \
	--retry 2 --user-agent \
	'Mozilla/5.0 (Windows; U; Windows NT 5.1; it; rv:1.9.2.28)' \
	-o ${url}_favicon.ico http://${url}/favicon.ico
done

Note: To keep things simple, I haven’t used favicons that are linked using the <link rel=”icon” …> and <link rel=”shortcut icon” …> notation.

Some interesting facts about the top 1000 favicons I downloaded:

  • 145 sites don’t have a favicon at the default location(i.e. hostname/favicon.ico)
  • 106 sites have a favicon greater than 5KB
  • Only 127 sites have a favicon smaller than 1KB
  • The biggest favicon file found was 187KB (http://naver.jp/favicon.ico)
  • The smallest favicon file found was 152 Bytes – facebook.com
  • Average size(top 1000-145) of a favicon file is 4.5 KB
  • Apple has a favicon of size 8.85 KB 

Favicons of some popular sites:

Washington Post


Wall Street Journal

Apple

 

Business Insider

MSN

 

Sky Sports

… the list goes on and on.

Things I learned:

  • What you see in Firefox/Safari/Chrome is not the complete favicon.ico file (There’s more to it – see images above)
  •  IE supports only .ico file format for favicons
  • So far, using Charles HTTP debugging proxy is the only way to see the full favicon image on a Mac. Let me know if any other viewer works for you. Preview on Mac doesn’t.

Next steps:

  • I’ll extend that script to download favicons from sites that follow the <link rel …> notation for favicons.
  • Not sure if you’ve seen my script carefully. I have saved the HTTP response header of the favicon.ico file for each domain. I’ll see if I can find anything interesting in that.
Posted in Performance | Tagged , , , | 2 Comments

Install Growl on OS X Lion

Here’s the easiest way to install Growl on OS X Lion – Go to the Mac Appstore and install it.

or compile it.

Steps I followed to compile it.

$brew install mercurial 
 
$hg clone https://code.google.com/p/growl/
 
$cd growl
 
$hg tags | sort #find the latest version
 
$hg update "Growl.app 1.3.3"

Create a new certificate.

Steps:
Open Keychain Access.app
KeyChain Access > Certificate Assistant > Create a Certificate
Name: 3rd Party Mac Developer Application: The Growl Project, LLC
Identity Type: Self Signed Root (default)
Type: Code Signing

Hit Create.

you’ll need Xcode for the next step.

$xcodebuild -project Growl.xcodeproj -target Growl.app -configuration Release 
 
$cd build/Release/
 
$cp Growl.app /Applications/

Done.

 Note: I had to quit and restart the Twitter client to make it appear in the Growl Applications list.

References:
1. http://growl.info/documentation/developer/growl-source-install.php
2. http://groups.google.com/group/growldiscuss/browse_thread/thread/b681473390f7b710

 

Posted in Apple | Tagged , , , , , | 3 Comments

Metrics – the foundation of Web Page Optimization

Metrics has to be that one component in Web Page Optimization(WPO) that you just can’t afford to get wrong, yet, most people get it wrong.  The problem with getting your metrics wrong is that, you think you have fixed a problem, when you haven’t actually. I’ll give an example in each section below.
Before that, a quick summary on why we need measurements in WPO(experts can skip this para).
Assume you have a page (say A) which takes X seconds to load, you do some optimizations on that page A, at this point the only way to tell if your new page (say A1) is performing better than the older page(A) or No is by looking at the new page load time, say Y. Compare Y with X and see if performance has actually improved or degraded. This is the most basic method of looking at performance data and concluding if your optimizations have worked or no.

Which

Which

pic by calliope

Which pages should you measure?
Most of the time, the page that looks obvious is not the one you should be optimizing. e.g If you were to optimize a shopping site, then the Home page is not the one which should be optimizing first, it should be the product listing page or any page which is viewed most.
The key here is to find out which pages are the most visited pages in your site. I’ll give some examples here:

  • News site – Article page should be the most viewed page.
  • Celebrity site – Photo slideshow/video page should be the most viewed page.
  • Listings site – Search results page or listing page should be the most viewed page.

Don’t take my word on this, look at the data you have and find out for yourself.

I think you get the point. There’s no use in fine tuning that page which is viewed by only 2% of your users, pick the one which actually matters and fix it.
All this sounds like a no-brainier right? But guess what, this is the most common mistake most of us make.
Next time somebody tells you their site is slow, this is where you start.

What

What

pic by practicalowl

Now that you know which pages you have to fix, let’s look at what we need to measure. This part is quite vast and I’ll try to cover as much as I can.
The ideal scenario here would be to stand with a stopwatch behind a person using your site and see know long it took for him to navigate from page A to page B.
Some of us look at full page load time, some look at the onload event, base page load time, Above-the-fold time(AFT) and so on.

What to measure depends on how your page is structured. What is the key selling point of your site, is it a stock quote on top of the page or is it an image in a slideshow or is it an article, or is it user comments.
The easiest way to look at this is – what is it that’s visible in a browser when I load your site. The content that appears above the fold is important, that’s why it’s there(above the fold – the user doesn’t have to scroll to get to real content).

Majority of the sites should be good with just measuring the onload time of a page, because it doesn’t matter what the browser is loading in the background. There are exceptions to this, and that is why I’m saying majority and not all sites(explained below).

This is a good time to look at your page and say, “hey, am I loading things in my page that users really don’t care about or need right away?” Just load what is needed the most first, add the cosmetic stuff later on. Some examples to make this clear.

  • Small image carousel in an article page – users come to your site to read the article, so load that article first and load the JS for your carousel after page load.
  • Photo page – most of the time, users are not going to scroll down to read comments on each photo, they might just want to see photos. Load the comments on each photo only when a user scrolls to that section of the page.

I can go on and on with this list, but let me get back to the topic we are discussing here.

Exceptions

There are some pages like, a Maps site or a page that does a lot of ajax calls back and forth. Measuring just the body onload time might not be enough in this case. You will have to measure the time it took for the most important content on the page to load. e.g map tile images for a maps site or email in an email application or user comments, etc.In these cases you’ll have to come up with your own set of rules and decide what you should measure.

There has been a lot of discussion on Above-the-fold time and how to measure it, but personally I feel onload time should be the metric to go by for most of us.
Then we have Perceived Performance, this one’s tricky and probably the only one that comes closest to what a human brain perceives as fast.

How

How

pic by cifor

You know which pages to measure and what to look for in those pages. Let’s look at how we can measure our pages.

How can be classified into a of categories, like, is it a command line script that will be polling a page to measure page load time or is it a browser emulator that is opening a page or is it a piece of JavaScript in a users browser. There are many ways to measure and each one has it’s own advantages and drawbacks.
The first thing we need to understand here is – The user is not going to open the page the way your tool does or have the same Internet connection as your tool does or follow a browsing pattern that you expect. Users are random, totally random.
That is why one should take lot of samples, this evens out the odd ones.

If you don’t have have the tools that simulate your users browser, Internet connection and other such variables, then the best option is to go for beacon based tracking using JavaScript. Use something like Boomerang. This will iron out most of the issues we discussed in the previous para.
WebPagetest is another useful tool that lets you control a lot of variables like browser version, locations, bandwidth, etc. and gives very detailed information.
There are paid alternatives like Gomez and Keynote who specialize in giving very detailed performance metrics.

Where

This section is not relevant for tests that use JS tracking, but it’s still important to keep the where part in mind when you set-up other tests(like WebPageTest).
If majority of your users come from US or any particular region, then make sure your tests are running from that region. There is no point in measuring a page from India when most of its users are from US.

That pretty much sums up what I had to say. There are more topics in metrics that I’d like to talk about, like average vs 90th percentile and more. I’ll save that for another day.

I thought of writing this post because measurement looks like a very small piece of the whole WPO stack, when in reality, it’s not. Flawed metrics not only means waste of time, in some cases it could also mean money.

Do drop a line and let me know what you think about the whole topic of getting metrics right.

Posted in Performance | Tagged , , , , , , | Leave a comment

Manfrotto 190XB and 496RC2 Ball Head – Review

I’m late for the party, late by almost 1.5 years, that’s how long it has been since I got a DSLR, never really took time or put any effort into buying a tripod, part of it could be because I never felt the need for one, and some of it surely is laziness.

Piece of advice

The single biggest mistake most people do when it comes to buying a tripod is “let’s buy something cheap for now and upgrade later“. Please don’t. Pretty soon you’ll realize that the ‘cheap’ tripod doesn’t quite cut it and you need a new one, this is when you either upgrade or don’t buy a new tripod at all. If you’re serious about photography and love your camera, then don’t buy a cheap tripod, wait till you have enough money(if that’s a problem) and buy a good tripod.
Part of this advice comes from interacting with people who are into photography and experiences shared by people(online) who have fallen for the ‘cheap tripod’ trap.

My research

A typical start would have been with a web search for ‘best tripod for DSLR’ etc., but I used a different technique this time,  I started watching videos made by some professional and semi-professional photographers on youtube and it didn’t take me long to narrow down on the brand I was going with – Manfrotto. Key selling points for me were good build quality, reliable and a durable brand. Of course I did ask my friends about Manfrotto, and all of them only had good things to say about the brand.
Deciding which brand to go with was just 10% of the problem, the remaining was to finalize which model to buy, which ball head to buy. Few more days of reading and I made up mind to go with the Manfrotto 190XB Aluminum Tripod and the 496RC2 Ball Head.

Ok, I didn’t intend to go about telling you’ll all that, my main aim was to show you’ll how it looks like and answer some common questions people had.

Photographs

Top view

Top view (click image for large)

Tripod legs

Tripod legs (click image for large)

Center column

Center column (click image for large)

Ball Head front

Ball Head front (click image for large)

Ball Head back

Ball Head back (click image for large)

Pros

  • Stability – makes my D90 w/ 18-105mm look like a small baby
  • Adjustable center column length – helps you go really low (two piece column)
  • Build quality – very good
  • Leg warmers :)
  • One button locks the whole ball head, I prefer this over 2-3 different locks
  • Once you lock the ball head, it wont wobble at all
  • Love the friction nob
  • Easy to shuffle between portrait and landscape mode

Cons

  • Doesn’t fit anywhere in/on my camera bag – Kata DR 467
  • No spirit level – they could have easily added one
  • Some might find it heavy – I don’t.

Another question which was going on in my mind after I ordered the tripod was – is it tall enough for a person of my height – I’m 5ft 7in. Yes, it’s tall enough. Look at this pic below.
I mounted my camera and raised the viewfinder to my eye level. Even with that there’s more of that center column left to pull up, little less than half the length of the center column – 3 or 4 inches maybe.

Full view

Full view at 5ft 7in

Overall, I would highly recommend this tripod, it’s worth every penny. If you are willing to take it one step further then buy the carbon-fibre version of this model. It should be twice as light compared to this one and expensive as well.

Posted in Photography | Tagged , , , , , | 2 Comments

Solve the itunes unknown error(3002) while upgrading to iOS 5

I downloaded the iOS 5 .ipsw file from a direct link. You can find the one that matches your device type from here.

After the download completed, I followed standard instructions like hold ‘Option’ while I click the ‘Update’ button in iTunes. Did that and selected the .ipsw,  iTunes says, contacting itunes store and throws this error.

iphone 3002 itunes error
How I fixed this error on my Mac(Snow leopard).

  1. Move the iPhone3xxxxx_Restore.ipsw file to /Users/<yourusername>/Library/iTunes/iPhone Software Updates/
  2. Quit and reopen iTunes
  3. Click on your device and click ‘Update’
  4. Done.

This did the trick.

Posted in Apple | Tagged , , , , | 2 Comments