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/


Top Related