building high performance websites - session-1
DESCRIPTION
Building High Performance Websites Session-1: Focus on Client side best practices and optimizationsTRANSCRIPT
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