annonser och prestanda: optimera sthlm 2011

TOBIAS JÄRLUNDLead developer, Aftonbladet pappaledig@jarlundhttp://jarlund.se/

AFTONBLADET.SEca 6 miljoner unika webbläsare/vecka

AFTONBLADET.SEca 2 miljoner unika webbläsare/vardag

AFTONBLADET.SEca 3800 DOM-element

AFTONBLADET.SEca 20 annonspositioner

AFTONBLADET.SEca 3 miljarder http-anrop/dag

TREDJEPARTS-INNEHÅLL

ANNONSER

<script src="...">

document.write()

HTML-sidaAnnonsnätverk 1

Annonsnätverk 2

Annonsen

Resten av sidan

http://www.webpagetest.org/

Sidan blockerasav annonsen

http://www.webpagetest.org/

<script src="...">blockerar rendering(och laddning)

document.write()omöjliggör asynkron laddning

LADDAR SERIELLT

BLOCKERAR ALLT ANNAT INNEHÅLL

”FRONTEND SPOF”

LÖSNINGAR?

Lägg annonsen långt ner i källkoden och positionera den till sin rätta plats på sidan

Definiera om document.write()

Ladda annonsen i en iframe

FRIENDLY IFRAME

Best Practices for Rich Media Ads in Asynchronous Ad Environments

http://www.iab.net/ajaxrichmedia

FRIENDLY IFRAME

Skapa en iframe med en statisk, cachningsbar html-sida från samma domän.

Sätt javascriptvariabeln inDapIF=true som en signal till annonsen att den laddas i en friendly iframe.

Ladda annonsen som vanligt med en <script src> i iframen.

När annonsen laddat klart, justera storleken på iframen till att matcha annonsens storlek.

BROWSERPROBLEM

http://www.webpagetest.org/

LADDAR PARALLELLT UTAN ATT BLOCKERA ANNAT INNEHÅLL

NYA MÖJLIGHETER

Ladda annonser i valfri ordning

Händelsestyrd annonsladdning

HTML5?DET ÄR JU ÄNDÅ 2011

<iframe srcdocseamless>

RESULTATET?

Besök/vecka +7%Sidor/besök +16%

Senaste nytt +35%

Tid för sidladdning

-40%

Tobias Järlund@jarlundhttp://jarlund.se/