How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps

HOW EDMUNDS GOT IN THE FAST LANE
80% Reduction in Page Load Time in Simple Steps

by Ismail Elshareef

Sunday, January 16, 2011

The Results

onLoad: 8.4s ➙ 1.9s (≈ 80% reduction)

Page Views: 20%
Bounce Rate: 4%
Ad Impression Variance: 3%


Edmunds, Inc.

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


Memory Lane


Edmunds.com Legacy Site


Meanwhile ...

“95% of Performance
is Frontend” - Steve Souders

“Performance Matters!” - Organizations
+100ms in response time ➡ -1% in sales

-30% in ﬁle size ➡ +30% in requests


The Real Picture!


Site Condition

- Too Many Requests (150+)

- Many Blocking Requests (20+)

- Perceived Slowness (onLoad in 8.4s)

- No Caching

- 1 Domains Serves All Requests

- External Factors (ads, videos, ..etc)

- Dependency on DOM Events


We Started Tinkering ...


Quick Wins: CACHING!

- Solution
Added Expires Header + Removed Etags

- Result:
34% reduction in bandwidth
= 34TB annual savings
= FREE video streaming for 2 years
= Faster pages when cache is primed


... but Legacy was complicated.


2008: A Vision Was Born


Redesign Objectives

PERFORMANCE
(Faster Page Loads .. onLoad =< 1.5s)

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

BETTER REVENUE
(Positive impact on ad impressions)


The Mindset

FASTER PAGES

POSITIVE USER EXPERIENCE

HIGHER REVENUE


The Challenge

HTTP Requests Page Performance

User

Experience


Types of HTTP Requests

1) Our Own Requests
(ﬁles served from our own domains)

2) 3rd-party Requests
(ﬁles served from other domains)


3rd-party Requests

Exist in Two Forms

JavaScript iFrame

Cons: Cons:
- Access to DOM - Fixed width/height
- document.write
Pros:
Pros: - Easy to lazy-load
- Richer Content - Sandboxed Code


3rd-party Requests

Roles on Our Sites

JavaScript iFrame

Analytics
A/B Testing
Ads
Video Widgets
Monitoring
Surveys


Our Challenge

3rd-party Requests
HTTP Requests Page Performance

User

Experience


3rd-party iFrame 3rd-party JavaScript

Agreeable Problematic


Mission: Control 3rd

Attempt #1:
Override document.write()function

Example:
var buffer = [];
document.write = function(st) {
buffer.push(st);
}
// when a speciﬁc event occurs ...
var s = buffer.join(‘’);
document.getElementById(‘destination’).innerHTML = s;

Problem:
Didn’t work with daisy-chained document.write calls


Mission: Control 3rd

Attempt #2:
Load in iFrame and Copy on Load (iFrame’n’Copy)

Example:
var jsAd = “http://ad.doubleclick.net/adj/....”;
iFrameObj.src = “http://www.edmunds.com/adSub.html?”+jsAd;

// Option 1: listen to iFrame onLoad event
// Option 2: iFrame page calls parent when done

Problem:
Buggy in IE 7 + Hard to Maintain


Our New Found Creed

 You Can Not Control Everything

Edmunds vs. 3rd-party Requests

%"#$

%"#$
&'()*'+,$-./).+0+$
12'345206$-./).+0+$
!"#$

!"#$

New Sites Old Sites

&'()*'+,$-./).+0+$
12'345206$-./).+0+$

Our New Found Creed

 Make What You Control FAST

JavaScript Loader


How Does it Work?


How Does it Work?
❶ Quick page is
served to user


How Does it Work?
2 1
❶ Quick page is
3
served to user

4

❷ Page components
register themselves
with the page
5

6

7


How Does it Work?
2 1
❶ Quick page is
3
served to user

4

❷ Page components
register themselves
with the page
5

❸ Registered
components rendered 6

in parallel 7


