How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps
-
Upload
edmundscom-inc -
Category
Technology
-
view
140.904 -
download
2
description
Transcript of How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps
![Page 1: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/1.jpg)
HOW EDMUNDS GOT IN THE FAST LANE80% Reduction in Page Load Time in Simple Steps
by Ismail Elshareef
Sunday, January 16, 2011
![Page 2: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/2.jpg)
The Results
onLoad: 8.4s ➙ 1.9s (≈ 80% reduction)
Page Views: 20%
Bounce Rate: 4%
Ad Impression Variance: 3%
Sunday, January 16, 2011
![Page 3: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/3.jpg)
Online since 1995 Properties: 200M+ page views/month Revenue = Ads + Leads
Edmunds, Inc.
Sunday, January 16, 2011
![Page 4: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/4.jpg)
Memory Lane
Sunday, January 16, 2011
![Page 5: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/5.jpg)
Edmunds.com Legacy Site
Sunday, January 16, 2011
![Page 6: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/6.jpg)
+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 ...
Sunday, January 16, 2011
![Page 7: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/7.jpg)
The Real Picture!
Sunday, January 16, 2011
![Page 8: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/8.jpg)
- 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
Sunday, January 16, 2011
![Page 9: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/9.jpg)
We Started Tinkering ...
Sunday, January 16, 2011
![Page 10: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/10.jpg)
- 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!
Sunday, January 16, 2011
![Page 11: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/11.jpg)
... but Legacy was complicated.
Sunday, January 16, 2011
![Page 12: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/12.jpg)
2008: A Vision Was Born
Sunday, January 16, 2011
![Page 13: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/13.jpg)
PERFORMANCE (Faster Page Loads .. onLoad =< 1.5s)
RICHER CONTENT (Flash, video, slicker UXD, ...etc)
BETTER REVENUE (Positive impact on ad impressions)
Redesign Objectives
Sunday, January 16, 2011
![Page 14: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/14.jpg)
FASTER PAGES
POSITIVE USER EXPERIENCE
HIGHER REVENUE
The Mindset
Sunday, January 16, 2011
![Page 15: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/15.jpg)
HTTP Requests Page Performance
User
Experience
The Challenge
Sunday, January 16, 2011
![Page 16: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/16.jpg)
1) Our Own Requests (files served from our own domains)
2) 3rd-party Requests (files served from other domains)
Types of HTTP Requests
Sunday, January 16, 2011
![Page 17: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/17.jpg)
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
Sunday, January 16, 2011
![Page 18: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/18.jpg)
JavaScript iFrame
AdsAnalytics
A/B Testing
Video Widgets
Monitoring
Surveys
Roles on Our Sites
3rd-party Requests
Sunday, January 16, 2011
![Page 19: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/19.jpg)
3rd-party RequestsPage Performance
User
Experience
HTTP Requests
Our Challenge
Sunday, January 16, 2011
![Page 20: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/20.jpg)
3rd-party iFrame 3rd-party JavaScript
Agreeable Problematic
Sunday, January 16, 2011
![Page 21: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/21.jpg)
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
Sunday, January 16, 2011
![Page 22: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/22.jpg)
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
Sunday, January 16, 2011
![Page 23: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/23.jpg)
You Can Not Control Everything
Our New Found Creed
Sunday, January 16, 2011
![Page 24: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/24.jpg)
Edmunds vs. 3rd-party Requests
!"#$
%"#$
&'()*'+,$-./).+0+$
12'345206$-./).+0+$
!"#$
%"#$
&'()*'+,$-./).+0+$
12'345206$-./).+0+$
!"#$
%"#$
&'()*'+,$-./).+0+$
12'345206$-./).+0+$
Old SitesNew Sites
Sunday, January 16, 2011
![Page 25: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/25.jpg)
Make What You Control FAST
Our New Found Creed
Sunday, January 16, 2011
![Page 26: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/26.jpg)
JavaScript Loader
Sunday, January 16, 2011
![Page 27: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/27.jpg)
How Does it Work?
Sunday, January 16, 2011
![Page 28: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/28.jpg)
❶ Quick page is served to user
How Does it Work?
Sunday, January 16, 2011
![Page 29: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/29.jpg)
❷ Page components register themselves with the page
12
3
4
5
6
7
❶ Quick page is served to user
How Does it Work?
Sunday, January 16, 2011
![Page 30: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/30.jpg)
❷ Page components register themselves with the page
12
3
4
5
6
7
❶ Quick page is served to user
❸ Registered components rendered in parallel
How Does it Work?
Sunday, January 16, 2011
![Page 31: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/31.jpg)
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
Sunday, January 16, 2011
![Page 32: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/32.jpg)
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!
① Declare Dependencies
Registration Process
Sunday, January 16, 2011
![Page 33: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/33.jpg)
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!
① Declare Dependencies
② Submit Functionality
Registration Process
Sunday, January 16, 2011
![Page 34: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/34.jpg)
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!
① Declare Dependencies
② Submit Functionality
③ Set Priority
Registration Process
Sunday, January 16, 2011
![Page 35: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/35.jpg)
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
Registration Process
Sunday, January 16, 2011
![Page 36: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/36.jpg)
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
Sunday, January 16, 2011
![Page 37: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/37.jpg)
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(); } }}
Get a reference to the function Process
Dependencies
Sunday, January 16, 2011
![Page 38: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/38.jpg)
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 unique dependencies
Get a reference to the function Process
Dependencies
Sunday, January 16, 2011
![Page 39: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/39.jpg)
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 unique dependencies
For all browsers but FireFox < 4, Download dependencies serially ...
Get a reference to the function Process
Dependencies
Sunday, January 16, 2011
![Page 40: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/40.jpg)
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 unique dependencies
For all browsers but FireFox < 4, Download dependencies serially ...
Otherwise, download in parallel
Get a reference to the function Process
Dependencies
Sunday, January 16, 2011
![Page 41: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/41.jpg)
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 unique dependencies
For all browsers but FireFox < 4, Download dependencies serially ...
Otherwise, download in parallel
When done downloading, render registered components!
Get a reference to the function Process
Dependencies
Sunday, January 16, 2011
![Page 42: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/42.jpg)
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
Sunday, January 16, 2011
![Page 43: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/43.jpg)
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
components in priority order (high -> normal -> low)
Rendering Components
Sunday, January 16, 2011
![Page 44: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/44.jpg)
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
components in priority order (high -> normal -> low)
Process one function at a time ...
Rendering Components
Sunday, January 16, 2011
![Page 45: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/45.jpg)
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
components in priority order (high -> normal -> low)
Process one function at a time ...
every 25 ms!
Rendering Components
Sunday, January 16, 2011
![Page 46: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/46.jpg)
Treat Everything Else as a Black Box
Our New Found Creed
Sunday, January 16, 2011
![Page 47: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/47.jpg)
3rd-party iFrame 3rd-party JavaScript
Agreeable Problematic
Sunday, January 16, 2011
![Page 48: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/48.jpg)
3rd-party iFrame 3rd-party JavaScript
Agreeable Problematic
Sunday, January 16, 2011
![Page 49: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/49.jpg)
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
Sunday, January 16, 2011
![Page 50: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/50.jpg)
// 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
Sunday, January 16, 2011
![Page 51: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/51.jpg)
// 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
Sunday, January 16, 2011
![Page 52: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/52.jpg)
// 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
Register details about the JavaScript Request
Sunday, January 16, 2011
![Page 53: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/53.jpg)
// 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
Register details about the JavaScript Request
Register: placeholder ID
Sunday, January 16, 2011
![Page 54: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/54.jpg)
// 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
Register details about the JavaScript Request
Register: placeholder ID
Register: JavaScript Call
Sunday, January 16, 2011
![Page 55: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/55.jpg)
<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
Sunday, January 16, 2011
![Page 56: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/56.jpg)
<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>
Get the registered ID
Rendering 3rd-party JavaScript:Part 2 - Render at the bottom of the page
Sunday, January 16, 2011
![Page 57: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/57.jpg)
<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>
Get the registered ID
Get the registered JavaScript Call
Rendering 3rd-party JavaScript:Part 2 - Render at the bottom of the page
Sunday, January 16, 2011
![Page 58: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/58.jpg)
<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>
Get the registered ID
Get the registered JavaScript Call
Rendering 3rd-party JavaScript:Part 2 - Render at the bottom of the page
Wrap the call in a hidden DIV
Sunday, January 16, 2011
![Page 59: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/59.jpg)
<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>
Get the registered ID
Get the registered JavaScript Call
Rendering 3rd-party JavaScript:Part 2 - Render at the bottom of the page
Wrap the call in a hidden DIV
Close the DIV
Sunday, January 16, 2011
![Page 60: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/60.jpg)
Treat Everything Else as a Black Box
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”
Sunday, January 16, 2011
![Page 61: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/61.jpg)
Inside Line Results
Sunday, January 16, 2011
![Page 62: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/62.jpg)
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
Sunday, January 16, 2011
![Page 63: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/63.jpg)
Another Vision Was Born
Sunday, January 16, 2011
![Page 64: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/64.jpg)
Legacy Redesign
Sunday, January 16, 2011
![Page 65: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/65.jpg)
Edmunds Legacy Edmunds Redesign
8.4 seconds 1.9 seconds
≈ 80% Reduction in Load Time!
Sunday, January 16, 2011
![Page 66: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/66.jpg)
20%Total Page Views Per Session
The Results
Sunday, January 16, 2011
![Page 67: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/67.jpg)
3%Ad Impression Variance
The Results
Sunday, January 16, 2011
![Page 68: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/68.jpg)
4%Bounce Rate
The Results
Sunday, January 16, 2011
![Page 69: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/69.jpg)
In The Works ...
Sunday, January 16, 2011
![Page 70: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/70.jpg)
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
Sunday, January 16, 2011
![Page 71: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/71.jpg)
http://www.github.com/edmunds
Soon ...
Sunday, January 16, 2011
![Page 72: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/72.jpg)
What About The Future?
Sunday, January 16, 2011
![Page 73: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/73.jpg)
Treat Everything Else as a Black Box
You Can Not Control Everything Make What You Control FAST
How Will It Apply To ...Sunday, January 16, 2011
![Page 74: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/74.jpg)
Edmunds Mobile
Sunday, January 16, 2011
![Page 75: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/75.jpg)
Edmunds Platform
Sunday, January 16, 2011
![Page 76: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/76.jpg)
®
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
Sunday, January 16, 2011
![Page 77: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/77.jpg)
®
Edmunds Platform
3rd-party Consumer
3rd-party Provider
Sunday, January 16, 2011
![Page 78: How Edmunds Got in the Fast Lane: 80% Reduction in Page Load Time in 3 Simple Steps](https://reader034.fdocuments.in/reader034/viewer/2022051817/54899dd1b47959dd0c8b5a06/html5/thumbnails/78.jpg)
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
Sunday, January 16, 2011