I am not a front-end kinda guy, but these days my latest obsession is to test and improve web page loading times. With this blogpost, I intend to show with examples of some selected websites and what are they doing right and what *desperately* needs to be improved. As I learn more about this I will be posting more in-depth posts on these issues.
Why does it matter?
These days almost everyone is on high-speed ‘broadband’ connections so the sites should load fast. Right? No! With faster connectivity, users get more impatient and expect websites to load faster.
E-Commerce websites have done studies which proove faster sites results in more sales. Google has also been advocating to webmasters to improve their pageload times. Now pageload is a signal for ranking in Google, abit a minor signal, but it still matters.
Analysis of pageload time
Some test results :-
The Sajal Kayan award for excellence in web development goes to FOX News
Test conditions :-
- First View is simulated to act as the first time the visitor visits the website, the Repeat view is when the user visits the website again after a while, probably closes and reopens the browser in between.
- All tests were done on Internet Explorer 8. Yes, I know you hate IE, I hate it more than you! But since the majority of the web uses this browser we test on IE8. Also IE8 performs significantly better than its predecessors. Some of the sites tested may take upto 2x the time to load on IE7 due to lower parallel downloads per host.
- The tests were done from a test machine in Dulles, VA Provided by AOL set to work at DSL speeds(1500 Kbps down, 384 Kbps up and 50ms latency)
- The timings above show when the window.onload event was triggered. It is possible that the page was usable well before that. Very rarely is also possible that for the page needs to do more stuff after onload in order to be usable.
- Each test was repeated 5 times and its average was taken
- I have tried to be as fair as possible in selection of pages for the test. I didnt use pages filled with videos/many images, etc.
- Tests were conducted during this weekend(July 3rd and 4th) so traffic to those site would be much lower than usual.
You can see from the table above, that except for Google News, Yahoo! News and (to some extent) The New York Times and BBC, all other websites have not yet given a minute of thought on Frontend performance of their web pages. This needs to change. Even one of the biggest evangalist of Frontend performance Google, forgot to set correct cache control headers for images on Google News.
I place more emphasis on individual story pages since those are the pages which a first time user would encounter first – coming via search, links, tweets etc…
Now, when browsing un-optimized sites from Thailand, the load times increased exponentially due to a much higher latency and occasional packet loss.
Finally! compare each of the above link visually in IE7 in video mode. WaPo single story is missing due to a bug. For each URL, 3 first-view tests will be run from ‘Dulles, VA – IE7′ and the median run will be used for comparison.
How to improve?
Essential reading :-
- Yahoo! : Best Practices for Speeding Up Your Web Site
- Google : Web Performance Best Practices
- This awesome list of tools
An optimizers goal should not be simply to get the total load time low. Thats important, but more important is the time in which the website kinda becomes usable. This for a news publishing site is being able to display the title and body of the story. The user can start reading the content while other parts of the website loads. This for Thaindian News story page hovers around 0.9 to 1.5 seconds!