Component 1
Component 2 Component 3

Registration
Component 4

Component 5

Process

Component 6
I need YUI’s Carousel module. Here’s my
code, render me right away!

I need ﬂash.js and here’s my code. I need to
be rendered right away
Component 7

I need YUI’s Carousel module and here’s
my code. I am below the fold so I can wait Component 8


Component 1

Registration
Component 4

Component 5

Process

Declare Dependencies
Component 6

Component 7



Component 1

Registration
Component 4

Component 5

Process

Component 6

Submit Functionality

Component 7



Component 1

Registration
Component 4

Component 5

Process

Component 6

Submit Functionality

Component 7

Set Priority



Registration
Process

PAGESETUP.files.push('file1.js');

Submit functionality
PAGESETUP.addControl(function() {
// ....
// Anything from rendering a component to making an AJAX call. All goes here.
// ...
}, 'high');
Set Priority


Process
function load() {
// .....
// ..... Dependencies
var parent = arguments.callee;
if (unique_files.length) {
var file = unique_files.shift();
var js = document.createElement('script');
js.type = 'text/javascript';
js.src = file;

if (!FF || FF >= 2) {
js.onreadystatechange = function() {
if (this.readyState == 'complete' ||
this.readyState == 'loaded' ||
this.status == 304 ||
this.status == 404)
{
parent();
}
};
} else {
parent();
}
document.getElementsByTagName('head')[0].appendChild(js);
if (PAGESETUP.execControls) {
PAGESETUP.execControls();
}
}
}


Get a reference to
the function Process
function load() {
// .....
var js = document.createElement('script');
js.src = file;

if (!FF || FF >= 2) {
this.status == 404)
{
parent();
}
};
} else {
parent();
}
}
}
}


Get a reference to
function load() {
// .....
var js = document.createElement('script'); Process unique
js.src = file; dependencies
if (!FF || FF >= 2) {
this.status == 404)
{
parent();
}
};
} else {
parent();
}
}
}
}


Get a reference to
function load() {
// .....
if (!FF || FF >= 2) {
For all browsers but
this.readyState == 'loaded' || FireFox < 4, Download
this.status == 404) dependencies serially ...
{
parent();
}
};
} else {
parent();
}
}
}
}


Get a reference to
function load() {
// .....
if (!FF || FF >= 2) {
{
parent();
}
}; Otherwise, download in
} else {
parallel
parent();
}
}
}
}


Get a reference to
function load() {
// .....
if (!FF || FF >= 2) {
{
parent();
}
}; Otherwise, download in
} else {
parallel
parent();
}
}
}
When done downloading,
} render registered components!


Rendering Components
execControls: function(start) {
// Get a timestamp here to indicate the start of the process
// Merge all the queues into one! high->normal->low
var merged = this.merged;

// Go through the merged array and execute the chunks!
setTimeout(function() {
// Get a chunk from the top of the array
var item = merged.shift();
if(item){
// Execute the chunk!
item.call();
}
if (merged.length > 0) {
// Wait 25 ms and then get the next chunk
setTimeout(arguments.callee, 25);
} else {
// Otherwise, get a timestamp to indicate the end of the process
}
}, 0);
},


Combine functions
submitted by if(item){
components in // Execute the chunk!
item.call();
priority order (high
}
-> normal -> low) if (merged.length > 0) {
} else {
}
}, 0);
},


Combine functions
components in // Execute the chunk! Process one function at
item.call(); a time ...
}
} else {
}
}, 0);
},


Combine functions
components in // Execute the chunk! Process one function at
item.call(); a time ...
}
} else {
} every 25 ms!
}, 0);
},

Our New Found Creed

 Treat Everything Else as a Black Box

3rd-party Handling Logic

Component Placeholder Markup
on a page

YES

NO 3rd-party?

Process through
JS Loader

JavaScript
iFrame

Render before </html> in a Register as "3rd-
Remove original call
hidden <div> party" component

