High performance websites with ads [aftonbladet.se]
Today was the first day of the disruptive code conference in Stockholm and I’m taking notes, a lot of notes. I unfortunately don’t have time to blog live from the event - too busy listening to some really good talks - so I am taking another approach: for the next couple of days, I’ll write about the sessions I have been attending.
Let’s get started then with notes I took during a session ran by Tobias Järlund CTO at AftonBladet, the biggest Swedish newspaper (so he claims at least) : high performance websites, with ads (don’t let third parties make you slow) which was based on AftonBladet’s experience and experiments on website, embedding third party ads, optimization.
Facts and figures
www.aftonbladet.se lately (due to the elections in Sweden) had all time high traffic with 2.4 millions visitors a day on its front page which, as it has always been, is really, really, … really long and contains no less than 20 advertising spots.
“The server side is not the bottleneck” and, according to Tobias, optimization should rather be performed on the client side.
- may load in parallel
- possible to late-load
- full access to the DOM
- support all types of ads
- create an iframe to a small static cacheable HTML page from the same domain
- when the ad has finished loading, resize the iframe to fit the dimensions of the ad
Even if “using iframes is the best option today” to solve that kind of problems, be careful when implementing such solutions since rendering iframes is quite an expensive operation.
- don’t load all ads at once, use queues or delays
- set default sizes (1 by 1 pixel for instance) and then resize
- try not to block the “onload” event (the page loading speed is now taken into consideration by Google for ranking)
- <frag> tag (Google Chrome) to mark a piece of code that should be loaded in parallel, not blocking (not implemented)
- postMessage(…) implemented in all modern browsers for messaging between iframes and the main page
It’s certainly pretty cool when you get the chance to try out solutions and experiment different techniques but it’s even better when you measure the impact of the changes you make on your users’ experience!
By implementing friendly iframes Aftonbladet drastically improved the loading speed of the front page (editorial content loaded at the same time or even before the ads) and readers liked it…
- visits per week up 7%
- page views per visit up 16%
- “latest news” section (which used to show up really late in the rendering process) CTR (click through rate) up 35%
- average page load time down 30%
… and the most remarkable thing being that all those changes have not had any impact on the ads CTR…