Mitigating Advertisement Impact on Page Performance

MITIGATING ADVERTISEMENT IMPACT ON PAGE PERFORMANCE by Ismail Elshareef

Friday, October 22, 2010

ISMAIL ELSHAREEFEdmunds, Inc.

@codeish@EdmundsLabs


EDMUNDS, INC.

Online since 1995 Properties:150M+ page views/month Revenue = Ads + Leads


IN 2008 ... A VISION WAS BORN


REDESIGN OBJECTIVES

PERFORMANCE (Page onLoad in < 1.5 sec)

RICHER CONTENT (Flash, video, slicker UXD, ...etc)

BETTER REVENUE (Only positive impact on ad impressions)


OUR DILEMMA

3rd-PARTY CODE PERFORMANCE

UXD


Fast WITHOUT3 rd Party

Fast WITH 3rd Party Code


• Fixed width/height• Easy to late-load• Sandboxed Code

iFrame JavaScriptOR

• Cannot lazy-load• Access to DOM• Richer Content

FORMS OF 3RD-PARTY CODE

• Disadvantage• Advantage


MISSION:CONTROL 3RD-PARTY JS


INITIAL ATTEMPTSapplies to 3rd-Party JavaScript Code ONLY

Override document.write

iFrame’n’Copy


INITIAL ATTEMPTSapplies to 3rd-Party JavaScript Code ONLY

Override document.write

iFrame’n’Copy

WE LEARNED THAT ...

3rd-Party JS Code should be treated as


(I) CAN’T CONTROL IT ALL

(II) SPEED UP WHAT YOU CAN (Your code and lazy-loadable code)

(III) DEFER THE REST (All code that cannot be lazy-loaded)

OUR NEWFOUND CREED


JAVASCRIPT LOADER


3RD-PARTYHANDLING

LOGIC

A

Is this an ad?

Is this a JS ad?

Is this a JS module?NO

YES

Create placeholder

markup

NO

Request JS file after loader is

includedB

Create iframe placeholder

markup

YES

NO

Add JS chunk to Loader loading the iframe after page

load event

Create placeholder

markup

Request JS file after loader is

includedB

Create iFrame placeholder

markupLazy-load iFrame with JS Loader

YES

DONE

DONE


3RD-PARTYJAVASCRIPTHANDLING

LOGIC

B

JS Components?

DONE

NO

load in a hidden DIV

YES

.html?disableallthird

party=yes

.html?disableallads=

yes

.html?disableadnum

ber=[int]

YES

is ad?

NO

NO

YES

YES

NOis ad

position == [int]?

YES

YES

<script> is done loading

move content to placeholder (collapse

when appropriate)

NO NO


HOW DOES THE LOADER WORK?


addModule

execControl

addControl

timerfilesmodulesqueue

PAGESETUP




//<![CDATA[

PAGESETUP = {


files: [],

modules: {},





} else {


}

},


if (!this.merged) {



}






}

item.call();

}, 0);

},


switch(priority) {

case 'high':


break;

case 'low':


break;

case 'normal':

default:


break;

}

}

};

//]]>

</script>

addModule

execControl

addControl


PAGESETUP

!"#$%&'(')&*+,'*-'./010"#$%&',("$#+,&0'2.'3.0&%.4305*$.4305*$6/",7!."#$%&'7




//<![CDATA[

PAGESETUP = {


files: [],

modules: {},





} else {


}

},


if (!this.merged) {



}






}

item.call();

}, 0);

},


switch(priority) {

case 'high':


break;

case 'low':


break;

case 'normal':

default:


break;

}

}

};

//]]>

</script>

addModule

execControl

addControl


PAGESETUP

!"#$%&'(')&*+,'*-'./010"#$%&',("$#+,&0'2.'3.0&%.4305*$.4305*$6/",7!."#$%&'7


- Loads global core libs (with YUI libs)



//<![CDATA[

