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

HOW EDMUNDS GOT IN THE FAST LANE80% 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%


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

Edmunds, Inc.


Memory Lane


Edmunds.com Legacy Site


+100ms in response time ➡ -1% in sales

-30% in file size ➡ +30% in requests

“95% of Performance is Frontend” - Steve Souders

“Performance Matters!” - Organizations

Meanwhile ...


The Real Picture!


- 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

Site Condition


We Started Tinkering ...


- 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

Quick Wins: CACHING!


... but Legacy was complicated.


2008: A Vision Was Born


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

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

BETTER REVENUE (Positive impact on ad impressions)

Redesign Objectives


FASTER PAGES

POSITIVE USER EXPERIENCE

HIGHER REVENUE

The Mindset


HTTP Requests Page Performance

User

Experience

The Challenge


1) Our Own Requests (files served from our own domains)

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

Types of HTTP Requests


JavaScript iFrame

Exist in Two Forms

Cons: - Fixed width/height

Pros: - Easy to lazy-load - Sandboxed Code

Cons: - Access to DOM - document.write

Pros: - Richer Content

3rd-party Requests


JavaScript iFrame

AdsAnalytics

A/B Testing

Video Widgets

Monitoring

Surveys

Roles on Our Sites

3rd-party Requests


3rd-party RequestsPage Performance

User

Experience

HTTP Requests

Our Challenge


3rd-party iFrame 3rd-party JavaScript

Agreeable Problematic


Attempt #1:Override document.write()function

Example:var buffer = [];document.write = function(st) { buffer.push(st);}// when a specific 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

Mission: Control 3rd


http://ad.doubleclick.net/adj/

http://ad.doubleclick.net/adj/

http://www.edmunds.com/adSub.html?

http://www.edmunds.com/adSub.html?

You Can Not Control Everything

Our New Found Creed


Edmunds vs. 3rd-party Requests

!"#$

%"#$

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

12'345206$-./).+0+$

!"#$

%"#$

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

12'345206$-./).+0+$

!"#$

%"#$

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

12'345206$-./).+0+$

Old SitesNew Sites


Make What You Control FAST

Our New Found Creed


JavaScript Loader


How Does it Work?


❶ Quick page is served to user

How Does it Work?


❷ Page components register themselves with the page

12

3

4

5

6

7


How Does it Work?


❷ Page components register themselves with the page

12

3

4

5

6

7


❸ Registered components rendered in parallel

How Does it Work?


Component 6

Component 2Component 1

Component 3

Component 4

Component 5

Component 7

Component 8

I need flash.js and here’s my code. I need to be rendered right away

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

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

Registration Process


Component 6


Component 3

Component 4

Component 5

Component 7

Component 8




① Declare Dependencies



Component 6


Component 3

Component 4

Component 5

Component 7

Component 8





② Submit Functionality



Component 6


Component 3

Component 4

Component 5

Component 7

Component 8





② Submit Functionality

③ Set Priority



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

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

Declare Dependencies

Submit functionality

Set Priority



http://static.ed.edmunds-media.com/edmunds-webassets/1.5.131/js/decorator-simple-min.js'

http://static.ed.edmunds-media.com/edmunds-webassets/1.5.131/js/decorator-simple-min.js'

http://static.ed.edmunds-media.com/edmunds-webassets/1.5.131/js/idm/all-min.js'

http://static.ed.edmunds-media.com/edmunds-webassets/1.5.131/js/idm/all-min.js'

http://static.ed.edmunds-media.com/edmunds-webassets/1.5.131/js/idm/connect-min.js'

http://static.ed.edmunds-media.com/edmunds-webassets/1.5.131/js/idm/connect-min.js'

function load() { // ..... // ..... 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(); } }}

Process Dependencies





Get a reference to the function Process

Dependencies





Process unique dependencies


Dependencies






For all browsers but FireFox < 4, Download dependencies serially ...


Dependencies







Otherwise, download in parallel


Dependencies







Otherwise, download in parallel

When done downloading, render registered components!


Dependencies


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); },

Rendering Components




Combine functions submitted by

components in priority order (high -> normal -> low)







Process one function at a time ...







Process one function at a time ...

every 25 ms!



Treat Everything Else as a Black Box

Our New Found Creed








3rd-party Handling Logic

3rd-party?NO

Render before </html> in a hidden <div>

Placeholder Markup

Remove original call

Component on a page

Process through JS Loader

Relocate generated markup into placeholder

YES

iFrame

Register as "3rd-party" component

JavaScript


// 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>

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




Placeholder Markup




Placeholder Markup

Register details about the JavaScript Request




Placeholder Markup


Register: placeholder ID




Placeholder Markup


Register: placeholder ID

Register: JavaScript Call


<script type="text/javascript"> 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>

Rendering 3rd-party JavaScript:Part 2 - Render at the bottom of the page



Get the registered ID





Get the registered JavaScript Call







Wrap the call in a hidden DIV






Wrap the call in a hidden DIV

Close the DIV



You Can Not Control Everything

Make What You Control FAST

In Summary

It’s OK, it really is :-)

No DOM Event dependencyRender components as soon as page is parsedRender components in priority

Process separatelyDelay inclusion as much as possibleIt’s about “mitigation” not “elimination”


Inside Line Results


PERFORMANCE (onLoad ≈1.5)

RICHER CONTENT (Large Flash content serving photos and videos)

BETTER REVENUE (Ad impression variance reduced by 3%)

Inside Line Redesign Objectives


Another Vision Was Born


Legacy Redesign


Edmunds Legacy Edmunds Redesign

8.4 seconds 1.9 seconds

≈ 80% Reduction in Load Time!


20%Total Page Views Per Session

The Results


3%Ad Impression Variance

The Results


4%Bounce Rate

The Results


In The Works ...


EVEN FASTER! Load in parallel and execute on-demand

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

MANY ENHANCEMENTS :)

JavaScript Loader 2.0


http://www.github.com/edmunds

Soon ...


http://tech.edmunds.com


What About The Future?



You Can Not Control Everything Make What You Control FAST

How Will It Apply To ...Sunday, January 16, 2011

Edmunds Mobile


Edmunds Platform


®

Widgets

Contentraw data

packaged data

Wired UI

Mobile UI

Backend Systems

Handheld

Syndication

Open Source

API

Products

Tools

Standalone

Plugins

Code SnippetsCars

Plug-n-Play

Managed

®

Edmunds Platform


®

Edmunds Platform

3rd-party Consumer

3rd-party Provider


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

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


http://www.insideline.com

http://www.insideline.com

http://upload.wikimedia.org/wikipedia/commons/f/f8/2006-02-13_Drop-impact.jpg






Date post:	05-Dec-2014
Category:	Technology
Upload:	edmundscom-inc
View:	140,903 times
Download:	2 times

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

Technology