Upload
chris-love
View
445
Download
1
Tags:
Embed Size (px)
Citation preview
BEING A TWEAKER - MODERN WEB PERFORMANCE TECHNIQUES
Chris LoveTellago Inc.http://ProfessionalASPNET.comhttp://Twitter.com/ChrisLove
TELLAGO
REFERENCESEssential Knowledge for Front-End Engineers
Steve Soudershttp://www.stevesouders.com/
http://amzn.to/gwf9pGhttp://amzn.to/gudayQ
http://developer.yahoo.com/performance/rules.html
SPEED KILLS Customers/Users Are Impatient Speed SEO Factor Amazon: 1 Click Purchase
Case Study Wal-Mart
SPEED KILLS
http://bit.ly/xfvPMC
SPEED KILLS
http://bit.ly/xfvPMC
SPEED KILLS For every 1 second of improvement
they experienced up to a 2% increase in conversions
For every 100 ms of improvement, they grew incremental revenue by up to 1%
SEO benefits for entry pages and reduce bounces
TOOLS IE – F12
Networking Profiling
FireFox FireBug – Yslow Plugin
WebKit Developer Tools Ctrl + Shift + I
MAKE FEWER REQUESTS• Each Request Adds More Overhead• Avoid Slicing Images that are not
Reused• Image Maps• CSS Sprites• Inline Images• Combine Scripts and CSS
BUNDLING & MINIFICATION Reduces Requests Reduces Size
JSMin http://bit.ly/tzBeo YUI Compressor http://yhoo.it/AWec Google Closure Compiler http://bit.ly/aNwjz AJAXMin http://bit.ly/cCCKEI Cassette http://bit.ly/zsGm8X
BUNDLING & MINIFICATION ASP.NET 4.0 Includes New Tool Gu’s Blog Post http://bit.ly/su4zHd
JS & CSS Granular Control Custom Rules Demo http://bit.ly/q5sFNK
COMPRESS• Reduces Content being sent over the
wire• Gzip, Deflate• Increases Processer Demand on both
ends• IIS 6 and IIS 7• http://technet2.microsoft.com/windowsserver2008/en/l
ibrary/60f3fa55-f005-496e-9d2f-cc4fc2732fce1033.mspx?mfr=true
• Blowry• Various ISAPI Filters
IMAGE SPRITES Add Multiple Images
together Great for Icons Use CSS positioning to
set background-image
IMAGE SPRITES div {
background:url(icon-sprites.png);margin:3px;
} .sprite1 {
width:24px;height:26px;background-position: 0px 0px;
}
DATA URIS Base64 Encode Data Eliminates Requests Do Not Use for LARGE Images
<img src="data:image/png;base64, {mystery meat} " alt="Texas Rangers">
SINGLE PAGE APPS Can Reduce Requests Snappy Page & Content Transitions Be Cautious of Browser Memory
Pressures
DEFERRED CONTENT Load Content in the background Predictive Loading Use the IMG load event to load next
image
USE CDN Common Scripts & Resources Reduces Requests (sort of) Typically Not Compressed (but that’s
OK)
USE CDN<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script> window.jQuery || document.write("<script src='@Url.Content("~/js/libs/jquery-1.7.1.min.js")'>\x3C/script>")</script><script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script><script>window.jQuery.fn.tmpl || document.write("<script src='@Url.Content("~/js/libs/jquery.tmpl.min.js")'>\x3C/script>")</script>
STYLES @ TOP Browser needs Styles to Render
Markup Avoid Inline Styles
SCRIPTS @ BOTTOM SCRIPT tag is a blocking Tag Scripts Must Be Evaluated before
proceding Allows markup to be rendered 1st
(perceived perf) Exception - modernizr
STORAGE LocalStorage IndexDB WebSQL (deprecated)
IndexDB & WebSQL have better perf and reliability
JQUERY PERFORMANCE Always Use Latest Version Use CDNs (Google, Microsoft)
USE FOR NOT $.EACHvar array = new Array (); for (var i=0; i<10000; i++) {
array[i] = 0; } console.time('native'); var l = array.length; for (var i=0;i<l; i++) {
array[i] = i; } console.timeEnd('native'); console.time('jquery'); $.each (array, function (i) {
array[i] = i; }); console.timeEnd('jquery');
USE FOR NOT $.EACH
USE IDS NOT CLASSESconsole.time('class'); var list = $('#list'); var items = '<ul>'; for (i=0; i<1000; i++) {
items += '<li class="item' + i + '">item</li>'; } items += '</ul>'; list.html (items); for (i=0; i<1000; i++) {
var s = $('.item' + i); } console.timeEnd('class'); console.time('id'); var list = $('#list'); var items = '<ul>'; for (i=0; i<1000; i++) {
items += '<li id="item' + i + '">item</li>'; } items += '</ul>'; list.html (items); for (i=0; i<1000; i++) {
var s = $('#item' + i); } console.timeEnd('id');
USE IDS NOT CLASSES
GIVE SELECTORS CONTEXT
$(“.class”).takeAction({x:y});
Vs
$(“.class”, “#container”).takeAction({x:y});
CACHE & CHAIN$(“.class”).takeAction1({x:y});$(“.class”).takeAction2({x:y});$(“.class”).takeAction2({x:y});
Vs
$(“.class”).takeAction1({x:y}) .takeAction2({x:y}) .takeAction3({x:y});
CACHE & CHAINfor (var i=0; i<1000; i++) {
$('#list').append (i); }
// much better this way var item = $('#list'); for (var i=0; i<1000; i++) {
item.append (i); }
AVOID DOM MANIPULATION
var list = ''; for (var i=0; i<1000; i++) {
list += '<li>'+i+'</li>'; } ('#list').html (list);
JOIN NOT CONCATvar array = []; for (var i=0; i<=10000; i++) {
array[i] = '<li>'+i+'</li>'; } $('#list').html (array.join (''));
RETURN FALSE$('#item').click (function () { // stuff here
return false; });