45
My Web Site Is So Slow…and I Don’t Know What to Do about It! Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

Embed Size (px)

Citation preview

Page 1: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

My Web Site Is So Slow…and I Don’t Know What to Do about It!Thomas DemlPrincipal Program ManagerWeb Platform and ToolsMicrosoft Corporation

SESSION CODE: WEB308

Page 2: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

Agenda1. Why Web Performance Is Important2. Web Performance - The Basics3. Web Performance - Best Practices4. Web Performance - Tools and Resources

Not in scope for this talk:Database TuningDistributed Caching / AppFabric / VelocityAjax and Web Services

Page 3: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

1.1 Why Care About Performance?

Customers will abandon your site4 second abandonment threshold

75% of the 1,058 people asked would not return to websites that took longer than four seconds to load.

Source: Keep Page Download Speed Times Fast (How Fast? 4 Seconds!) | Hobo http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

It will be harder to find you on the NetSearch Crawlers will spend less time on your site Site Performance part of Google search rankings

Page 4: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

1.2 Impact of Speed-ups and Slow-downsSlow Downs:

BingA page that was 2 seconds slower resulted in a 4.3% drop in revenue/user.

GoogleA 400 millisecond delay caused a 0.59% drop in searches/user.

Yahoo!A 400 milliseconds slowdown resulted in a 5-9% drop in full-page traffic.

Speed-Ups:Shopzilla

Speeding up their site by 5 seconds increased the conversion rate 7-12%, doubled the number of sessions from search engine marketing, and cut the number of required servers in half.

MozillaShaving 2.2 seconds off their landing pages increased download conversions by 15.4%, which they estimate will result in 60 million more Firefox downloads per year.

NetflixAdopting a single optimization, gzip compression, resulted in a 13-25% speedup and cut their outbound network traffic by 50%.

http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/Source: O'Reilly Velocity Conference, May 2009

Page 5: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

2. Web Performance Basics

TerminologyThe 80/20 RuleWhere to look for web performance improvements

Page 6: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

2.1 Web Performance TerminologyResponse Time

Time it takes to process a requestResponsiveness

Acknowledgement of the request opposed to completion of the request

LatencyMinimum time required to get any form of response

ThroughputHow much can be done within a given amount of time

LoadStress the system is under

Load SensitivityHow response time varies with the load

EfficiencyPerformance divided by resources, e.g. 30 rps/2CPUs = 15 rps/CPU

CapacityMaximum acceptable throughput

ScalabilityHow adding hardware affects performanceVertical Scalability (scaling up): Adding memory and/or CPUsHorizontal Scalability (scaling out): Adding more servers

Source: Patterns of Enterprise Application Architecture

Page 7: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

2.2 The 80/20 RuleOnly 20% of the time is spent on the initial document requested

The remaining 80 % are external resources

Page 8: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

Sluggish

DEMO

Page 9: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

Areas for Speeding Up Your Web Site

Server Execution Time NetworkNumber of objects transferredAmount of data transferred

BandwidthLatency

BrowserRendering and Layout

Page 10: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

3. Web Site Performance In DetailAreas for Improving Web Site Performance

Speed up Execution Time on the ServerDo more, faster and with fewer resources

The Network – send fewer bytesAmount of data transferredNumber of objects transferred

Frontend OptimizationsOptimize download of page resourcesOptimize rendering and layout of pages

Other IssuesThe first impression counts!

This is where server admins and devs usually look

Page 11: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

3.1 Execution Time Tuning Side Note

Goal is to max out the CPUIf CPU can’t be maxed it might be that

The Network is maxed outThe Disk can’t keep upSome other lock (e.g. database) blocks execution

Only if CPU is maxed it makes sense to look how the CPU load can be reduced

Page 12: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

3.1.1 Speeding Up IIS Execution TimeBest Practices

Run Windows Server 2008 on new hardwareIt's optimized for new CPU architectures

Existing default document on top of listUse IIS7 Output Caching for semi-dynamic contentTurn off features you don't need

Authentication and SSL only if necessaryAuth introduces round-trip to backend (AD)Encryption impacts processing time and caching

Request tracingBut use it if for performance troubleshooting

Page 13: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

3.1.3 Speeding Up PHP Execution TimeBest Practices

