Mitigating Advertisement Impact on Page Performance

MITIGATING ADVERTISEMENT IMPACT
ON PAGE PERFORMANCE by Ismail Elshareef
Friday, October 22, 2010

ISMAIL
ELSHAREEF
Edmunds, 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 WITHOUT
3rd
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 ATTEMPTS
applies to 3rd
-Party JavaScript Code ONLY
Override document.write
iFrame’n’Copy

INITIAL ATTEMPTS
applies 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
-PARTY
HANDLING
LOGIC
A
Is this an ad?
Is this a JS
ad?
Is this a JS
module?
NO
YES
Create
placeholder
markup
NO
Request JS ﬁle
after loader is
included
B
Create iframe
placeholder
markup
YES
NO
Add JS chunk to
Loader loading the
iframe after page
load event
Create
placeholder
markup
Request JS ﬁle
after loader is
included
B
Create iFrame
placeholder
markup
Lazy-load iFrame
with JS Loader
YES
DONE
DONE

3RD
-PARTY
JAVASCRIPT
HANDLING
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
NO
is 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
timer
ﬁles
modules
queue
PAGESETUP

}
item.call();
}, 0);
},
switch(priority) {
case 'high':
break;
case 'low':
break;
case 'normal':
default:
break;
}
}
};
//]]>
</script>
addModule
execControl
addControl
timer
ﬁles
modules
queue
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
timer
ﬁles
modules
queue
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
timer
ﬁles
modules
queue
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
timer
ﬁles
modules
queue
PAGESETUP
!"#$%&'(')&*+,'*-'./010"#$%&',("$#+,&0'2.'3.0&%.4305*$.4305*$6/",7!."#$%&'7
- 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
timer
ﬁles
modules
queue
PAGESETUP
!"#$%&'(')&*+,'*-'./010"#$%&',("$#+,&0'2.'3.0&%.4305*$.4305*$6/",7!."#$%&'7
- 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
timer
ﬁles
modules
queue
PAGESETUP
!"#$%&'(')&*+,'*-'./010"#$%&',("$#+,&0'2.'3.0&%.4305*$.4305*$6/",7!."#$%&'7
- 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 PageViews 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 ELSHAREEF
Edmunds, Inc.
WE ARE HIRING!
http://www.edmunds.com/help/about/jobs/
@codeish
@EdmundsLabs
Photo Credits:
http://farm3.static.ﬂickr.com/2203/2498445479_064841a97d_o.jpg
http://jcreviews.ﬁles.wordpress.com/2010/03/battlestar-galactica.jpg
http://img.wallpaperstock.net:81/crossroads-in-life-wallpapers_10124_1600x1200.jpg
http://upload.wikimedia.org/wikipedia/commons/0/01/Stapler-swingline-red.jpg

Mitigating Advertisement Impact on Page Performance

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Mitigating Advertisement Impact on Page Performance

Similar to Mitigating Advertisement Impact on Page Performance (20)

Recently uploaded

Recently uploaded (20)

Mitigating Advertisement Impact on Page Performance