(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.

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

2. AFTONBLADET.SE
ca 6 miljoner unika webbläsare/vecka

3. AFTONBLADET.SE
ca 2 miljoner unika webbläsare/vardag

4. AFTONBLADET.SE
ca 3800 DOM-element

5. AFTONBLADET.SE
ca 20 annonspositioner

6. AFTONBLADET.SE
ca 3 miljarder http-anrop/dag

7. TREDJEPARTS-
INNEHÅLL

8. ANNONSER

9. <script src="...">
document.write()

10. HTML-sida
Annonsnätverk 1
Annonsnätverk 2
Annonsen
Resten av sidan
http://www.webpagetest.org/

11. Sidan blockeras
av annonsen
http://www.webpagetest.org/

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

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

14. LADDAR SERIELLT
BLOCKERAR ALLT
ANNAT INNEHÅLL

15. ”FRONTEND SPOF”

16. LÖSNINGAR?

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

18. Definiera om
document.write()

19. Ladda annonsen i en
iframe

24. FRIENDLY IFRAME

25. Best Practices for
Rich Media Ads in
Asynchronous Ad
Environments
http://www.iab.net/ajaxrichmedia

26. FRIENDLY IFRAME

27. 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.

28. BROWSERPROBLEM

29. http://www.webpagetest.org/

30. LADDAR PARALLELLT
UTAN ATT BLOCKERA
ANNAT INNEHÅLL

31. NYA MÖJLIGHETER

32. Ladda annonser i
valfri ordning

33. Händelsestyrd
annonsladdning

35. HTML5?
DET ÄR JU ÄNDÅ 2011

36. <iframe srcdoc
seamless>

37. RESULTATET?

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

39. Senaste nytt +35%

40. Tid för sidladdning
-40%

41. Tobias Järlund
@jarlund
http://jarlund.se/