Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Modelling Web Performance Optimization - FFSUx


Published on

Ideal web page performance
How to maximize your content view with minimal attention span of your viewers?
Impact of page performance on Business metrics
Profiling a Http request
Browser Architecture, Critical Rendering Path
Applying FFSUx to get optimal webpage performance.

Published in: Technology
  • Be the first to comment

Modelling Web Performance Optimization - FFSUx

  1. 1. Everything you ever need to know about Front end Performance Optimization – Tools, Techniques and Methodology Haribabu Nandyal (
  2. 2.
  3. 3. “Browsing should be as simple and as fast as turning a page in a magazine”
  4. 4. “Browsing should be as “simple” and as “fast” as turning a page in a magazine”
  5. 5. Performance impact on business metrics
  6. 6. Website Response time (+/-) Result Amazon +100 ms 1% drop in sales Yahoo +400 ms 5-9% drop in requests Google +500 ms 20% drop in requests Bing +2000 ms 4.3% drop in revenue/user Shopzilla -4800 ms 7-12% increase in revenue 25 % increase in page views Mozilla -2200 ms 15.4% increase in downloads Google Maps Reduced the file volume by 30% 30% increase in map requests Walmart -100 ms 1% increase revenue Performance impact on business metrics
  7. 7. • Higher search ranking resulting in increased Customer traffic • Higher page views. • Better Conversion Rate resulting in increased Revenue • Improved Ux and higher Customer Satisfaction • Retention of Customers • Reduced cost (Cost Optimization e.g: Infrastructure costs) Business need for great Performance!
  8. 8. Why the slowdown? The median ecommerce page contains 99 resources (images, JS, CSS etc). A year ago, it was 93 resources. Each of this additional resource incurs latency and adds up to slower load times. A median page size is 1436 KB which was 1094 KB a year ago. An increase of 31% in page size.
  9. 9. Increase in average no of requests and page size
  10. 10. Anatomy of a HTTP Request
  11. 11. Profiling a HTTP Request 85-90% of website rendering depends on the performance of Network and Client Side
  12. 12. Client Side Performance Optimization • Earlier website performance was only about optimizing the server- side and reducing the generation-time of the HTML. But server- side does not seem to be the main issue. • Yahoo found out that on an average only 10-20% of the loading time is spent on the server-side; 80-90% is spent at the client-side Average loading time of a website
  13. 13. Web Page Generation – Desktop vs Mobile Http measurements of where time is spent in generating a page for top 50 k sites.
  14. 14. Usual suspects for Performance bottlenecks Performance bottlenecks because of any/all of these levels: • Server layer • Application Architecture/Coding/Design • Network latency • Database performance • Operating Systems Performance Tuning – zone of focus
  15. 15. User Interface: Address bar , back/forward button , bookmarking menu Browser Engine: “Bridge” between user interface (UI) and rendering engine kernel , plug-ins , extensions , add-ons Rendering Engine: It interprets the HTML, XML, and JavaScript that comprises a given URL and generates the layout that is displayed in the UI. So HTML parsers, XML parsers, JS interpreter are the key components of the Rendering Engine. Data Persistence: Stores data on the client machine. Eg: Cookies, HTML, Cache Browser Architecture
  16. 16.  Starts receiving the data. First packet is about 14 k bytes.  Parses the HTML and starts constructing the DOM.  Starts downloading of assets (CSS, Images, JS) – in the same order as specified in the HTML source code.  Parses CSS and constructs CSS OM.  Constructs the Render tree (DOM + CSS OM)  Calculates layout size and position.  Paints and composites the layers. Submitted the request? - Let us go behind the scene
  17. 17. Parsing of the HTML document is what constructs the Document Object Model (DOM). In parallel, the CSS Object Model (CSSOM) is constructed from the specified stylesheet rules. DOM and CSSOM are then combined to create the "render tree," at which point the browser has enough information to perform a layout and paint something to the screen. Critical Rendering Path
  18. 18. Critical Rendering Path JavaScript execution can issue a synchronous doc.write and block DOM parsing and construction. Similarly, scripts can query for a computed style of any object, which means that JavaScript can also block on CSS. Since JS can change the DOM and the CSS OM, when the browser sees a <script> tag it will block downloading of other assets until the JS has been downloaded and executed
  19. 19. Rendering Engines
  20. 20. Faster Fewer Smaller FFSUx model UX Tools, Techniques and Methodology Faster content delivery, Fewer in count, Smaller in size, good User Experience
  21. 21. Faster content delivery: - Reduce Round Trip Time (RTT)  Reduce DNS lookup  Use a CDN (Amazon CloudFront, MaxCDN, Limelight, Akamai)  Prefetch and Postfetch  Domain Sharding and Parallelize requests  Use <link> tag instead of @import  Externalize JS and CSS
  22. 22. Fewer in count: - Reduce no of http requests/CSS/JS/Images  Reduction in number of Round Trips  CSS Spriting  Remove duplicate scripts  Configure Entity tags  Enable caching  Set expiry dates / Add an expires header  Avoid Redirects
  23. 23. Smaller in size:  Compression of html/CSS/JS (gzip, deflate)  Proper image format (Jpeg, WebP, PNG?)  Minification of html/JS User Experience  Time To Interact (TTI)  CSS on top  JS in the bottom  Asynchronous JS  Above the fold rendering  Progressive Image loading
  24. 24. Request without DNS Prefetch Total Time of request = DNS lookup + Initial Connection + Time to First Byte + Content Download. Request with DNS Prefetch Total time of request = Initial Connection + Time to First Byte + Content Download. Using DNS prefetch can reduce DNS lookup time by pre resolving DNS (Domain Name Server).Google PageSpeed has incorporated DNS prefetch (pre resolving DNS) as one of performance improvement methods. Typical DNS lookup time is from 20 ms to 120 ms. Reduce DNS lookups
  25. 25. Resource Request Waterfall
  26. 26. DNS Server Hierarchy
  27. 27. Most requests are now handled by the CDN. So the origin server can handle greater no of users since each user is making fewer requests to the main server How CDN speeds up resource download?
  28. 28. Preloading of Components • Preload components you’ll need in the future • Unconditional preload : Xero login page preloads all core components so that the dashboard experience is better • Conditional preload : Often based on where you think a user might go to next
  29. 29. Parallelize downloads across hostnames
  30. 30. Parallelize downloads across hostnames Browser Max connections per hostname Opera Mini 11 Firefox 27 6 Chrome 34 6 Safari 7.0.1 6 iPad 5 6 iPhone 5 6 Android 4 6 IE 10 8 IE 11 13
  31. 31. When CSS @import is used from an external stylesheet, browser is unable to download stylesheets in parallel. This results in additional round-trips to the overall page load. If first.css contains, @import url("second.css") The browser must download, parse, and execute first.css before it is able to discover that it needs to download second.css. Use <link> tag instead of @import. <link rel="stylesheet" href="first.css"> <link rel="stylesheet" href="second.css"> This allows the browser to download stylesheets in parallel, which results in faster page load times. CSS@Import vs <link>
  32. 32. Reduce HTTP Requests Repeat the same for CSS: Before: <script src="jquery.js"></script> <script src="jquery.twitter.js"></script> <script src="jquery.cookie.js"></script> <script src="myapp.js"></script> <link href="all.css" rel="stylesheet" type="text/css”/> After: <script src="all.js" type="text/javascript"> </script>
  33. 33. How Spriting works: • Finds background images • Groups images into sprites • Generates the sprite • Injects the sprite into the current page • Recomputes the CSS background-position • Combines all small images into one large image • Use CSS to control displaying of each image •, CSS Sprites
  34. 34. • Webservers can be configured to send an ETag (entity tag) header in file responses. This ETag can be a Md5 hash of the file. Browser will send the ETag from its cache in its next request for the same file. • The server checks if the ETag is still valid (the file hasn’t changed). If valid server only sends a 304 code (Not Modified ) without sending the file again. If the file has changed, the server sends the whole file as usual. With this technique a lot of traffic can be saved, but there’s still a HTTP to be made. Entity Tag
  35. 35. • Use Expires header to tell the browser how long to keep the resource. • Browsers won't fetch the resource again until its expiry. • This is perfect for static files when it’s known that they won’t change during the time specified in the Expires header. Expires Header
  36. 36. Impact of Cookies on Response Time Cookie Size Time Delta 0 bytes 78 ms 0 ms 500 bytes 79 ms +1 ms 1000 bytes 94 ms +16 ms 1500 bytes 109 ms +31 ms 2000 bytes 125 ms +47 ms 2500 bytes 141 ms +63 ms 3000 bytes 156 ms +78 ms Website Total Cookie Size Amazon 60 bytes Google 72 bytes Yahoo 122 bytes CNN 184 bytes YouTube 218 bytes MSN 268 bytes eBay 331 bytes MySpace 500 bytes Cookie sizes across websites
  37. 37. Reduce cookie weight • Cookie’s are sent back with every request • Keep cookie size small and only store what’s required – use server-side storage for everything else • Consider cookie free domains for static content Keep it clean • Always asynchronous • Use JSON over XML  Accessing JSON faster and cheaper  Less overhead compared to XML • Use GET requests over POSTs wherever possible  POST is a 2-step process: send headers, send body  POST without a body is essentially a GET anyway
  38. 38. • Add an Expires header  Not just for images – should be used on all static content  Set a “Never expire” or far future expires policy if you can  Reduces HTTP requests – once component is served, the browser never asks for it again  Date stamping in file names makes it easier “Empty cache” means the browser has to request the components instead of pulling them from the browser disk cache. Maximize the cache
  39. 39. Gzip Deflate Size Size Savings Size Savings Script 3.3K 1.1K 67% 1.1K 66% Script 39.7K 14.5K 64% 16.6K 58% Style Sheet 1.0K 0.4K 56% 0.5K 52% Style sheet 14.1K 3.7K 73% 4.7K 67% Gzip compresses better and is supported in more no of browsers Gzip vs. Deflate
  40. 40. Spot the difference Original PNG: 75,628 bytes After compression: 19,996 bytes (73% smaller)
  41. 41. <img src="photos/awesome_cat.png" width="800"> awesome_cat.png 350 KB awesome_cat.jpg 80 KB awesome_cat.webp 60 KB Note: .webp - supported on chrome/opera/android browsers. Servers can do UA or Accept Check to send the .jpg or .webp image based on the browser. Optimize images Images are one of the greatest impediments for performance.  Either in the wrong format  Uncompressed  Not optimized to load progressively  All of the above.
  42. 42. Minification is the process of removing all unnecessary characters from source code, without changing its functionality. Includes white spaces, new line characters, comments, and sometimes block delimiters, which adds readability to the code but are not required for execution. Minify all static content (CSS, JavaScript, XML, JSON, HTML) Reduced 24% from the original sizeTools: JSMin, CSSTidy, YUI Compressor
  43. 43. Analysis of the Alexa top 1000 sites found:  42% don't gzip  44% have more than 2 css files  56% serve css from a cookied domain  62% don't minify  31% have more than 100k size css Top 1000 retail sites  50% aren't doing both keep-alive and compression (the 2 easiest things!!) Industry Observations: Alexa
  44. 44. Ten fastest websites based on TTI Time to Interact (TTI) is a interesting metric for user interaction. TTI is defined as the point at which a page’s primary content has been rendered and ready for interaction.
  45. 45. CSS external and on top ● Move all inline CSS to external style sheets for both reuse and caching ● Put all style sheet references at the top JavaScript external and below • Promotes better script design • Push scripts as low as possible • Be pragmatic – think about splitting JavaScript into “must be loaded” and “can be loaded on demand” • Scripts will block both downloading and rendering until parsed • Remove duplicate scripts (IE has a habit of downloading them again)
  46. 46.  YSlow  PageSpeed  WebPagetest (      Tools to Grade performance of a website
  47. 47.  Time to Start Render  Time to Display  Time to Interact  Bounce Rate  Time on Site  Pages Per Visit  Conversion Rate  Abandonment Rate  Order Value  Revenue 10 user Engagement Metrics
  48. 48. YSlow Yahoo’s YSlow is a plugin for Firebug which can test a website for many basic optimizations. The tests are based on the best practices from Yahoo’s Performance team. Grades performance – not about response times but about how well a site has adopted the suggested techniques.
  49. 49. Google Page Speed Google Page Speed is also Firebug plugin based on performance rules. It also includes minifying of HTML, CSS and JS files.
  50. 50. Google Page Speed
  51. 51.
  52. 52. Google Service - PageSpeed
  53. 53. GTMetrix – combination of Yslow and PageSpeed –
  54. 54. Quick Recap
  55. 55. Premature Optimization is the root of all evil Donald Knuth Performance is not a checklist, it is a continuous process Ilya Grigorik Parting Thoughts: Performance Tuning = Front End + Back End
  56. 56. Haribabu Nandyal (