90% page shrink, faster LJ-Dreamwidth mappings with AJAX
(Updated 2010-05-09 19:40 UTC: add two introductory paragraphs and before/after screenshots)
Web site and page load speeds have been in the news a lot lately, thanks mainly to Google’s announcement that they would be taking load speed into account as one of the hundreds of factors determining the PageRank which drives their search results. I find most of the complaints to be misguided, particularly in light of existing research showing how quick genuine visitors are to abandon a slow-loading site; surely any site more concerned with its own PageRank than with the satisfaction of genuine visitors is exactly the sort which should be excluded from the index entirely!
Akamai — who do have an obvious vested interest here, of course — claim 40% of online shoppers wait just three seconds for a site to load. Good news for three of the four UK political parties monitored by SamKnows whose sites all loaded in under 2 seconds — the fourth took 6.42 seconds, more than three times as long as the next slowest. They also turned in their worst electoral performance in decades in last week’s elections and look set to be replaced by a coalition of two much faster loading parties, although I do suspect and hope this is unrelated to their website performance.
I found myself doing a little design work on a friend’s project website. The structure immediately seemed rather sub-optimal; a quick visit to the trusty WebSiteOptimization Analyze tool confirmed this – the simple static front page alone weighed in at a rather scary 1,175,826 bytes for the 22 separate objects, within two seconds of a downright ridiculous four minute load time on a 56k dialup connection.
I could see the two main culprits straight away: first, the images were all in PNG format rather than JPEG, despite being largely photographs; secondly, the page was loading almost 200kb of Javascript files, when the only Javascript used was to display a simple dropdown menu.
Fixing these brought the page down from 1.1Mb to 96kb — a whopping 90% saving. One image also looked a little out of place on the page; having already reduced it from a 347,067 byte PNG to a 15,733 byte JPEG, my friend asked if we could remove that image entirely and see how the result looked.
I also re-built the menu using pure CSS, instead of the series of inline onmouseover invocations of a rather complex Javascript function for showing and hiding HTML DIVs – much cleaner markup, with the submenu items as children within a single HTML hierarchy rather than appearing as isolated DIVs, and no Javascript reliance, except on Internet Explorer, which gets a 2,893 byte file which adds :hover support using Javascript.
Loading the original and simplified pages in Safari – over a fast ADSL connection, with an empty cache – gave timings of 5.26 seconds to open the 18 objects in the original 1.128 Mb monster, versus 945 milliseconds for the 8 object, 79.2 kb replacement. Apart from removing one image, all the changes were very subtle visually, but the time and bandwidth savings are enormous; according to the Analyze tool, on 56k dialup this would be 22 seconds rather than 239!
(Before and after snapshots taken with Browsershots)
The updated version should be live in the next few days, subject to a few other changes I’ve been asked to make. In the mean time, I took a look at a PHP tool my friend tobyaw wrote last year to list LiveJournal friends for whom there is an eponymous Dreamwidth user. His original tool worked fine, but slowly, checking every user sequentially on the server with no caching at all. I restructured this to check for each user match in parallel using AJAX, with the results being cached per username both on the client side and on the server side. (A typical use might involve checking the friends list of several of your friends, who will normally have many friends in common, giving a good cache hit rate.)
Toby had already open-sourced the project on GitHub, as well as making his version publicly available — once he returns from Frogmarch I will feed the changed code back to him, but in the mean time mine is online here: map LiveJournal usernames to Dreamwidth
