Your SlideShare is downloading. ×
Ui perf
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Ui perf


Published on

Overview of some Web UI performance improvements by Mr. Alvin De Leon

Overview of some Web UI performance improvements by Mr. Alvin De Leon

Published in: Technology

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. UI Performance Page Loading Optimization
  • 2. Best Practices
    • Optimizing caching — keeping your application's data and logic off the network altogether
    • Minimizing round-trip times — reducing the number of serial request-response cycles
    • Minimizing request size — reducing upload size
    • Minimizing payload size — reducing the size of responses, downloads, and cached pages
    • Optimizing browser rendering — improving the browser's layout of a page
  • 3. Optimize caching
    • HTTP caching allows these resources to be saved, or cached, by a browser or proxy. Once a resource is cached, a browser or proxy can refer to the locally cached copy instead of having to download it again on subsequent visits to the web page. Thus caching is a double win: you reduce round-trip time by eliminating numerous HTTP requests for the required resources, and you substantially reduce the total payload size of the responses. Besides leading to a dramatic reduction in page load time for subsequent user visits, enabling caching can also significantly reduce the bandwidth and hosting costs for your site.
  • 4. Optimize caching
    • Leverage browser caching - Setting an expiry date or a maximum age in the HTTP headers for static resources allows the browser to load previously downloaded resources from local disk rather than over the network.
    • Leverage proxy caching - Enabling public caching in the HTTP headers for static resources allows the browser to download resources from a nearby proxy server rather than from a remoter origin server.
  • 5. Minimize round-trip times
    • Round-trip time (RTT) is the time it takes for a client to send a request and the server to send a response over the network, not including the time required for data transfer. That is, it includes the back-and-forth time on the wire, but excludes the time to fully download the transferred bytes (and is therefore unrelated to bandwidth). For example, for a browser to initiate a first-time connection with a web server, it must incur a minimum of 3 RTTs: 1 RTT for DNS name resolution; 1 RTT for TCP connection setup; and 1 RTT for the HTTP request and first byte of the HTTP response. Many web pages require dozens of RTTs.
  • 6. Minimize round-trip times
    • Minimize DNS lookups - Reducing the number of unique hostnames from which resources are served cuts down on the number of DNS resolutions that the browser has to make, and therefore, RTT delays.
    • Minimize redirects - Minimizing HTTP redirects from one URL to another cuts out additional RTTs and wait time for users.
    • Combine external JavaScript - Combining external scripts into as few files as possible cuts down on RTTs and delays in downloading other resources.
  • 7. Minimize round-trip times
    • Combine external CSS - Combining external stylesheets into as few files as possible cuts down on RTTs and delays in downloading other resources.
    • Optimize the order of styles and scripts - Correctly ordering external stylesheets and external and inline scripts enables better parallelization of downloads and speeds up browser rendering time.
    • Parallelize downloads across hostnames - Serving resources from four or five different hostnames increases parallelization of downloads.
  • 8. Minimize request size
    • Every time a client sends an HTTP request, it has to send all associated cookies that have been set for that domain and path along with it. Most users have asymmetric Internet connections: upload-to-download bandwidth ratios are commonly in the range of 1:4 to 1:20. This means that a 500-byte HTTP header request could take the equivalent time to upload as 10 KB of HTTP response data takes to download. The factor is actually even higher because HTTP request headers are sent uncompressed. In other words, for requests for small objects (say, less than 10 KB, the typical size of a compressed image), the data sent in a request header can account for the majority of the response time.
  • 9. Minimize request size
    • Minimize cookie size - Keeping cookies as small as possible ensures that an HTTP request can fit into a single packet.
    • Serve static content from a cookieless domain - Serving static resources from a cookieless domain reduces the total size of requests made for a page.
  • 10. Minimize payload size
    • The amount of data sent in each server response can add significant latency to your application, especially in areas where bandwidth is constrained. In addition to the network cost of the actual bytes transmitted, there is also a penalty incurred for crossing an IP packet boundary. (The maximum packet size, or Maximum Transmission Unit (MTU), is 1500 bytes on an Ethernet network, but varies on other types of networks.) Unfortunately, since it's difficult to know which bytes will cross a packet boundary, the best practice is to simply reduce the number of packets your server transmits, and strive to keep them under 1500 bytes wherever possible.
  • 11. Minimize payload size
    • Enable gzip compression - Compressing resources with gzip can reduce the number of bytes sent over the network.
    • Remove unused CSS - Removing or deferring style rules that are not used by a document avoid downloads unnecessary bytes and allow the browser to start rendering sooner.
    • Minify JavaScript - Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time.
  • 12. Minimize payload size
    • Defer loading of JavaScript - Deferring loading of JavaScript functions that are not called at startup reduces the initial download size, allowing other resources to be downloaded in parallel, and speeding up execution and rendering time.
    • Optimize images - Properly formatting, sizing, and losslessly compressing images can save many bytes of data.
    • Serve resources from a consistent URL - It's important to serve a resource from a unique URL, to eliminate duplicate download bytes and additional RTTs.
  • 13. Optimize browser rendering
    • Once resources have been downloaded to the client, the browser still needs to load, interpret, and render HTML, CSS, and Javascript code. By simply formatting your code and pages in ways that exploit the characteristics of current browsers, you can enhance performance on the client side.
  • 14. Optimize browser rendering
    • Use efficient CSS selectors - Avoiding inefficient key selectors that match large numbers of elements can speed up page rendering.
    • Avoid CSS expressions - CSS expressions degrade rendering performance; replacing them with alternatives will improve browser rendering for IE users. This best practices in this section apply only to Internet Explorer 5 through 7, which support CSS expressions.
    • Put CSS in the document head - Moving inline style blocks and <link> elements from the document body to the document head improves rendering performance.
    • Specify image dimensions - Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.
  • 15. Tips and Tricks
    • Remove all 404 resources.
      • Access logs to check 404 resources.
      • grep 'HTTP/1.1&quot; 404' access.log
    • Put CSS at the top, and CSS first before JS
      • Put JS at the end of the page
    • Set a reasonable buffer size for JSP for eager loading if possible divisible by 1500 bytes. <%@ page buffer=&quot;36kb&quot; %>
  • 16. Tips and Tricks
    • Enable GZIP using GZIP filter for text content types
      • Pre GZIP Text static resources (Custom ant task)
      • Compress images
      • Page speed provides you with the compressed image
    • Minify JavaScript, CSS or even dynamic (JSP) contents
      • YUI compressor from Yahoo!
      • Closure Tools from Google
      • Combining of external JavaScript and CSS resources
      • Custom ant tasks
      • CSS sprites
  • 17. Tips and Tricks
    • Browser caching using http header
      • Cache-Control response header with at least one month expiration
      • Ideally for static resources, and can be done also on get Ajax calls
      • Caching of asynchronous call results (page scope)
    • Progressive loading using Ajax
    • Deferred loading
  • 18. Tips and Tricks
    • Use performance analyzer tools
      • Yslow! from Yahoo!
      • Page speed from Google
  • 19. Possible UI Performance Drawback
    • Maintainability
      • Support for JavaScript debugging is now impossible
        • Minify JavaScript and CSS resources
        • Combining of external JavaScript and CSS resources
  • 20. References