Welcome
Web Site Optimization Presentation By: Sunil Patil
Our sponsors:
AGENDA <ul><li>AGENDA FOR THE SESSION </li></ul><ul><ul><li>What is web site optimization ? </li></ul></ul><ul><ul><li>Why...
What is web site optimization? <ul><li>WHAT IS WEB SITE OPTIMIZATION </li></ul><ul><ul><li>End user cares about how much t...
Connected.atech.com Time to generate HTML 0.9 sec Time to render page 40 sec.
Advantages of web site optimization <ul><li>WHY YOU SHOULD THINK ABOUT OPTIMIZING YOUR WEBSITE </li></ul><ul><ul><li>Less ...
Lessons Learned <ul><li>LESSONS LEARNED FROM WEBSITE OPTIMIZATION EXPERIENCE AT CLIENT </li></ul><ul><ul><li>Load testing ...
Make fewer request 1
What is parallel connection ? <ul><li>HOW PARALLEL CONNECTIONS IN BROWSER WORKS </li></ul><ul><ul><li>The  Http 1.1 specif...
Number of parallel connection <ul><li>NUMBER OF PARALLEL CONNECTIONS DEPEND ON BROWSER </li></ul><ul><ul><li>Older browser...
Effect of number of parallel connections 2   parallel connections 6 parallel connections
Script blocks parallel download <ul><li>SCRIPT DOWNLOAD IS STOP ALL EVENT IN SOME BROWSER </li></ul><ul><ul><li>When a bro...
Effect of browsers that block everything for scitpt <ul><li>Browsers that blocks everything while downloading script </li>...
How to improve parallelization <ul><li>WHAT CAN WE DO TO ACHIEVE MORE PARALLELIZATION </li></ul><ul><ul><li>Browsers limit...
Use caching 2
Expiry based caching <ul><li>WHAT IS EXPIRY BASED CACHING ? </li></ul><ul><ul><li>Setting expiry caching header instructs ...
What happens if you don’t set caching headers <ul><li>HOW BROWSERS AND CACHES DEAL WITH ABSENCE OF EXPIRY RELATED HEADER <...
What can you do to improve caching ? <ul><li>USE AGGRESSIVE CACHING OF STATIC RESOURCES </li></ul><ul><ul><li>If you don’t...
Caching static resources <ul><li>HOW TO CONFIGURE CACHING AT HTTP SERVER LEVEL </li></ul><ul><ul><li>Apache HTTP Server ha...
Caching dynamic resources <ul><li>HOW TO CONFIGURE CACHING OF RESOURCES SERVRED BY WEBSPHERE </li></ul><ul><ul><li>The fil...
Validation based caching <ul><li>WHAT IS VALIDATION BASED CACHING ? </li></ul><ul><ul><li>When a static HTML file is serve...
Validation based caching <ul><li>HOW CACHE VALIDATION WORKS </li></ul><ul><ul><li>The HTTP Specification has concept of Co...
How validation caching works
Configure ETag <ul><li>WHY YOU SHOULD CONSIDER DISABLING ETAG </li></ul><ul><ul><li>ETags are introduced to help with mult...
Leverage proxy caching <ul><li>HOW TO CACHE RESOURCE ACROSS USERS </li></ul><ul><ul><li>Big portion of internet traffic go...
Minimize request overhead 3
HTTP Requst <ul><li>WHAT HAPPENS WHEN BROWSER REQUESTS A RESOURCE </li></ul><ul><ul><li>When you try accessing a resource ...
Reduce DNS resolution time <ul><li>REDUCE DNS RESOLUTION TIME </li></ul><ul><ul><li>Before a browser establishes a connect...
Use HTTP Persistent Connection <ul><li>WHAT IS HTTP PERSISTENT CONNECTION AND WHY YOU SHOULD CARE </li></ul><ul><ul><li>We...
Persistent Connection
Size of HTTP Request <ul><li>WHY SIZE OF HTTP REQUEST MATTERS ? </li></ul><ul><ul><li>Most users have asymmetric connectio...
Request for static resource
Minimize cookie size <ul><li>HOW YOU CAN REDUCE COOKIE SIZE </li></ul><ul><ul><li>Enterprise applications need at least fe...
Minimize response size 4
Compress response <ul><li>USE GZIP FOR COMPRESSING RESPONSE </li></ul><ul><ul><li>Compressing resources with GZip will red...
Configure GZip on Apache HTTP Server <ul><li>HOW TO CONFIGURE APACHE HTTP SERVER FOR GZIP </li></ul><ul><ul><li>Apache HTT...
Minification <ul><li>MINIFY TEXT FILES </li></ul><ul><ul><li>Minification is the practice of removing unnecessary characte...
Minify JavaScript <ul><li>WHY MINIFY JAVASCRIPT </li></ul><ul><ul><li>Compacting JavaScript code can save many bytes of da...
Minify CSS <ul><li>WHY MINIFY CSS </li></ul><ul><ul><li>Compacting CSS code can save many bytes of data and speed up downl...
Minify HTML <ul><li>WHY COMPACT/MINIFY HTML </li></ul><ul><ul><li>Compacting HTML code, including any inline JavaScript an...
Optimize Images <ul><li>WHY OPTIMIZE IMAGES </li></ul><ul><ul><li>Properly formatting and compressing images can save many...
Optimize browser rendering 5
What is optimizing browser rendering <ul><li>OPTIMIZE BROWSER RENDERING </li></ul><ul><ul><li>Once resources have been dow...
Tools 6
Testing tools <ul><li>WHAT TOOLS SHOULD YOU USE FOR TESTING </li></ul><ul><ul><li>Traditional load testing tools like Load...
Yahoo YSlow
Google Page speed
Charles Web Debugging Proxy
Reference <ul><li>MORE INFORMATION </li></ul><ul><ul><li>My Blog ( http://wpcertification.blogspot.com/search/label/client...
<ul><li>THANK YOU FOR WATCHING </li></ul><ul><li>CONTACT INFO: </li></ul><ul><li>ASCENDANT TECHNOLOGY, LLC </li></ul><ul><...
Upcoming SlideShare
Loading in …5
×

Web Site Optimization

3,738 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,738
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
71
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Applicable to developer and administrators on server side, J2EE applications in WebSphere. Not going to get into details on JavaScript, CSS,..
  • What is perceived performance, end user cares about perceived performance, administrators, developers care about time it to takes to generate HTML
  • Web Site Optimization

    1. 1. Welcome
    2. 2. Web Site Optimization Presentation By: Sunil Patil
    3. 3. Our sponsors:
    4. 4. AGENDA <ul><li>AGENDA FOR THE SESSION </li></ul><ul><ul><li>What is web site optimization ? </li></ul></ul><ul><ul><li>Why you should worry about web site optimization ? </li></ul></ul><ul><ul><li>Suggestions for optimizing web site </li></ul></ul><ul><ul><ul><li>Make fewer requests </li></ul></ul></ul><ul><ul><ul><li>Use Caching </li></ul></ul></ul><ul><ul><ul><li>Minimize request overhead </li></ul></ul></ul><ul><ul><ul><li>Minimize response size </li></ul></ul></ul><ul><ul><ul><li>Optimize browser rendering </li></ul></ul></ul><ul><ul><li>Tools </li></ul></ul>
    5. 5. What is web site optimization? <ul><li>WHAT IS WEB SITE OPTIMIZATION </li></ul><ul><ul><li>End user cares about how much time it takes to render a page in his browser (Perceived performance) and how fast he can move from one page to another </li></ul></ul><ul><ul><li>When you access a page in browser, it performs following steps to render page </li></ul></ul><ul><ul><ul><li>Make request </li></ul></ul></ul><ul><ul><ul><li>Get HTML response (We focus mostly on this) </li></ul></ul></ul><ul><ul><ul><li>Parse HTML response </li></ul></ul></ul><ul><ul><ul><li>Find out resources (JS, CSS, Images) required on the page </li></ul></ul></ul><ul><ul><ul><li>Download resource </li></ul></ul></ul><ul><ul><ul><li>Parse resources </li></ul></ul></ul><ul><ul><ul><li>Execute resources </li></ul></ul></ul><ul><ul><li>During web site optimization, we try to optimize each of the above steps and try to improve the perceived performance of the web site </li></ul></ul>
    6. 6. Connected.atech.com Time to generate HTML 0.9 sec Time to render page 40 sec.
    7. 7. Advantages of web site optimization <ul><li>WHY YOU SHOULD THINK ABOUT OPTIMIZING YOUR WEBSITE </li></ul><ul><ul><li>Less than 15- 20 % of time is spent on generating and downloading html </li></ul></ul><ul><ul><ul><li>Improving this performance is not easy. It might require, </li></ul></ul></ul><ul><ul><ul><ul><li>Creating new architecture </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Re-fractoring code, introducing caching </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Tune backend </li></ul></ul></ul></ul><ul><ul><ul><li>If you improve this part by say 50 % overall gain will be 8-10% </li></ul></ul></ul><ul><ul><li>More than 80% of time is spent in downloading, parsing and executing resources </li></ul></ul><ul><ul><ul><li>Improving performance is easy </li></ul></ul></ul><ul><ul><ul><ul><li>Configuration changes at infrastructure level </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Additional tasks, guidelines during development and build phase </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Additional components at infrastructure level </li></ul></ul></ul></ul><ul><ul><ul><li>If you improve this part by 50 %, overall gain will be 40% </li></ul></ul></ul><ul><ul><li>Web pages are getting richer and complex (50 + resources, Ajax,..) </li></ul></ul>
    8. 8. Lessons Learned <ul><li>LESSONS LEARNED FROM WEBSITE OPTIMIZATION EXPERIENCE AT CLIENT </li></ul><ul><ul><li>Load testing does not fully capture all the performance related problems </li></ul></ul><ul><ul><ul><li>Business users, use older browsers compared to technical users </li></ul></ul></ul><ul><ul><ul><li>Location of users matters </li></ul></ul></ul><ul><ul><ul><li>Network speed matters </li></ul></ul></ul><ul><ul><li>Changing HTTP Server level configuration takes time </li></ul></ul><ul><ul><ul><li>HTTP Servers are normally shared across different teams </li></ul></ul></ul><ul><ul><ul><li>Application teams would be on different release cycle so they might not make changes in their code </li></ul></ul></ul><ul><ul><li>We under estimate the impact of web site optimization </li></ul></ul><ul><ul><li>As sites are getting richer, complex, there is greater need for web site optimization and lot of research is happening in this area </li></ul></ul>
    9. 9. Make fewer request 1
    10. 10. What is parallel connection ? <ul><li>HOW PARALLEL CONNECTIONS IN BROWSER WORKS </li></ul><ul><ul><li>The Http 1.1 specification says that a browser should allow at the most two parallel connections per host name. So if your web page has 50 resources then browser will start 2 downloads and queue the rest. Once a download is finished it will start next download from queue </li></ul></ul><ul><ul><li>The total round-trip time is N/X, where N is the number of resources to fetch from a host </li></ul></ul>
    11. 11. Number of parallel connection <ul><li>NUMBER OF PARALLEL CONNECTIONS DEPEND ON BROWSER </li></ul><ul><ul><li>Older browsers follow 2 parallel connections per host rule, but newer browsers use more parallel connections. </li></ul></ul><ul><ul><ul><li>IE 6/7 -> 2 </li></ul></ul></ul><ul><ul><ul><li>IE 8 -> 6 </li></ul></ul></ul><ul><ul><ul><li>Firefox 2 -> 2 </li></ul></ul></ul><ul><ul><ul><li>Firefox 3 -> 6 </li></ul></ul></ul><ul><ul><ul><li>Safari 3/ 4 -> 4 </li></ul></ul></ul><ul><ul><ul><li>Opera -> 4 </li></ul></ul></ul><ul><ul><ul><li>Chrome -> 4 </li></ul></ul></ul><ul><ul><li>Browser can bring down number of parallel connection in special cases </li></ul></ul><ul><ul><ul><li>If you use IE 8 on dial up connection it will use 2 parallel connections </li></ul></ul></ul>
    12. 12. Effect of number of parallel connections 2 parallel connections 6 parallel connections
    13. 13. Script blocks parallel download <ul><li>SCRIPT DOWNLOAD IS STOP ALL EVENT IN SOME BROWSER </li></ul><ul><ul><li>When a browser encounters a <script> tag in html, it will stop everything until it downloads the script , parses and executes the script </li></ul></ul><ul><ul><ul><li>Script tag might have a document.write(), which could affect the page content so browser waits for the script to download and execute </li></ul></ul></ul><ul><ul><ul><ul><li>If your script performs long executing operation onload then it could cause issues </li></ul></ul></ul></ul><ul><ul><ul><li>Scripts on page must be executed in proper order </li></ul></ul></ul><ul><ul><ul><ul><li>second.js might depends on first.js, so first.js must be executed before second.js </li></ul></ul></ul></ul><ul><ul><li>Some of the newer browser download scripts in parallel but execute them in order </li></ul></ul>
    14. 14. Effect of browsers that block everything for scitpt <ul><li>Browsers that blocks everything while downloading script </li></ul>
    15. 15. How to improve parallelization <ul><li>WHAT CAN WE DO TO ACHIEVE MORE PARALLELIZATION </li></ul><ul><ul><li>Browsers limit number of parallel connections per hostname, so easiest way to get around this problem will be to use multiple host names for downloading resources. You can use one hostname to download HTML and up to 4 hostnames for downloading other resources </li></ul></ul><ul><ul><ul><li>You can use www.static-atech.com for downloading resources. The www.staticatech.com will actually point to same server </li></ul></ul></ul><ul><ul><li>Combine files of similar type </li></ul></ul><ul><ul><ul><li>Use tools like Dojo Shrink Safe, YUI Compressor to combine multiple JS files </li></ul></ul></ul><ul><ul><ul><ul><li>Create a custom Dojo Build with additional classes, widgets,.. etc </li></ul></ul></ul></ul><ul><ul><ul><li>Use YUI Compressor to combine multiple .css files </li></ul></ul></ul><ul><ul><ul><li>Use Images Maps, CSS Sprites </li></ul></ul></ul><ul><ul><li>Inline smaller/non- cacheable resources </li></ul></ul>
    16. 16. Use caching 2
    17. 17. Expiry based caching <ul><li>WHAT IS EXPIRY BASED CACHING ? </li></ul><ul><ul><li>Setting expiry caching header instructs browser to load resource from disk instead of network. You can let browser know that it can cache response for certain period of time </li></ul></ul><ul><ul><ul><li>The HTTP 1.1 Specification introduced Cache-Control header, you can set Cache-Control: max-age=<noofseconds> and browser will cache the resource for <noofseconds>. If it gets another request for resource during that time it will just use it from disk </li></ul></ul></ul><ul><ul><ul><li>The HTTP 1.0 Specification had Expires header. You can set Expires: Fri, 1 Oct 2010 12:00:00 GMT(Date in GMT) format. The browser will cache the resource and use it till 1st October </li></ul></ul></ul><ul><ul><li>If you set both Cache-Control and Expires header then Cache-Control will take precedence, older HTTP clients don’t understand Cache-control </li></ul></ul><ul><ul><li>Resource might get purged from cache if the browser’s cache size is reached </li></ul></ul>
    18. 18. What happens if you don’t set caching headers <ul><li>HOW BROWSERS AND CACHES DEAL WITH ABSENCE OF EXPIRY RELATED HEADER </li></ul><ul><ul><li>If you don’t want browser to cache a resource then you must set Cache-Control: no-cache </li></ul></ul><ul><ul><li>If you don’t set either Expires or Cache-Control header, then browser or cache proxies can use heuristic expiration </li></ul></ul><ul><ul><ul><li>Http Clients will read value of Last-Modified and if the resource is not changed for 10 months it will cache it for 1 months (Expiration Time = Now + 0.1 * (Time since Last-Modified)) </li></ul></ul></ul><ul><ul><ul><ul><li>Firefox </li></ul></ul></ul></ul><ul><ul><ul><ul><li>IE 7 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Caching proxies </li></ul></ul></ul></ul><ul><ul><ul><li>Basic idea is if a resource is not changed for long time then it has less chance of changing in future </li></ul></ul></ul><ul><ul><li>Different clients might use different algorithms to come up with expiration time and result could be unpredictable </li></ul></ul>
    19. 19. What can you do to improve caching ? <ul><li>USE AGGRESSIVE CACHING OF STATIC RESOURCES </li></ul><ul><ul><li>If you don’t know when resource will be updated, you should configure your site so that HTML never gets cached and other resources get cached for long time (Months or years) </li></ul></ul><ul><ul><ul><li>HTML document has references to all the resources on the page, so if a resource is changed change its reference/URL in the HTML </li></ul></ul></ul><ul><ul><ul><ul><li>Change the file name Ex. From test.js to test_v1.js </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Change the folder Ex test.js to v1/test.js </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Create mod_rewrite rule. Ex v1/test.js, v2/test.js, v3/test.js gets mapped to test.js </li></ul></ul></ul></ul><ul><ul><li>If you know precisely when resource will be updated set Expires to that date </li></ul></ul>
    20. 20. Caching static resources <ul><li>HOW TO CONFIGURE CACHING AT HTTP SERVER LEVEL </li></ul><ul><ul><li>Apache HTTP Server has mod_expires module that you can be used to generate expiry based caching header in response </li></ul></ul><ul><ul><ul><li>Sets both Cache-control and Expires header </li></ul></ul></ul><ul><ul><ul><li>Can set headers for static content served by HTTP Server as well as static content returned by the WebSphere’s File Serving Servlet </li></ul></ul></ul><ul><ul><ul><li>Granular control, Can set headers globally or at URL, directory level </li></ul></ul></ul><ul><ul><ul><li>Can set different expiry rules based on response content type, file extension,.. </li></ul></ul></ul><ul><ul><ul><li>This configuration says that images should be cached for 3 month and other resources should be cached for 1 month </li></ul></ul></ul><ul><ul><ul><ul><li>ExpiresActive On ExpiresDefault &quot;access 1 month&quot; ExpiresByType image/gif &quot;access plus 3 month&quot; </li></ul></ul></ul></ul>
    21. 21. Caching dynamic resources <ul><li>HOW TO CONFIGURE CACHING OF RESOURCES SERVRED BY WEBSPHERE </li></ul><ul><ul><li>The file serving servlet (Used for serving static files) does not set expires/cache-control header. You can add ServletFilter in your web application </li></ul></ul><ul><ul><li>You can set Expires/Cache-Control headers in Servlet </li></ul></ul><ul><ul><li>WebSphere Portal server has navigatorservice.properties file that lets you configure overall portal level caching, caching for ATOM feed </li></ul></ul><ul><ul><li>You can configure WPS to make anonymous page cachable , process is complicated </li></ul></ul><ul><ul><li>The Portlet Specification 2.0 has concept of expiration cache, which you can use for setting Cache-control max-age and public/private header </li></ul></ul><ul><ul><ul><li>Set expiration-cache and cache-scope in portlet.xml </li></ul></ul></ul><ul><ul><ul><li>Use ResourceResponse.getCacheControl() to get object of javax.portlet.CacheControl and call its method setExpirationTime() and setPublicScope() methods </li></ul></ul></ul><ul><ul><ul><li>Use ResourceURL.setCacheability() so that WPS generates cache friendly URLs </li></ul></ul></ul>
    22. 22. Validation based caching <ul><li>WHAT IS VALIDATION BASED CACHING ? </li></ul><ul><ul><li>When a static HTML file is served (Apache HTTP Server, WebSphere’s File Serving Servlet), the server will send Last-Modified header will value equal to date when the file was modified (OS date) </li></ul></ul><ul><ul><li>Apache HTTP Server can generate ETag for static files based on its modification time, size,.. </li></ul></ul><ul><ul><li>If you don’t set Cache-Control: no-store, browser will store the response in cache </li></ul></ul><ul><ul><li>But every time you request the resource(No cached, or stale) it will send Conditional GET request, with If-Modified-Since, If-None-Match header </li></ul></ul><ul><ul><li>Server will check if the resource is actually modified, if not it will return HTTP 304 with no body(Average 250 byte response) to indicate that browser can use the response </li></ul></ul><ul><ul><li>Validation based caching is better than getting full HTTP 200 response with full body but worst than cached resource which does not require HTTP request </li></ul></ul>
    23. 23. Validation based caching <ul><li>HOW CACHE VALIDATION WORKS </li></ul><ul><ul><li>The HTTP Specification has concept of Conditional GET, that helps client to prevent download of same resource repeatedly </li></ul></ul><ul><ul><li>The Server can send Last-Modified, ETag header in response </li></ul></ul><ul><ul><li>HTTP Client (Browser, caching proxies) will copy the resource in disk cache along with the headers </li></ul></ul><ul><ul><li>Next time when you request that resource the client will add If-Modified-Since and If-None-Match headers to the request with the value that it had on disk </li></ul></ul><ul><ul><li>Server compares this values to the version it has and sends a HTTP 200 OK, with full resource in the body of response if the resource is changed but if the resource is not changed the server will send HTTP 304 Not Modified with only headers </li></ul></ul><ul><ul><ul><li>Original resource could be say 100kb, but the HTTP 304 respose will be 200-250 bytes, you can save on download size </li></ul></ul></ul><ul><ul><ul><li>Client has to make a request using one of the connections from parallel connection pool </li></ul></ul></ul>
    24. 24. How validation caching works
    25. 25. Configure ETag <ul><li>WHY YOU SHOULD CONSIDER DISABLING ETAG </li></ul><ul><ul><li>ETags are introduced to help with multiple HTTP server environment </li></ul></ul><ul><ul><li>HTTP Server can generate ETag(Similar to a version number) for the static resources. Its enabled by default. The default format of ETag is INode MTime Size </li></ul></ul><ul><ul><li>Apache HTTP Server sends both Last-Modified and ETag header. You cant disable Last-Modified. Browser will send both If-Modified-Since and If-None-Match header to check if resource is still valid </li></ul></ul><ul><ul><li>As per HTTP Specification both IMS and INM conditions should be met for server to return HTTP 304 (Desired behavior with smaller response) </li></ul></ul><ul><ul><li>If your request goes to HTTP server that has different file permission but same date, Server will return HTTP 200 instead of HTTP 304 </li></ul></ul><ul><ul><li>You can configure, disable ETag by adding FileETag None to httpd.conf. Or at least configure it to FileETag MTime </li></ul></ul>
    26. 26. Leverage proxy caching <ul><li>HOW TO CACHE RESOURCE ACROSS USERS </li></ul><ul><ul><li>Big portion of internet traffic goes through caching proxy </li></ul></ul><ul><ul><ul><li>Proxy provided by ISP </li></ul></ul></ul><ul><ul><ul><li>Proxy provided by corporate network for outbound connection </li></ul></ul></ul><ul><ul><ul><li>Proxy infront of your web server for inbound connection </li></ul></ul></ul><ul><ul><li>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 </li></ul></ul><ul><ul><ul><li>Proxy will share cached resources across proxies </li></ul></ul></ul><ul><ul><li>You use the Cache-control: public header to indicate that a resource can be cached by public web proxies in addition to the browser that issued the request. </li></ul></ul><ul><ul><li>Set appropriate Vary header (Vary: Accept-Encoding, User-Agent) </li></ul></ul>
    27. 27. Minimize request overhead 3
    28. 28. HTTP Requst <ul><li>WHAT HAPPENS WHEN BROWSER REQUESTS A RESOURCE </li></ul><ul><ul><li>When you try accessing a resource in your browser, it performs following steps </li></ul></ul><ul><ul><ul><li>DNS resolution </li></ul></ul></ul><ul><ul><ul><li>Establish HTTP connection </li></ul></ul></ul><ul><ul><ul><li>Send request </li></ul></ul></ul><ul><ul><ul><li>Receive response </li></ul></ul></ul><ul><ul><li>You should try and reduce overhead on each of these steps </li></ul></ul>
    29. 29. Reduce DNS resolution time <ul><li>REDUCE DNS RESOLUTION TIME </li></ul><ul><ul><li>Before a browser establishes a connection with server it must resolve host name into IP address. This value is cached by </li></ul></ul><ul><ul><ul><li>Operating System </li></ul></ul></ul><ul><ul><ul><li>Browser </li></ul></ul></ul><ul><ul><li>The DNS record cache has short life time and might have to traverse hierarchy to get record </li></ul></ul><ul><ul><li>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 </li></ul></ul><ul><ul><li>Don't use more than 1 host for less than 5 resources, balance resources across host names </li></ul></ul><ul><ul><li>Serve early loaded JavaScript from same domain as that of host </li></ul></ul><ul><ul><ul><li>Browsers block parallel download while downloading JavaScript, so it should be as fast as possible </li></ul></ul></ul>
    30. 30. Use HTTP Persistent Connection <ul><li>WHAT IS HTTP PERSISTENT CONNECTION AND WHY YOU SHOULD CARE </li></ul><ul><ul><li>Web clients often open connection to same site for downloading HTML and related resources. HTTP 1.1 (Keep Alive in HTTP 1.0) allows HTTP devices to keep TCP connection open after transaction complete and to reuse the preexisting connection for future HTTP requests. The connections that are kept open after transaction are called persistent connection </li></ul></ul><ul><ul><ul><li>You can avoid slow connection setup </li></ul></ul></ul><ul><ul><ul><li>You can avoid slow-start congestion adaption phase. </li></ul></ul></ul><ul><ul><li>Persistent connections are more efficient when used in conjunction with parallel connections. </li></ul></ul><ul><ul><li>Starting from HTTP 1.1 connection is persistent by default unless you set Connection: close </li></ul></ul><ul><ul><li>You can set “KeepAlive on” in Apache to turn on persistent connection </li></ul></ul>
    31. 31. Persistent Connection
    32. 32. Size of HTTP Request <ul><li>WHY SIZE OF HTTP REQUEST MATTERS ? </li></ul><ul><ul><li>Most users have asymmetric connection, upload to download speed is in ration 1:4 to 1:20. That means uploading 500 bytes is same as downloading 10 KB. We cant compress data in HTTP request. You should try and keep your request size small so that it fits in one packet of 1500 bytes </li></ul></ul><ul><ul><li>Initial HTTP request suffers from Startup Throttling </li></ul></ul><ul><ul><li>HTTP request is made up of following things </li></ul></ul><ul><ul><ul><li>Request header set by browser </li></ul></ul></ul><ul><ul><ul><li>URL, Referral URL </li></ul></ul></ul><ul><ul><ul><li>Cookies </li></ul></ul></ul><ul><ul><li>You should try and reduce size of each of the request components </li></ul></ul>
    33. 33. Request for static resource
    34. 34. Minimize cookie size <ul><li>HOW YOU CAN REDUCE COOKIE SIZE </li></ul><ul><ul><li>Enterprise applications need at least few big cookies that we cant avoid </li></ul></ul><ul><ul><ul><li>LTPA Token, JSessionId, SSO related cookies </li></ul></ul></ul><ul><ul><li>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. </li></ul></ul><ul><ul><ul><li>Use server side storage for cookie for most of the cookie payload and send only a Key in the cookie. </li></ul></ul></ul><ul><ul><ul><li>Serving static resources from a cookie less domain reduces the total size of requests made for a page </li></ul></ul></ul><ul><ul><ul><ul><li>Static resources do not need cookies </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Typical static file will be less than 10 KB, so more time is spent in making request then getting response </li></ul></ul></ul></ul>
    35. 35. Minimize response size 4
    36. 36. Compress response <ul><li>USE GZIP FOR COMPRESSING RESPONSE </li></ul><ul><ul><li>Compressing resources with GZip will reduce the size of resource by 70 % </li></ul></ul><ul><ul><li>Most modern browsers support compressed data. Browser sends Accept-Encoding header to specify what all encodings it supports </li></ul></ul><ul><ul><li>You can configure HTTP server to compress both static files that it serves and dynamic content that goes through it </li></ul></ul><ul><ul><ul><li>You should compress only text files such as HTML, JavaScript, CSS </li></ul></ul></ul><ul><ul><ul><li>You should not compress binary files such as Images, PDF, They are already compressed and there size might increase after GZip </li></ul></ul></ul><ul><ul><ul><li>You should not compress resources less than 150 bytes </li></ul></ul></ul>
    37. 37. Configure GZip on Apache HTTP Server <ul><li>HOW TO CONFIGURE APACHE HTTP SERVER FOR GZIP </li></ul><ul><ul><li>Apache HTTP Server has a mod_deflate module that you can use to GZip the response </li></ul></ul><ul><ul><li>You can use it to GZip both static files served by Apache and dynamic responses that are tunneled through Apache HTTP Server </li></ul></ul><ul><ul><ul><li>It checks if browser supports GZip and if yes then only GZip’s response </li></ul></ul></ul><ul><ul><ul><li>It allows you to configure GZip by content type </li></ul></ul></ul><ul><ul><ul><ul><li>LoadModule deflate_module modules/mod_deflate.so AddOutputFilterByType DEFLATE text/html text/plain text/xml </li></ul></ul></ul></ul><ul><ul><ul><li>Make sure that you set Vary: Accept-Encoding so that proxy can deal with clients who do not support GZip properly </li></ul></ul></ul>
    38. 38. Minification <ul><li>MINIFY TEXT FILES </li></ul><ul><ul><li>Minification is the practice of removing unnecessary characters from the code to reduce its size </li></ul></ul><ul><ul><ul><li>Extra spaces </li></ul></ul></ul><ul><ul><ul><li>Line breaks </li></ul></ul></ul><ul><ul><ul><li>Indentation </li></ul></ul></ul><ul><ul><ul><li>Comments </li></ul></ul></ul><ul><ul><li>You can use tools to minify </li></ul></ul><ul><ul><ul><li>JavaScript </li></ul></ul></ul><ul><ul><ul><li>CSS </li></ul></ul></ul><ul><ul><ul><li>HTML </li></ul></ul></ul>
    39. 39. Minify JavaScript <ul><li>WHY MINIFY JAVASCRIPT </li></ul><ul><ul><li>Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time. </li></ul></ul><ul><ul><li>Minification will reduce size by up to 30 % </li></ul></ul><ul><ul><li>There are several tools that you can use for minifying JavaScript </li></ul></ul><ul><ul><ul><li>Dojo Shrink safe </li></ul></ul></ul><ul><ul><ul><li>YUI Compressor </li></ul></ul></ul><ul><ul><ul><li>Google’s Closure compiler </li></ul></ul></ul><ul><ul><li>Task to minify JavaScript should be part of your build script </li></ul></ul><ul><ul><li>You can also minify JavaScript on the fly using Servlet Filter </li></ul></ul>
    40. 40. Minify CSS <ul><li>WHY MINIFY CSS </li></ul><ul><ul><li>Compacting CSS code can save many bytes of data and speed up downloading, parsing, and execution time. </li></ul></ul><ul><ul><li>Minifying CSS has same advantages that of minifying JavaScript </li></ul></ul><ul><ul><li>There are several tools for minifying CSS </li></ul></ul><ul><ul><ul><li>YUI Compressor </li></ul></ul></ul><ul><ul><ul><li>Cssmin.js </li></ul></ul></ul><ul><ul><li>You can add task to minify CSS in the build script </li></ul></ul><ul><ul><li>You can minify CSS on the fly using Servlet Filter </li></ul></ul>
    41. 41. Minify HTML <ul><li>WHY COMPACT/MINIFY HTML </li></ul><ul><ul><li>Compacting HTML code, including any inline JavaScript and CSS contained in it, can save many bytes of data and speed up downloading, parsing, and execution time. </li></ul></ul><ul><ul><li>There are YUI Tag libraries that you can use to compress inline JavaScript and CSS </li></ul></ul><ul><ul><li>WebSphere generates quite few blank lines and white spaces in HTML </li></ul></ul><ul><ul><ul><li>Set com.ibm.wsspi.jsp.usecdatatrim  property to true in Web Container Custom settings to bring size of generated HTML by up to 15% </li></ul></ul></ul>
    42. 42. Optimize Images <ul><li>WHY OPTIMIZE IMAGES </li></ul><ul><ul><li>Properly formatting and compressing images can save many bytes of data </li></ul></ul><ul><ul><li>Images saved from programs like Fireworks can contain kilobytes of extra comments, and use too many colors, even though a reduction in the color palette may not perceptibly reduce image quality </li></ul></ul><ul><ul><li>Choose an appropriate Image file format </li></ul></ul><ul><ul><ul><li>PNGs are almost always superior to GIFs and are usually the best choice </li></ul></ul></ul><ul><ul><ul><li>Use GIFs for very small or simple graphics and for images which contain animation. </li></ul></ul></ul><ul><ul><ul><li>Use JPGs for all photographic-style images. </li></ul></ul></ul><ul><ul><ul><li>Do not use BMPs or TIFFs. </li></ul></ul></ul><ul><ul><li>Use an image compressor </li></ul></ul>
    43. 43. Optimize browser rendering 5
    44. 44. What is optimizing browser rendering <ul><li>OPTIMIZE BROWSER RENDERING </li></ul><ul><ul><li>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. </li></ul></ul><ul><ul><ul><li>Put CSS at the top of the document </li></ul></ul></ul><ul><ul><ul><li>Always specify content type encoding </li></ul></ul></ul><ul><ul><ul><li>Specifying a character set early for your HTML documents allows the browser to begin executing scripts immediately </li></ul></ul></ul><ul><ul><ul><li>Put JavaScript at the end of the document </li></ul></ul></ul><ul><ul><ul><li>Avoid CSS expressions </li></ul></ul></ul>
    45. 45. Tools 6
    46. 46. Testing tools <ul><li>WHAT TOOLS SHOULD YOU USE FOR TESTING </li></ul><ul><ul><li>Traditional load testing tools like Load Runners are not well suited for capturing browser performance data </li></ul></ul><ul><ul><ul><li>They take simplistic view of HTTP transaction </li></ul></ul></ul><ul><ul><ul><li>Browser has lot of logic and variations </li></ul></ul></ul><ul><ul><li>Use load testing tools that run inside browser </li></ul></ul><ul><ul><ul><li>iOpus iMacros </li></ul></ul></ul><ul><ul><ul><li>Selenium </li></ul></ul></ul><ul><ul><ul><li>Gomez </li></ul></ul></ul>
    47. 47. Yahoo YSlow
    48. 48. Google Page speed
    49. 49. Charles Web Debugging Proxy
    50. 50. Reference <ul><li>MORE INFORMATION </li></ul><ul><ul><li>My Blog ( http://wpcertification.blogspot.com/search/label/clientsideperformance ) </li></ul></ul><ul><ul><li>High performance web site, Oreilly Publication </li></ul></ul><ul><ul><li>Even faster web site, Oreilly Publication </li></ul></ul>
    51. 51. <ul><li>THANK YOU FOR WATCHING </li></ul><ul><li>CONTACT INFO: </li></ul><ul><li>ASCENDANT TECHNOLOGY, LLC </li></ul><ul><li>8601 Ranch Road 2222 </li></ul><ul><li>Building I, Suite 205 </li></ul><ul><li>Austin, TX 78730 </li></ul><ul><li>Phone (512) 346-9580 </li></ul>Thank You Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. December 19, 2010

    ×