PAGESETUP = {


files: [],

modules: {},





} else {


}

},


if (!this.merged) {



}






}

item.call();

}, 0);

},


switch(priority) {

case 'high':


break;

case 'low':


break;

case 'normal':

default:


break;

}

}

};

//]]>

</script>

addModule

execControl

addControl


PAGESETUP

!"#$%&'(')&*+,'*-'./010"#$%&',("$#+,&0'2.'3.0&%.4305*$.4305*$6/",7!."#$%&'7


- Loads global core libs (with YUI libs)- Executes JS chunks in priority in 25 ms intv.



//<![CDATA[

PAGESETUP = {


files: [],

modules: {},





} else {


}

},


if (!this.merged) {



}






}

item.call();

}, 0);

},


switch(priority) {

case 'high':


break;

case 'low':


break;

case 'normal':

default:


break;

}

}

};

//]]>

</script>

addModule

execControl

addControl


PAGESETUP

!"#$%&'(')&*+,'*-'./010"#$%&',("$#+,&0'2.'3.0&%.4305*$.4305*$6/",7!."#$%&'7


- Loads global core libs (with YUI libs)- Executes JS chunks in priority in 25 ms intv.- Has debugging features ?jsflag=full



//<![CDATA[

PAGESETUP = {


files: [],

modules: {},





} else {


}

},


if (!this.merged) {



}






}

item.call();

}, 0);

},


switch(priority) {

case 'high':


break;

case 'low':


break;

case 'normal':

default:


break;

}

}

};

//]]>

</script>

addModule

execControl

addControl


PAGESETUP

!"#$%&'(')&*+,'*-'./010"#$%&',("$#+,&0'2.'3.0&%.4305*$.4305*$6/",7!."#$%&'7


- Loads global core libs (with YUI libs)- Executes JS chunks in priority in 25 ms intv.- Has debugging features ?jsflag=full- Ability to exclude 3rd party code


WHY CREATE OUR OWN LOADER?

Run JS chunks in order of priority

Allow a Debug Mode

Decouple from DOM events


3RD-PARTY CODE WITH JS LOADER

Lazy-load in desired priority

iFrames JavaScriptOR

Include after Loader include

<iframe id=”ad1” width=”300” height=”250”>// add JS chunk to loader.........<script src=”loader.js”></script>// execute JS chunk through loader</body>

<div id=”ad2”></div>...............<script src=”loader.js”></script>// Handle JavaScript ads</body>


With Ads

Without Ads

INSIDELINE.COM STATS


ANOTHER VISION WAS BORN


HTTP REQUESTS

0

50

100

150

200

Homepage New Cars Used Cars

Legacy Site Beta Site

152 135 111

44 72 44


PAGESPEED SCORES

0

22.5

45

67.5

90

PageSpeed

Legacy Site Beta Site

8765


INITIAL RESULTS

17%Total Page Views Per Session


(I) CAN’T CONTROL IT ALL

(II) SPEED UP WHAT YOU CAN (Your code and lazy-loadable code)

(III) DEFER THE REST (All code that cannot be lazy-loaded)

AGAIN ... OUR NEWFOUND CREED


WE ARE HIRING!http://www.edmunds.com/help/about/jobs/


THANK YOU!ISMAIL ELSHAREEFEdmunds, Inc.

WE ARE HIRING!http://www.edmunds.com/help/about/jobs/

@codeish@EdmundsLabs

Photo Credits:http://farm3.static.flickr.com/2203/2498445479_064841a97d_o.jpghttp://jcreviews.files.wordpress.com/2010/03/battlestar-galactica.jpghttp://img.wallpaperstock.net:81/crossroads-in-life-wallpapers_10124_1600x1200.jpghttp://upload.wikimedia.org/wikipedia/commons/0/01/Stapler-swingline-red.jpg


Mitigating Advertisement Impact on Page Performance

Technology

Transcript of Mitigating Advertisement Impact on Page Performance