annonser och prestanda: optimera sthlm 2011
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
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
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/