Use FastCGIEnable WinCacheSet FastCGI MaxInstances to 0 (FastCGI 1.5)

enables auto-tuning of FastCGI processes based on system load

Page 14: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

WinCache for PHP

DEMO

Page 15: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

3.1.2 Speeding Up ASP.NET Execution TimeBest Practices

Turn off ASP.NET compilation/debug No compiler optimizations, increased memory footprint, etc. Use <deployment retail="true" /> to enforce across machine

Read through ASP.NET Performance Coding Best Practices in the Prescriptive Architecture GuidesUnder Memory Pressure?

Read about the Large Object HeapThe First Impression Counts!

Use ASPNET_COMPILER to optimize for the first impressionDo you really need IIS idle timeout and proactive recycling?

ASP.NET Thread Pool Settings should be optimized for high throughput sitesmaxConcurrentRequestsPerCPU defaults to 12

Page 16: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

IIS/ASP.NET Caching PrimerIIS/ASP.NET Output Cache allows caching across all tiers

On browsers and proxies via Cache-Control and Expires HeadersProgrammatically in ASP.NET

SetCacheability(), SetETag(), SetExpires(), SetLastModified(), SetMaxAge(), …Declarative in ASP.NET:

<%@ OutputCache Duration="1000" Location="Client" VaryByParam="none" %>

Via configuration settings in IIS On the Server

IIS7 Kernel Mode CachingEnabled for static files Can cache all files with a particular extension: .aspx, .yourextension, …Can cache a particular file: e.g. default.aspx

ASP.Net Application CacheControl when items are cached programmaticallyMix cached and non-cached content

Page 17: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

Output Caching

DEMO

Page 18: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

3.2 Sending Fewer Bytes over the Network

Page 19: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

3.2.1 A Word about Latency

You don’t see the performance issues your client seesAs the Developer

Your cache is primedYou sit close to the server that is running your appYou have lots of bandwidthYou use the latest browser versions and the latest hardware

Approx. LatenciesAsia->US

~250ms latency/TCP packetUS Eastcoast US Westcoast

~100ms latency/TCP PacketDid we talk about latency on cell phones yet?

Page 20: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

Browser Cache

Don't assume it's primedBrowser Temporary Files Cache Size is small by default

Internet Explorer 8: 50MBFirefox 3.6: 50MB

Page 21: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

Latency

DEMO

Page 22: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

3.2.2 Use Content Distribution NetworksContent Delivery Networks improve your website performance because:

Files get cached across the worldFiles get cached across domainsFiles get compressedFiles get cached on the browser with a far future expiration header

Example: The free Microsoft Ajax CDN contains

Microsoft Ajax LibraryjQueryjQuery Validation LibraryASP.NET Framework JavaScript

Page 23: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

3.2.3 Use IIS CompressionStatic Compression (on by default)

IIS caches compressed resourcesCompression is done on second request

Dynamic Compression (not installed by default)Compression is done on every response~ 5-10% higher CPU load

IIS7 Compression Supports compression levels 1-10Is based on MIME MapsSupports high and low watermarkingCan be combined with output caching

Don't rely on compression alone10-15% of requests don't support compression

Page 24: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

IIS7 Compression

DEMO

Page 25: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

3.2.4 Minify CSS and JavascriptCrunch Javascript and CSS with AjaxMin

Comments, white spaces Munges function and variable names (converted into smaller strings)

Other Javascript Optimizations Code Splitting

The Idea behind Microsoft DolotoStart with a small piece of code on the clientDownload required code on demand (pull)Leads to

Better application responsivenessFaster startup timesRarely executed code is rarely downloaded

Page 26: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

Minification

DEMO

Page 27: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

3.2.5 Optimize ImagesBest Practices

Do not scale images in HTML!!Formats:

Use jpg for photosUse png for graphics

Remove metadataCSS Sprites

Allows combination of multiple images into oneIssues:

SEO: can't use the ALT TagChanging a single sprite will force download of full imageAdditional HTML and CSS markup

Try Image Crushing Tools

Page 28: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

Image Optimization

DEMO

Page 29: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

3.2.6 ASP.NET Viewstate

State stored across round tripsDisable View State whenever possible