Relocate generated
markup into
placeholder


Rendering 3rd-party JavaScript:
Part 1 - Register the Call

// Add the placeholder
<div id="js-ad1"></div>
<script type="text/javascript">
(function() {
// Construct the ad URL
var ad = new EDMUNDS.AdUnit();
// Inform the PAGESETUP object of what’s going on
PAGESETUP.thirdpartyids.push('js-ad1');
PAGESETUP.thirdpartydetails['js-ad1'] = {};
PAGESETUP.thirdpartydetails['js-ad1']['type'] = 'ad';
PAGESETUP.thirdpartydetails['js-ad1']['src'] = ad.getAdUrl();
})();
</script>



Placeholder Markup

(function() {
})();
</script>



Placeholder Markup

Register details about
<script type="text/javascript"> the JavaScript Request
(function() {
})();
</script>



Placeholder Markup

(function() {
Register: placeholder ID
})();
</script>



Placeholder Markup

(function() {
Register: placeholder ID
})();
</script>

Register: JavaScript Call


Part 2 - Render at the bottom of the page

if (PAGESETUP.thirdpartyids.length > 0) {
(function() {
var id = PAGESETUP.thirdpartyids.shift();
var file = PAGESETUP.thirdpartydetails[id].src;
if (file) {
document.write('<div id="'+id+'-cache'+'" style="display:none;">
<div id="'+id+'-root'+'">');

document.write('<script type="text/javascript" src="'+file+'" ></script>');
}
})();
}
</script>
<script type="text/javascript">document.write('</div></div>');</script>



Get the registered ID

(function() {
if (file) {
<div id="'+id+'-root'+'">');

}
})();
}
</script>




if (file) {
<div id="'+id+'-root'+'">');

}
})(); Wrap the call in a
}
</script> hidden DIV




if (file) {
<div id="'+id+'-root'+'">');

}
})(); Wrap the call in a
}
</script> hidden DIV

Close the DIV


In Summary

It’s OK, it really is :-)

No DOM Event dependency
Render components as soon as page is parsed
Render components in priority

Process separately
Delay inclusion as much as possible
It’s about “mitigation” not “elimination”

Inside Line Results


Inside Line Redesign Objectives

PERFORMANCE
(onLoad ≈1.5)

RICHER CONTENT
(Large Flash content serving photos and videos)

BETTER REVENUE
(Ad impression variance reduced by 3%)


Another Vision Was Born


Legacy Redesign


Edmunds Legacy Edmunds Redesign

8.4 seconds 1.9 seconds

≈ 80% Reduction in
Load Time!

The Results

20%
Total Page Views Per Session


The Results

3%
Ad Impression Variance


The Results

4%
Bounce Rate


In The Works ...


JavaScript Loader 2.0

EVEN FASTER!
Load in parallel and execute on-demand

COMPONENT METRICS
(When it’s loaded, how long it took, ..etc)

MANY ENHANCEMENTS :)


Soon ...

http://www.github.com/edmunds


What About The Future?



How Will It Apply To ...

Edmunds Mobile


Edmunds Platform


Edmunds Platform

Plug-n-Play

Widgets
Syndication
Managed

Products

raw data Content ®
Standalone

packaged data Tools
Open Source Plugins

Code Snippets
Cars

Mobile UI
Handheld

Wired UI
API

Backend Systems


Edmunds Platform

3rd-party Consumer

®

3rd-party Provider


Let’s Continue the Conversation
@codeish http://tech.edmunds.com

Photo Credits:
All Car Photos are from www.insideline.com
http://www.cantronicsglobal.com/images/MissionVision.jpg
http://www.kewlwallpapers.com/images/wallpapers/John_C-680196.jpeg

How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps

Recomendados

Recomendados

Más contenido relacionado

Similar a How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps

Similar a How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps (7)

Último

Último (20)

How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps