Hela titeln på den här, för mig mycket praktiska föreläsningen är High performance web sites, with ads: Don’t let third parties make you slow – Tobias Järlund (från Aftonbladet.se) berättar om hur annonser kan sega ner din sajt fullständigt och om hur vi kan undvika det. Han berättar om ett optimeringsprojekt som Aftonbladet.se har genomfört under hans ledning.
Om man använder annonser på sin sajt så är det högst troligen en viktig del av din sajts affärsidé och det är viktigt att inte bara optimera innehållet när man optimerar hastigheten på sajten.
Iframes är superbra på många sätt – de laddas högst troligen parallellt utan att störa laddningen av sajtens innehåll. Du kan till och med försena laddningen av dem. Men de har en fixerad bredd och höjd och ger ingen access till sidans DOM.
Javascript däremot, ger access till sidans DOM och man kan använda många olika format. Men. De blockerar renderingen av sidan som kan komma att laddas långsamt. Det går inte att vänta in sidans laddning och lägga upp annonserna sist. Att annonserna ger full access till sidans DOM gör också att annonserna kan störa ut övrigt innehåll på sajten.
Det normala sättet att skriva ut annonskod till en sida är att ladda ett javascript (troligen från en annan sajt) som i sin tur laddar in ett annat javascript som i sin tur egentligen bara skriver ut en kod som <a href=”http://www….”><img src=”http://www….” /></a> och ofta (som på Aftonbladet.se) åtskilliga tiotals gånger.
Om man hämtar in innehåll från mängder av olika annonsnätverk så innebär detta att sajten gör ett gäng anrop till olika servrar innan sidan laddas.
Det gör förstås sajten långsammare än vad den skulle bli utan annonser (och häri ligger mitt intresse av den här föreläsningen).
Tobias visar skärmdumpar från hur www.webpagetest.org som visar hur en sida från aftonbladet.se laddas. Det tar en hel sekund per annons och förstå då hur det går när sidan innehåller 15 annonser… Och längst tid tar det i IE7 som fryser helt och hållet för varje javascript som ska tolkas.
Enligt de flesta så använder vi det bästa sättet, men Tobias Järlund har hittat inte ett utan 16 alternativa sätt att visa annonser. 14 av dessa fungerar inte alls av olika anledningar, som att de inte stödjer alla olika annonsformat eller för att de enbart försenar leveransen av annonserna till sajten (vilket gör att klickfrekvensen eller annonsvisningsfrekvensen går ner).
Återstår två då… En av dem var hyfsat OK men fungerade inte på Aftonbladet.se.
Den enda tekniken som återstod var Friendly iFrame-tekniken. Best practices for Rich Media Ads in Asynchronous AD Environments en rekommendation utvecklad av IAB i USA. www.iab.net/ajaxrichmedia
Den här tekniken kombinerar fördelarna med iFrames med fördelarna med Javascript utan någon av nackdelarna.
Så här går det till:
Tobias visar sedan hur det med den gamla tekniken tar 5 sekunder mindre att ladda hela sidan men hur man upplever att det ”bara” tar 9 sekunder att ladda hela sidan med Friendly iFrame-tekniken jämfört med 54 sekunder med den gamla tekniken. Att det i verkligheten tar hela 50 sekunder är av mindre intresse eftersom man faktiskt ser innehållet på sidan innan den laddat klart.
”Using iframes is the best option today” – det är det bästa alternativet även om det är långt ifrån perfekt.
Ladda inte alla annonser samtidigt. Köa anropen eller senarelägg dem (och se till att annonserna innan folden visas först, de längre ner på sidan kan gott vänta).
Använd fördefinierade storlekar så långt det går så att man slipper vara med om att sidan hoppar omkring och därmed ibland tvingar webbläsaren att ladda om sidan.
Försök att låta bli att blockera onload (vilket gör att Google upplever att sidan har laddats när onload är klart).
<frag> är html5-taggen som alla drömmer om. En tagg som visar att här pågår parallell laddning och att webbläsaren inte ska vänta på att elementet är klart. Den ingår dock inte i html5. Det gör däremot postMessage(…) vilket gör det möjligt för externa javascript-anrop att hämta och lämna data på sidan. ASWIFT är en teknik som AdSense-teamet använder och där man skapar en tom iFrame och använder document.write för att skriva inuti denna. Det är svårt att använda för nätverk som inte har allt innehåll på sina egna servrar… Alla tre är dock möjliga vägar.
Men det viktigaste. Testa och mät! Sluta aldrig testa och mäta.
Resultatet av Aftonbladets förändring ledde till 7 % fler besök per vecka och 16 % fler sidladdningar. 35 % fler användare såg annonserna till höger på sajten som laddades efter innehållet och den genomsnittliga sidladdningstiden minskade med 30 %. Allt det där är pengar i Aftonbladets ficka, och något av inspireras av för alla som har sajter som är beroende av annonsvisningar.
Genomklickningsfrekvensen har inte heller minskat på sajten vilket alla experter sa att den skulle, och Tobias har ingen som helst aning om varför, men glad ändå förstås 🙂