optimera sthlm 2011 - tobias järlund, aftonbladet
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
http://www.webpagetest.org/
HTML-sidaAnnonsnätverk 1
Annonsnätverk 2
http://www.webpagetest.org/
HTML-sidaAnnonsnätverk 1
Annonsnätverk 2
Annonsen
http://www.webpagetest.org/
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>
RESUTATET?
Besök/vecka +7%Sidor/besök +16%
Senaste nytt +35%
Tid för sidladdning
-40%
Tobias Järlund@jarlundhttp://jarlund.se/