The hidden Impact of those extra little features
I was indexing Swedish digital agency Avantime’s new website for The Beantin Index. Indexing sites is always a great exercise. Amongst other things, it gives me the chance to brush-up on and evaluate various methods, techniques and ideas.
Of the sites I’ve reviewed, almost all have an eyebrow raising moment. Avantime was no exception. A little Flickr feature got my web-sense tingling.
It’s a responsive site. Great you might think. Responsive is the new black. It’s 2012 and everyone has to have a responsive web design.
That said, like many responsive implementations, it’s not really optimised from a UX or a performance viewpoint. It also features a big sliding banner.
Flickr
One thing I noticed was that with every pageview Avantime’s website was firing off 20 requests to Flickr for images. At first, I couldn’t for the life of me work out where these pictures were appearing, but I could see they were always loaded.
They were even loaded when viewing the page on your mobile. In it’s most basic form, a responsive site does not care that you are viewing from a mobile device and downloads lots and lots of stuff you don’t need and don’t use when viewing via your mobile.
Bingo!
Eventually I found where the images where.
There’s a little flickr icon.
Yes, that one, there to the top right in the “icon bar”. The images are hiding behind there.
(Unless you are viewing the site on a mobile, in which case the responsive design will have hidden the icon bar from you.
Click an icon to reveal addtional content
If you hover over the icon, it turns blue – as do the other icons in the “icon bar”. Clicking on one of these icons causes a previously hidden part of the page to appear and reveal some extra content, such as follow us on Twitter or like us on Facebook.
The hidden impact
What the Flickr icons reveals is not only a link to Avantime’s Flickr profile, but also shows a preview of the latest 20 images in their photo stream.
Not only that, but all 20 thumbnails are scaled via HTML. So every 159×240 image downloaded is shown in the browser as just 20×30. This basically makes the Flickr images are using up around 4900% extra bandwidth than they need to.
20 requests for Flickr images
My experienced guess is that a tiny minority of visitors to Avantime’s website (if any) are going to click on the Flickr icon and see the thumbnails.
There isn’t any indication that the icons “open up” more content – their functionality is only revealed to the user via investigation. The only way to find out, is to click. There is no signalling of what might lie in store.
It would be interesting to do some usability testing on them – my guess is people will expect the icons to lead directly to the services indicated by the icon (as is normally the case).
I also noticed that there is no event tracking on the icons. Avantime have no idea how many people have clicked on their icons to reveal the hidden content. So evaluating their use isn’t going to be easy – they aren’t gathering any data.
In summary…
So let’s round up… the Flickr thumbnail feature:
- Causes 20 extra requests during each page load
- Downloads an extra 300kb as part of an uncached page load (when 6kb would have been enough!)
- Adds around an extra second to the total page load time (potentially much more via mobile networks)
- Will not be used by the vast majority of visitors
Careful consideration
Think carefully about each and every feature you include on your website. How does it help you and your visitors achieve your goals?
Something might be visually small, but it might have a larger performance footprint.
Make sure you test your website. Try to include some way of evaluating or tracking the use of features, such as Google Analytics event tracking.
The hidden Impact of those extra little features beant.in/OmWXhN #ux #usability #pagespeed
— James Royal-Lawson (@beantin) October 10, 2012
Update: 20121011
Avantime were quick to respond via Twitter and it wasn’t too long before a “Flickrfix” was deployed which means the Flickr images are only requested now when actually displayed.
@beantin We’ve just made some adjustments to address the points which you raised. Thanks again for your feedback. Have a great day!
— Avantime Group (@AvantimeGroup) October 10, 2012