Set EnableViewState="false"ViewState versus ControlStateNever need ViewState when displaying data

Page 30: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

Viewstate

DEMO

Page 31: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

3.2.7 Help the Browser Cache Content

Conditional GETs introduce network round tripsUse the Cache-Control Header

Use Versioning for cached content that changesRequest:

GET /Logo.png HTTP/1.1If-Modified-Since: Mon, 10 Nov 2008 21:53:27 GMT

1st Response:HTTP/1.1 200 OKLast-Modified: Mon, 10 Nov 2008 21:59:09 GMT<content>…

2nd Response:HTTP/1.1 304 Not ModifiedLast-Modified: Mon, 2 Nov 2008 20:59:09 GMT

Page 32: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

Avoiding Conditional GETs

DEMO

Page 33: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

3.2.8 Additional Best Practices to Reduce Network TrafficAvoid Redirects

Additional network round-tripsUse 301's instead of 302's

Combine Javascript and Cascading Style Sheets (CSS) as much as possibleAvoids additional network round-trips

Strip unnecessary response headersX-Powered-ByETag

Reduce DNS LookupsUse authentication and SSL only for content that really needs protection

Images? Script?

Are you dealing with bandwidth hogs? Try the IIS Bitrate Throttling Module

Page 34: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

3.2.8 More Best Practices to Reduce Network Traffic

Look at your Cookies Do you need all of them?Use dedicated domain name for static content, e.g. static.contoso.comCan you use the Cookie path feature?

Keep ASP.NET Master Pages leanThey are part of every ASP.NET page response

i.e. do not include Javascript etc.Careful with the ETag on IIS 6.0Use lowercase to reference your resources

Browser Cache is case-sensitive!

Page 35: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

3.3 Optimize the Frontend

Optimize DownloadsStrive for parallel downloads

Best Practices:Script should go to the bottom of the page

If script tag is encountered, no new downloads are startedI.e. rendering of page cannot start

Stylesheets should go at the beginning of the <head> sectionCSS needed for rendering and need to be downloaded as early as possible

Avoid CSS Expressions

Version

HTTP 1.0 server (broadband connection)

HTTP 1.1 server (broadband connection)

HTTP 1.0 server (narrowband connection)

HTTP 1.1 server (narrowband connection)

Internet Explorer 7 and earlier

4 2 4 2

Internet Explorer 8

6 6 4 2

Page 36: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

Browser Optimizations and Putting It All Together

DEMO

Page 37: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

SummaryPerformance Matters!

Speed == EyeballsYou can improve performance on three fronts:

On the Server by doing things faster and more efficientOn the Network by sending fewer bytes and reducing the round-tripsOn the Browser by optimizing the download and rendering of the page and its resources

And: There is lot’s of great tools and information out there…

Page 39: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

Related Content

WEB305: Build Web-Sites Faster With Visual Studio 2010

WEB303-INT: Developing, Extending, and Deploying Web Applications on Internet Information Services (IIS)

WSV02-HOL: Deploying and Managing Microsoft ASP.NET Using Internet Information Services (IIS) 7.5 on Server Core (V3.0)

TLC-58: Windows Server 2008 R2 Internet Information Services (IIS)

Page 40: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

Track ResourcesASP.NET – http://www.asp.net/ Silverlight – http://silverlight/ Expression – http://www.microsoft.com/expression/ Internet Explorer – http://www.microsoft.com/windows/internet-explorer/default.aspx

Page 41: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

Resources

www.microsoft.com/teched

Sessions On-Demand & Community Microsoft Certification & Training Resources

Resources for IT Professionals Resources for Developers

www.microsoft.com/learning

http://microsoft.com/technet http://microsoft.com/msdn

Learning

Page 42: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

Complete an evaluation on CommNet and enter to win!

Page 43: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

Sign up for Tech·Ed 2011 and save $500 starting June 8 – June 31st

http://northamerica.msteched.com/registration

You can also register at the

North America 2011 kiosk located at registrationJoin us in Atlanta next year

Page 44: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to

be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Page 45: Thomas Deml Principal Program Manager Web Platform and Tools Microsoft Corporation SESSION CODE: WEB308

JUNE 7-10, 2010 | NEW ORLEANS, LA