Downloaded 11 times
Uploaded byUsama Nada
Building High Performance Websites - Session-1
This document provides tips for optimizing web apps for performance. It recommends tools like YSlow and PageSpeed Insights for analyzing page speed performance. Compressing files like JavaScript and CSS can significantly reduce file sizes. Caching static content on the server and using compression methods like Gzip and Deflate can improve performance. Minifying and obfuscating JavaScript code can further reduce file sizes. Links to additional resources on web performance are also included.
More Related Content
![[jqconatx] Adaptive Images for Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv14-130911193737-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites](https://cdn.slidesharecdn.com/ss_thumbnails/otimizacoesclientside-qcon2011-sergio-110910194248-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Building High Performance Websites - Session-1
Building High Performance Websites - Session-1
- 1.
- 2. Giving Users THEBest Experience
- 3. In building THEperfect web apps
- 4. Your tools areimportant
- 5.
- 9. • • homepage was reduced 100 KB to 70KB, traffic went up 10% in the first week and an additional 25% in the following three weeks • •
- 12.
- 13.
- 15.
- 16. http://yslow.org/ https://developers.google.com/speed/pagespeed/ http://closure-compiler.appspot.com/home http://yui.github.io/yuicompressor/ http://smush.it/ http://vswebessentials.com/ http://webdevchecklist.com/
- 17. JS: 6.52 KB-> 2.43 KB (62.74%) CSS: 91.57 KB -> 21.12 KB (76.93%)
- 18. Gzip, Deflate, SDCH Biggest savings were made on text-based files Don’t try to compress PDF, zip, and image files
- 19.
- 20. Server instructs thebrowser to cache static content Images, scripts, styles, Ajax calls
- 22.
- 23. JavaScript can beminified and obfuscated to reduce the file size even further
- 25.
- 30.
- 32.
- 33. SURE Internal Training Thank You
Editor's Notes
- #7 Defining Performance. Performance Toolbox HTTP Compression Caching Bundling and Minification HTML Optimization Tips Image Optimization Tips Content Delivery Network
- #8 Steve Souders, the head performance engineer at Google, coined the term the Performance Golden Rule in his book High Performance Web Sites (O’Reilly Media, 2007). when the Google Maps home page was reduced in size from 100 KB to 70-80 KB, traffic went up 10% in the first week and an additional 25% in the following three weeks In 2009, a Google blog1 claimed that more than 99 human years are wasted every day because of uncompressed content. Such content wastes bandwidth and increases the amount of time users spend waiting for a web page to load.
- #10 Steve Souders, the head performance engineer at Google, coined the term the Performance Golden Rule in his book High Performance Web Sites (O’Reilly Media, 2007). when the Google Maps home page was reduced in size from 100 KB to 70-80 KB, traffic went up 10% in the first week and an additional 25% in the following three weeks In 2009, a Google blog1 claimed that more than 99 human years are wasted every day because of uncompressed content. Such content wastes bandwidth and increases the amount of time users spend waiting for a web page to load.
- #11 Profile your website, analyzing it so you can understand where the performance issues are and why they are there. (tools) Identify appropriate techniques, learning what best suits your situation and how you can enhance your website’s speed. (the results from profiling, you can identify areas that need improvement) Bottlenecks Implement changes, having determined which techniques best suit your website. Monitor your site, tracking for any signs of decreased speed. (Only by monitoring your site will you be able to maintain this optimized level of performance.)
- #12 you can see that the HTML document is a very small percentage of the overall download. As a back-end developer, you probably think the first place to optimize your website is deep in the server-side code. This may include optimizing code or indexing the database. Surprisingly, users spend most of their time waiting for the other components to download! Golder Rule: Using this rule, you can deduce that if 80% of the download time is spent on the front end, and you cut that in half, you reduce response times by 40%. If you cut the back-end performance in half, you gain only a 10% increase in response times.
- #14 HTTP requests and responses contain data that is readable to the human eye Response Status Code is 200, which means it was successful. The Expires field tells the browser how long it’s allowed to keep the component. Content-Type is text/html. Content-Encoding field tells the browser that the server is sending data back that’s encoded with Gzip. The Vary field instructs the proxies to cache two versions of the resource: one compressed and one uncompressed. Status Codes 200–2xx Success 300–3xx Redirection 400–4xx Client Error 500–5xx Server Error
- #15 In 2007, Steve Souders, at the time Chief Performance Yahoo! at Yahoo!, created a set of 14 rules for faster front-end performance. Book High Performance Web Sites, and every single one is widely accepted as best practice in web performance today. As the web has evolved, the number of rules has increased https://developer.yahoo.com/performance/
- #17 YSlow is a great add-on for many browsers and it offers suggestions for improving a web page’s performance. The tool runs against a set of 23 rules that affect web page performance. Google PageSpeed It’s very similar to YSlow and was built using the same performance rules set out by the Yahoo! performance team. PageSpeed tool provides a very simple interface that suggests only the improvements you need to make. Unlike YSlow, it doesn’t give you a breakdown of the components or the empty versus primed cache view. Each tool provides its own rule set and logic to determine the score profiling tool running in the background. Don’t forget to turn it off when you aren’t using it!
- #18 Request Accept-Encoding Header Response Content-Encoding Header Prefer to use Vary Header to instruct proxies to cache different versions for different content encoding header values
- #20 Show IIS Compression IIS CPU usage Throttling When CPU usage gets beyond a certain level, IIS will automatically stop compressing pages. When usage drops to an acceptable level, the CPU will start compressing pages again. Beautiful IIS Once IIS has compressed static content, it caches it, which increases compression performance. Dynamic content typically is associated with file types that change often and can be produced by server side code. Examples include JSON, XML, and ASPX. Dynamic content is processed the same way as static content; the only difference is that once it’s been processed, it isn’t cached to disk. Configuration can be from IIS directly or from web.config <system.webserver> minFileSizeForComp in IIS 7.5 is 2,700 bytes default You can specify the CPU percentage at which dynamic compression will be disabled by adding and setting the optional DynamicCompressionDisableCpuUsage Applying compression to your application with IIS and Web.config is the simplest and most effective way of optimizing your website but you can do it from application layer
- #21 Empty cache vs. primed cache The first time you visit a website, you won’t have a cache of that site. But as you continue to browse the website, the browser cleverly stores the components you download in this temporary folder cache. The next time you visit the same website, you’ll have a primed cache that contains the website’s cached items. which speeds up your download time.
- #22 Expires header used to notify the web client that it can use the current copy of a component until the specified expiration date. It uses an exact date and time to specify an expiration. Cache-Control is an alternative to the Expires header, and it works with time slightly differently. uses a max-age in seconds to determine the expiration date from the time it was requested. The Vary field instructs the proxies to cache two versions of the resource: one compressed and one uncompressed. Caching considerations File versioning
- #23 IIS will automatically determine when to use the Expires header or when to use the Cache-Control header. We can easily set the Expires headers in either our IIS web server or within the Web.config file of our application. If nothing has changed, the server will respond with a 304 HTTP status code notifying the browser that it has not been modified and that it can use the version stored in the browser’s cache. In IIS you can choose to apply the Expires headers to individual folders (CSS files, JavaScript files, images) Caching in Web.Config
- #26 IIS will automatically determine when to use the Expires header or when to use the Cache-Control header. We can easily set the Expires headers in either our IIS web server or within the Web.config file of our application. If nothing has changed, the server will respond with a 304 HTTP status code notifying the browser that it has not been modified and that it can use the version stored in the browser’s cache. In IIS you can choose to apply the Expires headers to individual folders (CSS files, JavaScript files, images) Caching in Web.Config
- #27 The position of CSS in an HTML document has less to do with download times, and more to do with how the browser reacts and renders the page. It’s all about perceived speed for the user!
- #28 JavaScript on top blocks the browser’s ability to download components in parallel. Browsers run JavaScript in a single thread, so if a script is executing, the browser might not be able to start other downloads.
- #29 Crushing PNGs Stripping JPEG Metadata Converting GIF to PNG Optimizing GIF Animations
- #31 Before adding any page optimizations: http://before.azurewebsites.net/ After adding page optimizations in this book: http://after.azurewebsites.net/