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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Mitigating Advertisement Impact on Page Performance

Similaire à Mitigating Advertisement Impact on Page Performance (20)

Dernier

Dernier (20)

Mitigating Advertisement Impact on Page Performance