annonser och prestanda: optimera sthlm 2011

41
TOBIAS JÄRLUND Lead developer, Aftonbladet pappaledig @jarlund http://jarlund.se/

Upload: tobias-jaerlund

Post on 24-Jun-2015

597 views

Category:

Technology


6 download

DESCRIPTION

(Swedish) Presentation om hur Aftonbladet optimerat annonsladdningen från Optimera STHLM 2011. Presentationen är inte gjord för att stå för sig själv, men film lär dyka upp på Youtube inom kort.

TRANSCRIPT

Page 1: Annonser och prestanda: Optimera STHLM 2011

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

Page 2: Annonser och prestanda: Optimera STHLM 2011

AFTONBLADET.SEca 6 miljoner unika webbläsare/vecka

Page 3: Annonser och prestanda: Optimera STHLM 2011

AFTONBLADET.SEca 2 miljoner unika webbläsare/vardag

Page 4: Annonser och prestanda: Optimera STHLM 2011

AFTONBLADET.SEca 3800 DOM-element

Page 5: Annonser och prestanda: Optimera STHLM 2011

AFTONBLADET.SEca 20 annonspositioner

Page 6: Annonser och prestanda: Optimera STHLM 2011

AFTONBLADET.SEca 3 miljarder http-anrop/dag

Page 7: Annonser och prestanda: Optimera STHLM 2011

TREDJEPARTS-INNEHÅLL

Page 8: Annonser och prestanda: Optimera STHLM 2011

ANNONSER

Page 9: Annonser och prestanda: Optimera STHLM 2011

<script src="...">

document.write()

Page 10: Annonser och prestanda: Optimera STHLM 2011

HTML-sidaAnnonsnätverk 1

Annonsnätverk 2

Annonsen

Resten av sidan

http://www.webpagetest.org/

Page 11: Annonser och prestanda: Optimera STHLM 2011

Sidan blockerasav annonsen

http://www.webpagetest.org/

Page 12: Annonser och prestanda: Optimera STHLM 2011

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

Page 13: Annonser och prestanda: Optimera STHLM 2011

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

Page 14: Annonser och prestanda: Optimera STHLM 2011

LADDAR SERIELLT

BLOCKERAR ALLT ANNAT INNEHÅLL

Page 15: Annonser och prestanda: Optimera STHLM 2011

”FRONTEND SPOF”

Page 16: Annonser och prestanda: Optimera STHLM 2011

LÖSNINGAR?

Page 17: Annonser och prestanda: Optimera STHLM 2011

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

Page 18: Annonser och prestanda: Optimera STHLM 2011

Definiera om document.write()

Page 19: Annonser och prestanda: Optimera STHLM 2011

Ladda annonsen i en iframe

Page 20: Annonser och prestanda: Optimera STHLM 2011
Page 21: Annonser och prestanda: Optimera STHLM 2011
Page 22: Annonser och prestanda: Optimera STHLM 2011
Page 23: Annonser och prestanda: Optimera STHLM 2011
Page 24: Annonser och prestanda: Optimera STHLM 2011

FRIENDLY IFRAME

Page 25: Annonser och prestanda: Optimera STHLM 2011

Best Practices for Rich Media Ads in Asynchronous Ad Environments

http://www.iab.net/ajaxrichmedia

Page 26: Annonser och prestanda: Optimera STHLM 2011

FRIENDLY IFRAME

Page 27: Annonser och prestanda: Optimera STHLM 2011

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.

Page 28: Annonser och prestanda: Optimera STHLM 2011

BROWSERPROBLEM

Page 29: Annonser och prestanda: Optimera STHLM 2011

http://www.webpagetest.org/

Page 30: Annonser och prestanda: Optimera STHLM 2011

LADDAR PARALLELLT UTAN ATT BLOCKERA ANNAT INNEHÅLL

Page 31: Annonser och prestanda: Optimera STHLM 2011

NYA MÖJLIGHETER

Page 32: Annonser och prestanda: Optimera STHLM 2011

Ladda annonser i valfri ordning

Page 33: Annonser och prestanda: Optimera STHLM 2011

Händelsestyrd annonsladdning

Page 34: Annonser och prestanda: Optimera STHLM 2011
Page 35: Annonser och prestanda: Optimera STHLM 2011

HTML5?DET ÄR JU ÄNDÅ 2011

Page 36: Annonser och prestanda: Optimera STHLM 2011

<iframe srcdocseamless>

Page 37: Annonser och prestanda: Optimera STHLM 2011

RESULTATET?

Page 38: Annonser och prestanda: Optimera STHLM 2011

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

Page 39: Annonser och prestanda: Optimera STHLM 2011

Senaste nytt +35%

Page 40: Annonser och prestanda: Optimera STHLM 2011

Tid för sidladdning

-40%

Page 41: Annonser och prestanda: Optimera STHLM 2011

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