Creating high-performance-web-sites

Creating High Performance Web Sites

AgendaSteve SoudersMy ExperiencesToolsThe RulesReferencesQuestions?

Steve SoudersWorks at GoogleAuthorCreator of YSlowTeacher at StanfordFormer Chief Performance Yahoo!Startup Veteran

My Experiences1.5 Million Unique Users10 Million Page Views.Net Technology StackEktronCachefly CDN

ToolsFirefox+ Firebug+ YSlowJS Lint

Smush ItChromeIE Dev ToolsFiddlerMicrosoft Network Monitor

The Performance Golden Rule80-90% of the end user response time is spent on the front end. Start there.Greater potential for improvementSimplerProven to work

User PerceptionUser perception is more relevant than actual unload-to-onload response timeVaries from one web page to the next

The (First Set of) RulesMake Fewer HTTP Requests Use a Content Delivery Network Add an Expires Header Gzip Components Put Stylesheets at the Top Put Scripts at the Bottom Avoid CSS Expressions Make JavaScript and CSS External Reduce DNS Lookups Minify JavaScript Avoid Redirects Remove Duplicates Scripts Configure ETagsMake Ajax Cacheable

Make Fewer HTTP RequestsCombined filesCSS spritesImage mapsInline imagesIn a stylesheet

Use a Content Delivery Network AkamaiEdgeCastLevel3Static contentOffload trafficLocate content geographically closer to users

Add an Expires Header Static components – use Expires headerSomething like 10 years from nowDynamic components – use Cache-Control headerMax-age in secondsUse this to “prime” the browser cacheNeed to change filename or use a “cache buster” when contents changeyahoo_2.0.6.jsyahoo.js?20110310

Gzip Components Web server compression of files being servedGenerally reduces size by 70%Supported by about 90% browsers used today

Put Stylesheets at the Top Makes page appear to render fasterAllows page to render progressively

Put Scripts at the Bottom Scripts block parallel downloadsEven across hostnames

Avoid CSS Expressions Not commonly usedDeprecated starting with IE8background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Make JavaScript and CSS External Improves cacheability

Reduce DNS Lookups Typical lookup takes 20-120ms per hostnameCached for performanceIE ~30 minutesFF ~60 minutesReduce the number of unique hostnamesLeverage CNAMESmedia1.spacex.com, media2.spacex.com, etcRough guideline is 2-4 for static files

Minify JavaScriptRemove unnecessary characters to reduce size and improve load timeRemoves comments and unnecessary whitespace charactersCan obfuscate as wellmyReallyLongVariableName becomes x

Avoid Redirects301 and 302 status codesWasteful and slows down response timeshttp://astrology.yahoo.com/astrologyresults in a 301 redirect to http://astrology.yahoo.com/astrology/Can use CNAMEs here as well

Remove Duplicates Scripts2 of 10 Top US websites contain at least one duplicate scriptDoubles execution time and blocking time

Creating high-performance-web-sites

More Related Content

Similar to Creating high-performance-web-sites

Recently uploaded

Creating high-performance-web-sites