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-sida            Annonsnätverk 1                        Annonsnätverk 2                                             An...
Sidan blockeras  av annonsen         http://www.webpagetest.org/
<script src="...">blockerar rendering(och laddning)
document.write()omöjliggör asynkron laddning
LADDAR SERIELLTBLOCKERAR ALLTANNAT INNEHÅLL
”FRONTEND SPOF”
LÖSNINGAR?
Lägg annonsen långtner i källkoden ochpositionera den till sinrätta plats på sidan
Definiera omdocument.write()
Ladda annonsen i eniframe
FRIENDLY IFRAME
Best Practices forRich Media Ads inAsynchronous AdEnvironments            http://www.iab.net/ajaxrichmedia
FRIENDLY IFRAME
Skapa en iframe med en statisk, cachningsbarhtml-sida från samma domän.Sätt javascriptvariabeln inDapIF=true som ensignal ...
BROWSERPROBLEM
http://www.webpagetest.org/
LADDAR PARALLELLTUTAN ATT BLOCKERAANNAT INNEHÅLL
NYA MÖJLIGHETER
Ladda annonser ivalfri ordning
Händelsestyrdannonsladdning
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/
Annonser och prestanda: Optimera STHLM 2011
Annonser och prestanda: Optimera STHLM 2011
Annonser och prestanda: Optimera STHLM 2011
Annonser och prestanda: Optimera STHLM 2011
Annonser och prestanda: Optimera STHLM 2011
Upcoming SlideShare
Loading in …5
×

Annonser och prestanda: Optimera STHLM 2011

860 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Annonser och prestanda: Optimera STHLM 2011

  1. 1. TOBIAS JÄRLUNDLead developer, Aftonbladet pappaledig@jarlundhttp://jarlund.se/
  2. 2. AFTONBLADET.SEca 6 miljoner unika webbläsare/vecka
  3. 3. AFTONBLADET.SEca 2 miljoner unika webbläsare/vardag
  4. 4. AFTONBLADET.SEca 3800 DOM-element
  5. 5. AFTONBLADET.SEca 20 annonspositioner
  6. 6. AFTONBLADET.SEca 3 miljarder http-anrop/dag
  7. 7. TREDJEPARTS-INNEHÅLL
  8. 8. ANNONSER
  9. 9. <script src="...">document.write()
  10. 10. HTML-sida Annonsnätverk 1 Annonsnätverk 2 Annonsen Resten av sidan http://www.webpagetest.org/
  11. 11. Sidan blockeras av annonsen http://www.webpagetest.org/
  12. 12. <script src="...">blockerar rendering(och laddning)
  13. 13. document.write()omöjliggör asynkron laddning
  14. 14. LADDAR SERIELLTBLOCKERAR ALLTANNAT INNEHÅLL
  15. 15. ”FRONTEND SPOF”
  16. 16. LÖSNINGAR?
  17. 17. Lägg annonsen långtner i källkoden ochpositionera den till sinrätta plats på sidan
  18. 18. Definiera omdocument.write()
  19. 19. Ladda annonsen i eniframe
  20. 20. FRIENDLY IFRAME
  21. 21. Best Practices forRich Media Ads inAsynchronous AdEnvironments http://www.iab.net/ajaxrichmedia
  22. 22. FRIENDLY IFRAME
  23. 23. Skapa en iframe med en statisk, cachningsbarhtml-sida från samma domän.Sätt javascriptvariabeln inDapIF=true som ensignal till annonsen att den laddas i en friendlyiframe.Ladda annonsen som vanligt med en <scriptsrc> i iframen.När annonsen laddat klart, justera storleken påiframen till att matcha annonsens storlek.
  24. 24. BROWSERPROBLEM
  25. 25. http://www.webpagetest.org/
  26. 26. LADDAR PARALLELLTUTAN ATT BLOCKERAANNAT INNEHÅLL
  27. 27. NYA MÖJLIGHETER
  28. 28. Ladda annonser ivalfri ordning
  29. 29. Händelsestyrdannonsladdning
  30. 30. HTML5?DET ÄR JU ÄNDÅ 2011
  31. 31. <iframe srcdocseamless>
  32. 32. RESULTATET?
  33. 33. Besök/vecka +7%Sidor/besök +16%
  34. 34. Senaste nytt +35%
  35. 35. Tid för sidladdning-40%
  36. 36. Tobias Järlund@jarlundhttp://jarlund.se/

×