Building High Performance Websites - Session-1

SUREInternal Training

High Performance WebsitesFocus on Client side best practices and optimizations

Usama Nada

SESSION-1

We believe in…

Giving Users THE Best Experience

We believe…

In building THE perfect web apps

We believe…

Your tools are important

We believe…

Server + client-side =

Defining Performance.Understand the RulesPerformance ToolboxApply The Rules in ASP.Net web App

Lets Start Goals

What? Reducing the amount of bandwidth and number of requests served from your Website

High User ExpectationsUsers usually expects less than a second. More than 2 seconds now considered slow. +Age of Mobility

The Performance Golden Rule “optimize front-end performance first, because that’s where 80% or more of the end-user response time is spent.”

Web Performance

Web PerformanceResponse Tree Backend vs. frontend

The impact website speed has on business

“Even a small ant can hurt the mighty elephant.” (Google Maps!, SEO)

• Google: 500 ms slower = 20% drop in traffic• Google Maps: home page was reduced 100 KB

to 70KB, traffic went up 10% in the first week and an additional 25% in the following three weeks

• Higher SEO Rank• Amazon: 100 ms slower = 1% drop in sales

$2,054,794 per day

Web Performance

How to Optimize (The performance cycle)

Show Me the Numbers

The Rules

Request-and-response communication system.

HTTP messages are made up of a header and a body. (key/value pair format)

Each HTTP request also contains an HTTP verb that tells the server what to do with the data (GET and POST)

Status Codes

HTTP Basics

Make fewer HTTP requestsUse a content delivery networkAdd an Expires headerCompress components with GzipPut CSS at the topMove JavaScript to the bottomAvoid CSS expressionsMake JavaScript and CSS externalReduce DNS lookupsMinify JavaScript, and cssAvoid redirectsRemove duplicate scriptsTurn off EtagsMake AJAX cacheable and small

The Rules List 14 Rules and More!

The Tools

Profiling ToolsYslow http://yslow.org/Google PageSpeed: https://developers.google.com/speed/pagespeed/WebPageTest http://www.webpagetest.org/FireBug, and Chrome developer toolsFiddler

Optimization ToolsOnline Google Closure compiler: http://closure-compiler.appspot.com/homeYUI Compressor: http://yui.github.io/yuicompressor/Smush.it: http://smush.it/VS Web Essentials http://vswebessentials.com/

Performance Practices Checklist: http://webdevchecklist.com/ wi

Web Performance Toolbox

Why? Reducing the amount of bandwidth served from your WebsiteJS: 6.52 KB -> 2.43 KB (62.74%) CSS: 91.57 KB -> 21.12 KB (76.93%)

HowCompressing HTTP Response to optimal sizes.The Browser then decompress to render.

Compression

Formats:Gzip, Deflate, SDCH

What to CompressBiggest savings were made on text-based files Don’t try to compress PDF, zip, and image files

Tools:IIS Web ServerProgrammatically

Compression

SUREInternal Training

Demo

How?Server instructs the browser to cache static content

What can be cached

Images, scripts, styles, Ajax calls

Empty Cache VS. Primed Cache

HTTP Caching

HTTP Caching

SUREInternal Training

Demo

What is minification?What is bundling?Why should I minify or bundle my static files?

Less Number of requests (better performance).jQuery 225.78 KB -> 93.28 KB (58.68%)jQuery Mobile 240 -> KB 91 KB (62%)JavaScript can be minified and obfuscated to reduce the file size even further

Tools

Minifying and Bundling static files

The overall page weight and number of HTTP requests before and after minificationand bundling

How much it enhances

SUREInternal Training

Demo

Positioning CSS and JavaScript in a web page for best performance

HTML Optimization

JavaScript on top blocks the browser’s ability to download components in parallel.

HTML Optimization

The importance of image optimizationOnline and command line image optimization toolsAutomatic data URIsUse CSS Sprites for icons and small images

Image Optimization

Allows users to access content on servers that are relatively close to them, minimizing the distance a request travels and reducing your site’s web page load times.

improves your chances of serving the same website experience to all your users, regardless of their location.

Content Delivery Network (CDN)

SUREInternal Training

Bundling & Minification + Compression + Caching + HTML Optimization + Image Optimization = High Performance Website

Server Side Best Practices in building high performance web apps

ASP.Net Specifc Optimization and Best PracticesServer Caching, and distributed cachingMessage Queuing ConceptsDatabase Offloading IdeasSession ManagementPerformance MonitoringInfrastructure optimizations

Next Session

ReferencesBook: Fast ASP.Net Websites (Manning, 2013)Book: High Performance Web Sites (O’Reilly, 2007)Book: Ultra Fast ASP.Net Websites (Apress, 2012)Yahoo! Performance Rules https://developer.yahoo.com/performance/https://github.com/ligershark/webdevchecklist.comPerformance Optimize Your ASP.NET Web App https://channel9.msdn.com/Events/TechEd/NorthAmerica/2014/DEV-B418#fbid=

SUREInternal Training

Thank You