Optimera STHLM 2011 - Tobias Järlund, Aftonbladet

696 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
696
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Optimera STHLM 2011 - Tobias Järlund, Aftonbladet

  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. http://www.webpagetest.org/
  11. 11. http://www.webpagetest.org/
  12. 12. HTML-sida http://www.webpagetest.org/
  13. 13. HTML-sida Annonsnätverk 1 http://www.webpagetest.org/
  14. 14. HTML-sida Annonsnätverk 1 Annonsnätverk 2 http://www.webpagetest.org/
  15. 15. HTML-sida Annonsnätverk 1 Annonsnätverk 2 Annonsen http://www.webpagetest.org/
  16. 16. HTML-sida Annonsnätverk 1 Annonsnätverk 2 Annonsen Resten av sidan http://www.webpagetest.org/
  17. 17. Sidan blockeras av annonsen http://www.webpagetest.org/
  18. 18. <script src="...">blockerar rendering(och laddning)
  19. 19. document.write()omöjliggör asynkron laddning
  20. 20. LADDAR SERIELLTBLOCKERAR ALLTANNAT INNEHÅLL
  21. 21. ”FRONTEND SPOF”
  22. 22. LÖSNINGAR?
  23. 23. Lägg annonsen långtner i källkoden ochpositionera den till sinrätta plats på sidan
  24. 24. Definiera omdocument.write()
  25. 25. Ladda annonsen i eniframe
  26. 26. FRIENDLY IFRAME
  27. 27. Best Practices forRich Media Ads inAsynchronous AdEnvironments http://www.iab.net/ajaxrichmedia
  28. 28. FRIENDLY IFRAME
  29. 29. 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.
  30. 30. BROWSERPROBLEM
  31. 31. http://www.webpagetest.org/
  32. 32. http://www.webpagetest.org/
  33. 33. LADDAR PARALLELLTUTAN ATT BLOCKERAANNAT INNEHÅLL
  34. 34. NYA MÖJLIGHETER
  35. 35. Ladda annonser ivalfri ordning
  36. 36. Händelsestyrdannonsladdning
  37. 37. HTML5?DET ÄR JU ÄNDÅ 2011
  38. 38. <iframe srcdocseamless>
  39. 39. RESUTATET?
  40. 40. Besök/vecka +7%Sidor/besök +16%
  41. 41. Senaste nytt +35%
  42. 42. Tid för sidladdning-40%
  43. 43. Tobias Järlund@jarlundhttp://jarlund.se/

×