Website optimization


Published on

Talks about some basic rules/practices while developing a web-application.

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Website optimization

  1. 1. Web Site Optimization  Why ???  To know some basic rules/practices while developing a web-application.  Whom ???  Web devlopers who are working html,css,js and other web technology.  What ???  Its difficult to implement all the points that we discuss today. But we can check something.
  2. 2. Web Site Optimization In this session we'll go through 4 basic stuffs.  Basic optimization rules  Optimizing assets (images, scripts, and styles)  Optimizations specific to scripts  Optimizations specific to styles
  3. 3. Web Site Optimization  Decrease Download Sizes  Keep all the assets as lightweight as possible  Creating lean HTML code  Make Fewer HTTP Requests  Combine scripts and style sheets  Use image sprites  Avoid redirects  Avoid frames Basic Optimization Rules
  4. 4. Web Site Optimization  Use a Content Delivery Network (CDN)  Host Assets on Different Domains but Reduce DNS Lookups  Place Assets on a Cookie-free Domain  Split the Assets Among Domains  Use the Header Expiry/caching  Serve gzipped Content  Handling web images Optimizing Assets
  5. 5. Web Site Optimization Using a Content Delivery Network – CDN  CDN is a network of servers in different geographical locations.  Each server has a copy of a site’s files. When a visitor to your site requests a file, the file is delivered from the nearest server  Its expensive :( Optimizing Assets
  6. 6. Web Site Optimization Why host assets on different domains ????? Seems its an extra headache for me !!!!! :(  The biggest impact on end-user response times is the number of components in the page.  Each component requires an extra HTTP request.  Browser allows a limited number of component for parallel downloading per host. (mostly only 2) Optimizing Assets
  7. 7. Web Site Optimization Lets see what if there is parallel download.... Lets assume we have 10 components along with the page. Optimizing Assets
  8. 8. Web Site Optimization What if components are on different domains.. ( Create subdomains and host assets ) Optimizing Assets
  9. 9. Web Site Optimization Warning !!!!!!!!!!  Depending on your bandwidth and CPU speed, too many parallel downloads can degrade performance.  It takes about 20-120 milliseconds for DNS (Domain Name System) to resolve IP address for a given hostname or domain name and the browser cannot do anything until the process is properly completed. Optimizing Assets
  10. 10. Web Site Optimization Place Assets on a Cookie-free Domain  If you set a lot of cookies, the request headers for your pages will increase in size, since those cookies are sent with each request.  If you use subdomains to host your assets, you need to make sure that the cookies you set are for your canonical domain name (e.g. and not for the top-level domain name (e.g. Optimizing Assets
  11. 11. Web Site Optimization Customized Expiry header.....  By using a customized Expiry header, your web components like images, static files, CSS, Javascript skipped unnecessary HTTP request when the same user reload the page for the second time.  Setting the Expires header in Apache is easy: Lets see the example on next slide Optimizing Assets
  12. 12. Web Site Optimization Example Expiry header..... Add an .htaccess file that contains the following directives to the root folder of your i1 and i2 subdomains ExpiresActive On ExpiresDefault "modification plus 10 years" If you want, you can even set an expiration date per file type: ExpiresActive On ExpiresByType application/x-javascript "modification plus 2 years" ExpiresByType text/css "modification plus 5 years" For more : Optimizing Assets
  13. 13. Web Site Optimization Handling Web Images... Images are important part of your website. However if they are not properly optimize, they can become a burden and end up utilizing unpredictably large amount of bandwidths on daily basis.  Don’t Scale Images. Always practice inserting the width and height for each images. Also don’t scale down an image just because you need a smaller version on the web. For example: Do not force scale a 200×200 px image to 50×50 px for your website by altering the width and height. Get a 50×50 px instead. Optimizing Assets
  14. 14. Web Site Optimization Serve gzipped Content...  Apache 1.x and 2.x can automatically compress files, but neither one comes with a compressor enabled by default. Enabling compression reduces CSS, HTML, and JavaScript file sizes by 55-65% and speeds up overall page load times by 35-40%.  Apache uses plug-in modules to add functionality. For Apache 1.x, use the free mod_gzip module to compress files. For Apache 2.x, use mod_gzip or the built-in mod_deflate module. Optimizing Assets
  15. 15. Web Site Optimization For gzipped Content...  The mod_gzip module can be used with Apache 1.x or 2.x, but it doesn’t come with either Apache distribution. You’ll need to download and install it separately.  Add the following lines to your server configuration file or to a site’s “.htaccess” file: <IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </IfModule> Optimizing Assets
  16. 16. Web Site Optimization For gzipped Content...  For IIS gzip.html Optimizing Assets
  17. 17. Web Site Optimization  Merge .js f iles  Minify scripts  For Minify   Place scripts at the bottom of the page  Remove duplicates Javascript Optimizations
  18. 18. Web Site Optimization Merge script files ….  You should aim for your JavaScripts to make as few requests as possible; ideally, this also means that you should have only one .js file. This task is as simple as taking all .js script files and placing them into a single file. Example : Javascript Optimizations
  19. 19. Web Site Optimization  Merge and Minify  For Minify   Place styles at the top of the page  Ban Expressions  #content {  left: expression(document.body.offsetWidth)  } CSS Optimizations
  20. 20. Web Site Optimization #element-id{ background-image: url(image.png); background-position: -8px -8px; width: 16px; height: 16px; }
  21. 21. Web Site Optimization  Firebug’s Net panel for Firefox, at  YSlow, Yahoo!’s performance extension to Firebug, at  LiveHTTP Headers for Firefox, at  Fiddler — for IE, but also a general-purpose packet sniffer, at  Web Inspector for Safari, at TOOLS FOR PERFORMANCE OPTIMIZATION