This afternoon I ran a simple test.
On my Android phone I used the browser to go to each carriers home page. Below are the results for each web site. What’s amazing to me is that only one carrier actually detected that I was using a mobile browser to access the site.
T-Mobile is the worst offender downloading almost a meg and a half of content.
Verizon gets it. Put a simple page in front of the user and do it really quickly.
In our ongoing focus on Mobile Performance we’re taking a look at what’s going on inside Androids browser as it processes Extreme Mobile MSN -
To see the Performance screen shots click on this link
Here’s the detail behind the screens…
1. The 'Loading' screen stays up WAY TOO LONG before any
real content appears. Big red flag. Need to take a look at
all the work being done in the HEAD section and cut down
some of the pre-loading.
2. SCREENSHOT 2 shows clearly that the CONTENT SECTIONS are being presented by HTML but not being 'filled out' with anything at first. It's relying on JavaScript to come back and 'fill out' the sections.Might want to rethink that or find a way to speed that up.
3. SCREENSHOT 3 - Some of the multiple VIDEO SECTIONS are 'already running' before ALL of them have even been 'laid out'. This puts a huge burden on the processor and the HTML rendering engine. Might want to just make sure all the VIDEO frames have loaded before letting them 'kick off' and choke the processor before the entire page is even laid out.
4. SCREENSHOT 4 - 40 seconds went by with the page mostly 'ready to go' from SCREENSHOT 3 with the only difference being a VIDEO FRAME in the 'Lifestyles' section finally got the content it needed to cause the page to finish. Might want to take a close look at the code
in that 'Lifestyles' section and see if that can be speeded up since
it seems to be dragging the whole page down.
Summary:
There’s lots that can be done here to speed up the customer experience. Sometimes a pictures says a thousand words or in this case it could accelerate ad revenue and keep your customers coming back to your web site.
Screen snapshots…
One of the toughest things to figure out on Mobile is when various elements of the web page actually load. Unlike their desktop counterparts Mobile browsers do things a little differently. Take Androids browser for example, it waits until the entire page is assembled before it displays it.
So with that in mind we set out to reveal exactly where the Above the Fold line is – and how it relates the to entire page.
Here’s a link and a picture that shows you what’s going on. This is Yahoo’s Mobile Home page. This is a real time snapshot and shows you the whole page which is 320*2743 pixels (the entire page is shown in the link above) We’ve added a pixel ruler so you can now clearly see where the “fold” is (right at the 533 pixel point). Yahoo could dramatically improve their performance by simply sending just enough content for the fold. Sending everything the way they do just takes longer to assemble and display.
We define the “Fold” as the bottom of the device display which in the above case is right at 533 pixels. It will differ depending upon the device and orientation.
