Improving Web Site Performance and Scalability While Saving Money

Robert Boedigheimer

About MeWeb developer since 1995Columnist for aspalliance.comPluralsight AuthorWrox Author3rd Degree Black Belt, Tae Kwon DoASP.NET MVP

http://aspadvice.com/blogs/robertb/robertb@aspalliance.com@boedie

Performance Rules

“Performance is like air, no one cares about it until there isn’t any” - Richard Campbell

For most web sites, only 10-20% of response time is waiting for the HTML document to be generated and downloaded

Not optimizing code!

Make fewer HTTP requestsSend as little as possibleSend it as infrequently as possible

Saving and Making Money

Less bandwidthLess servers

Increased sales and traffic (http://tinyurl.com/6293c4)

“Every 100 ms increase in load time of Amazon.com decreased sales by 1%”“When the home page of Google Maps was reduced from 100KB to 70-80KB, traffic went up 10% in the first week, and an additional 25% in the following three weeks”

Google and others using performance to determine ranking

HTTP

Hypertext Transfer ProtocolProtocol defined in RFC 2068 (Http 1.1), January 1997Request/response paradigmHeader and body

http://www.ietf.org/rfc/rfc2068.txt

FiddlerTracing tool specifically for HTTPShows complete request and response (not packets)Can save archive of sessionTransfer Timeline

http://tinyurl.com/3drk5t

Measure

IIS log filesTime takenlogParser

3rd Party ServicesBenchmark against othersServers around US and worldAvailability and response times every X minutesKeynote, Gomez, WebSitePulse, AlertSite

HTTP Compression

Server evaluates the “Accept-Encoding” header for request, compresses resulting response

Implemented in February 2003 when about 3% of Fortune 1000 web sites utilizedUsed 53% less bandwidth, ~25% faster Keynote measurementsNow use IIS Compression (free)

HTTP Compression (cont)

IIS 7Can control when to stop using if CPU usage is too highMinimum default file size is 256KOnly static compression is on by default

Detailed article about enabling IIS 6 compression at http://tinyurl.com/yjdo7w

Content Expirations

Client asks “if-modified-since”Small content files it is just as expensive to see if modified as to receive contentLeverage user’s browser cache

Setup expiration times for content foldersAvoid requests for files that seldom change (.js, .css, images, etc)Rename the file if need to override browser caching

Content Expirations (cont)

CSS and JavaScript External

(Almost) always put CSS and JavaScript in external files

Reduces page size(s)Allows reuseAble to use expirations

ETags

Used for cache validationIIS sends the ETag header in response for static files

hash:changeNumberIIS 6

changeNumber – specific to serverSetup a custom response header “ETag” with no value

IIS 7changeNumber - 0 by defaultCompletely remove header with HttpModule

Minification and ConsolidationMinimize CSS and JavaScript files

Remove whitespace, comments, excessive semicolons, etcOften see files named with “.min”jQuery 1.6.2

Original file size is 229 KBMinified file size is only 31 KB (86% smaller)

Minification toolsJSMinPackerYUI CompressorCSSMinMicrosoft Ajax Minifier (http://ajaxmin.codeplex.com/)

JavaScript and CSSCommand line, .dll, and build tasks

Minification and Consolidation (2)Consolidation

Combine files to reduce the number of HTTP requests requiredMSBuild

StrategyUse external files for JavaScript and CSSMinimize all JavaScript and CSS filesCombine all JavaScript files into a single file (jQuery, jQuery plugins, etc)Combine all CSS files into a single fileAdd a unique version number to combined files so we can set a “far future” expiration to utilize browser caches effectivelyAvoid runtime impact by minimizing and combining at build time

Only for release builds to minimize impact on developersReference the new combined files

Minification and Consolidation (3)

ImplementationVisual Studio Project File (.csproj)

“Touch” a .cs file to ensure rebuildMSBuild Extension Pack (http://msbuildextensionpack.codeplex.com/)

Retrieve the version number for the Web Form assembly in “bin” folder

MSBuild AjaxMinifier task to minimize CSS and JavaScript filesMSBuild task to combine minimized filesInclude the combined files into project (so publish will move them)WARNING: Watch the order of files, keep consistent with original order!

Use DEBUG symbol value to determine if release mode, reference new combined files for release builds

ResultsHome page was 46% faster!!

CSS Sprites

Combine small images into a single imageUse CSS to “index” into the larger image

Often 70-95% of time taken for a user is time requesting components (images, .css, .js)Reduce the number of requests

http://spritegen.website-performance.org/

Images

JPEG (photos), PNG/GIF (rest)JPEG compression

Tradeoff size vs. quality, often cut size by 50% without any impact

Image optimizersJpegtran – removes unnecessary metadata, losslessPngcrush – PNG optimizerSmush.it, http://tinyurl.com/r4b36b

Favicon.ico Caching

By default, most browsers automatically look for this file in root folder of site (use for favorites, address bar, etc)Use <link> to point to a specific image

Setup to use an image with expirations

Content Delivery Network (CDN)

Akamai, Limelight, Internap, AmazonGlobal network of serversGeographically closer to usersOffloads work for your serversTypically used for static files (images, CSS, JavaScript, etc)

jQuery (jQuery.com, Microsoft, Google)Host jquery library files for free

Caching

Data caching (Cache), cut 50% of our SQL queries which was 72,080,000 less queries each month!Substitution

Scalability, Performance, and Reliability

http://aspalliance.com/66

Server Side Viewstate (WebForms)

Default hidden client field for viewstate can become very large on pagesCan specify to store in session on server to avoid downloading to the client

Create a new Page Adapter to specify use of Session rather than client side hidden fields

Two PageStatePersister derived classes HiddenFieldStatePersister (default) SessionPageStatePersister

Create .browser file in App_Browsers and configure new class<sessionPageState historySize="5" />

Ajax

May be times when only need to update a portion of a pagejQuery

.load( ) – call server and return HTML fragment

.ajax( ) – call and get various types of data

Tools

Performance analysis toolsReview a web page for how well it implements various performance techniques like compression, expirations, etcYSlowGoogle PageSpeed

http://code.google.com/speed/page-speed/

Multiple Domains for Static Resources

Browsers will open a series of background connections to retrieve objects from web servers

HTTP RFC specified using 2 connectionsRecent browsers have continued to increase the number used

Recent testing with CDN and using 3 domains for images was about 20% fasterTradeoff of time to lookup another DNS name and benefit of multiple connections

WARNING: Need to ensure that a given image is served from the same domain or this will override browser cache and nullify expirations!

Other IdeasPre-fetchRemove unused response headers from IISHost static pages on cookieless domainsImage width/height (faster rendering)Stylesheets at top of pagesScripts at bottom of pages

Resources

“High Performance Web Sites” by Steve SoudersPluralsight Course – Web Performance“Website Optimization” by Andrew King

Questions

http://aspadvice.com/blogs/robertb/robertb@aspalliance.com@boedie