Det här är det första inlägget i en serie om hur vi arbetar med att snabba upp laddningen av annonser på Aftonbladet.

Att Aftonbladet.se inte är världens snabbaste webbsajt att ladda är ingen hemlighet. Ofta läggs hela skulden på annonserna, som tar väldigt lång tid att ladda. Det är en väldigt förenklad bild av verkligheten, det finns många andra delar som bidrar till långa laddningstider. Men att annonserna står för en oproportionerligt stor del av laddningstiden är definitivt sant. Vad det beror på ska jag försöka förklara.

De senaste åren har det gjorts stora framsteg vad gäller prestanda på nätet, framför allt utifrån arbete som gjorts av Yahoo! och Google. Annonsnätverken har tyvärr varit väldigt långsamma på att anamma den trenden och är långt ifrån optimerade för att leverera snabba annonser som har liten effekt på sidladdningen. 

Tekniken som används av annonsnätverken är väldigt gammaldags. Det är två i huvudsak baserat på document.write() och <script src=”…”></script>, ironiskt nog två av de allra största hindren för att få en sajt att ladda snabbt. Dessutom är det ett komplext ekosystem av olika annonsleverantörer som samarbetar när en annons ska visas, och ansvaret (och tiden) för att länka ihop dessa läggs helt och hållet på webbläsaren.

En typisk annonsvisning

Diagrammet nedan visar laddningen av en enkel testsida som innehåller en annons och en bild. Webbläsaren som används är Internet Explorer 7. Sidladdningen är för tydlighets skull gjord från en väldigt långsam uppkoppling och det tar i exemplet ca 2 sekunder för sidan att visas. Av den tiden spenderas ca 1,2 sekunder med att vänta på att annonsen ska laddas.

Det är två annonssystem som samarbetar, och för att inte hänga ut någon i onödan (det här är som sagt en ganska genomsnittlig annonsladdning med två rätt hyfsade annonssystem) nöjer vi oss med att kalla dem för annonsnätverk 1 och 2. Jag har markerat anropen till annonsnätverk 1 med svart och annonsnätverk 2 med blått.

Vi tittar lite närmre på vad som händer:

• Html-dokumentet laddas. Det är anrop 1 i diagrammet. I sidan finns en <script src=”…”></script> som laddar in en annons från annonsnätverk 1.
• Anrop 2 och 3 går till annonsnätverk 1, som först svarar med en redirect-kod till sig själv, och därefter, med hjälp av document.write() skriver ut en ny <script src=”…”></script> i sidan som laddar in annonsen från annonsnätverk 2. 
• Anrop 4-7 går till annonsnätverk 2. Det är en serie av javascript (med  document.write() som skriver ut nya <script src=”…”></script>) och redirecter innan slutligen annonsen är färdig att visas.
• Slutligen laddas det synliga innehållet i anrop 8 och 9. Det är annonsen (i det här fallet en Flash-fil) och den bild som får representera resten av innehållet på sidan.

Mellan att anrop 1 är klart och anrop 8 och 9 går iväg gör webbläsaren alltså ingenting annat än att vänta på att annonssystemen ska välja ut vilken annons som ska visas.

Olika annonssystem har lite olika varianter på hur annonserna laddas, men i grunden fungerar de ungefär på samma sätt.

Varför fungerar det så?

Dagens webbläsare är fantastiskt bra på att göra saker parallellt, men med den teknik som används för annonsvisningar blockerar visningen av allt som kommer efter annonsen till annonskoden laddat klart. I vissa webbläsare (som IE7 i exemplet ovan) blockeras även laddningen av resten av innehållet. Det är vad prestandagurun Steve Souders refererar till som en “Frontend single point of failure“.

Det finns dock ett par goda anledningar till att det fungerar på det här sättet, framför genom dess flexibilitet och enkelhet. Enkelhet på det sätt att det  är ett flöde som är enkelt att förstå, och inte påverkas särskilt mycket av andra saker på sidan. Flexibilitet genom att det inte sätter några begränsningar på storlek och funktionalitet i annonserna, och gör det enkelt för vitt skilda annonssystem att samarbeta. 

Kan man göra något åt det?

Trots allt fokus på webbprestanda de senaste åren finns det väldigt lite sagt och skrivet kring hur man optimerar annonser. Det beror antagligen på att det är något av det mest komplicerade man kan ge sig på att optimera, eftersom så mycket av annonsladdningen ligger helt utanför ens egen kontroll.

När man försöker optimera annonsladdningen är det också väldigt lätt att gå bort sig. Annonserna är en viktig inkomstkälla, och det ligger förstås i vårt intresse att kunna erbjuda så effektiva och flexibla annonslösningar som möjligt.

Efter att ha provat alla möjliga varianter på att effektivisera annonsladdning har vi hittat en modell som vi tror ger den bästa avvägningen mellan snabb sidladdning och effektiva och flexibla annonser. För att lyckas med det utnyttjar vi något som i normala fall är dåligt både för prestanda och flexibilitet: Iframes.

Mer om det i del 2…