High performance websites with ads [aftonbladet.se]

3 minute read Comments

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.

Web performance optimization, iframes vs. JavaScript

“The server side is not the bottleneck” and, according to Tobias, optimization should rather be performed on the client side.

There are plenty of solutions available (iframes and/or JavaScript based) and AftonBladet decided, after evaluating the pros and cons of some of them, to go for friendly iframes that have the following “properties” (but not only):

  • may load in parallel
  • possible to late-load
  • full access to the DOM
  • support all types of ads

The setup

  1. create an iframe to a small static cacheable HTML page from the same domain
  2. inside the iframe, use the JavaScript variable inDapIF = true to tell the ad it is loaded inside a friendly iframe
  3. inside the iframe, create a script element with the ad url as the source (load the ad just like a normal JavaScript ad)
  4. 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.

Tweaks

  • 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)

The future

  • <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

Results

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…

Notes Web iframe JavaScript

Comments