The Secret Weapons of the AOL Optimization Team Dave Artz
Secret Weapon #1: Apache Mods
4 sec. 2.5 sec.
modconcat http://code.google.com/p/modconcat/ Once installed, lets you reference any CSS or JS file on your server like this: http://www.yourdomain.com/optional/path/?? filename1.js,subdirectory/filename2.js,filename3.js Honors the cache headers of the youngest file
modjsmin http://code.google.com/p/modjsmin/ Once installed, all JS files are minified on demand, leaving commented source intact Ported from Doug Crockford’s C library
292 KB
40 KB
86% smaller Original 1.5 sec. faster
moddims http://code.google.com/p/moddims/ Once installed, lets you reference any image on your server like this: http://www.yourdomain.com/dims/resize/320x240/quality/90/ http://www.yourdomain.com/images/full-quality-image.jpg Manipulate image compression levels on the fly Resize large full quality images to thumbnails
Secret Weapon #2: Friendly Iframes
The Friendly Iframe Quarantines blocking JS ads in their own little bubble so content can continue rendering When finished loading, text ads are copied to the parent and pick up CSS styles Ad creatives can expand out of the frame without any cross-domain issues Simple demo of the technique: http://www.artzstudio.com/files/fif-demo/
Secret Weapon #3: “On Demand” Solutions
“Morphing” môrf·ing verb 1. Using placeholder HTML elements that have all the data necessary to transform into another HTML element (typically heavier in byte size) on demand
ClickTale found that 78% of user page views do not reach the bottom of the page Source: ClickTale Blog, Unfolding the Fold http://blog.clicktale.com/2006/12/23/unfolding-the-fold/
Keep your eyes on the Net panel...
Sonar Solution for detecting if an object is visible (on or near) the screen, and then doing something Example usage: sonar.add({obj:”obj_id”, px : 200, callback : function(){...}}); See http://www.artzstudio.com/files/sonar/
Secret Weapon #4: ESR (Executive Speed Report)
Executive Speed Report Provides full transparency on the performance of AOL websites with a competitive focus Products and pages are “taggable” so people can get a view of what they care about “Self serve” lets anyone manage the URL sets, ensuring the right pages get measured
Secret Weapon #5: Auditron
“This is wrong.” -Lucius Fox, The Dark Knight
Our Secret Weapons Apache Mods (dims, concat, jsmin) Friendly Iframe “On Demand” Solutions (morphing, sonar) ESR (Executive Speed Report) Auditron
Top Secret Weapon: Beacon
Beacon Loads asynchronously as the first JS object on the page; small unobtrusive library (2K) Internally used to track page view, visit, clicks, time spent, etc. Sends load time of the page back on clicks (window.onload time - beacon initialization time) Currently does not include server response times; purely front end load time measurement
Our First Experiment Take a sample of visits For each visit, compute the average load time across the pages viewed Break the visits into 10 groups (percentiles) based on the average load time Examine page views per visit of each group, from fastest to slowest
AOL Autos Average Page Views per Visit 8 7 6 5 4 10th 20th 30th 40th 50th 60th 70th 80th 90th 100th Visit Load Time Percentile* *10th is fastest 10% of the visit sample, 100th is slowest 10%
AOL Money & Finance Average Page Views per Visit 9 8 7 6 5 4 3 2 10th 20th 30th 40th 50th 60th 70th 80th 90th 100th Visit Load Time Percentile* *10th is fastest 10% of the visit sample, 100th is slowest 10%
AOL Shopping Average Page Views per Visit 4.5 4 3.5 3 10th 20th 30th 40th 50th 60th 70th 80th 90th 100th Visit Load Time Percentile* *10th is fastest 10% of the visit sample, 100th is slowest 10%
Moviefone Average Page Views per Visit 7.5 6.5 5.5 4.5 3.5 10th 20th 30th 40th 50th 60th 70th 80th 90th 100th Visit Load Time Percentile* *10th is fastest 10% of the visit sample, 100th is slowest 10%
Conclusions Visits experiencing the fastest load times delivered us the most page views per visit More study is needed to determine why one site’s “profile” differs from the other Dave needs feedback on the methodology, and other studies to do with this data
Done. AOL e-mail: david.artz@corp.aol.com Personal e-mail: dave@artzstudio.com Twitter & AIM: artzstudio Blog: artzstudio.com
Recommend
More recommend
