Friday, November 7, 2008

 

Speed Up Your Website - By Example

Laying the Groundwork

In first section we will see Where time is spend, then in second section we would see Why and How that time can be minimized, and then in third section we would summarize some concepts and list tools.

SECTION A: Behind the Scene

This section describes about what happens in between, when user types WWW address and see complete web page before his/her eyes. This would give us an idea about Where time is spend and how to minimize it.




Please note: Above figure may seem complex but DNS look up normally takes less than a second, approx.: 100ms to 900ms. The detail is given to show a complete process.


Now let's get to the point:

SECTION B: Optimize the Load Time

Following guidelines are based on the collection of common knowledge and experience, and application may vary from situation to situation. I would suggest to Log current web site loading statistics and analyze with results after applying any guideline.

1. Reduce number of HTTP requests

2. Proficient

3. Proficient

4. Proficient
  • Avoid using one big Outer table, instead use separate tables for header, content1, content2, content3....., footer etc. (See Not-An-Example in Table-vs-Div(1-Okay).html and Table-vs-Div(2-Better).html in AllInOne.zip)
  • Use <div>s instead of <table>s, develop page in chunks (tables or div) instead of big outer table. (See example in Table-vs-Div(3-Even Better).html in AllInOne.zip)
  • Design using nested tables instead of using cell merges and splits. Use separate table wherever possible.
  • Always give the width for each of cells in a table. Make sure that the total of cells in a row adds up to the table width. Use CSS table-layout:fixed (See example Table-ColGroup-2.html in AllInOne.zip) or use COLGROUP tags (See example Table-ColGroup-1.html in AllInOne.zip).
  • When using Width or Height less than 10px, then use 1x1.gif transparent image. (Netscape don't like measurement in percentage.)

5. Order of components in the page

  • CSS:
    • Place CSS on top of page inside HEAD, It helps Browser to know in the start about HOW to style and display content before having all content.
  • JavaScipt:
    • TOP of page (avoid): Only if JavaScript is required for page's initial display then keep it in the HEAD to be downloaded first, otherwise keep DHTML Script at the end of page.
    • BOTTOM of page (ideal): Place JavaScript at the bottom of page as much possible, because Browser may block rendering (or rerender) during downloading in hope of document.write() to induce HTML. Otherwise try to use DEFER attribute: 
      <html>
      <head>
      <title>CSS and JS defer - Example</title>

      .....
      <link rel="stylesheet" type="text/css"
      href="rich-layout.css" media="screen">
      <link rel="stylesheet" type="text/css"
      href="simple-layout.css" media="print">
      <script type="text/vbscript" src="fval1.0.2.js" defer>script>
      </head>
      <body>

      .......
      </body>
      </html>

  • Make CSS and JS external files.
    • Follow this guideline: External files would help Browser to cache for next use and is good for multiple visits.
    • Break this guideline: To avoid extra HTTP request and faster response, inline may be good for home page. (This depend on your website's Page View per session - Google has 1 pv for home page.)
  • Download few basic page layout templates. (See examples Template1.html .. to .. Template5.html in AllInOne.zip)

6. Reduce Request & Response Sizes

  • Why?
    • Generally, 80% to 90% time is spend in downloading HTML and other objects while 10% to 20% in rendering them, so minimizing the download time (by reducing content size) is key to get better performance. One of well supported method is to compress text-based files as gzip.
    • Most Browsers are capable of sending Accept-Encoding:gzip,deflate as part of their request, and in response, server can send Content-Encoding:gzip with compressed data.
    • HTTP compression tends to be more efficient on one large request than several small requests.
  • How?
    1. Compress text-based files, e.g.: HTML, JAVASCRIPT, CSS file(s). Compression can reduce size up to 70%.
      IIS: In IIS Manager, double-click the local computer, right-click the Web Sites folder > Properties > Service > HTTP compression section:
      Please note: You may also need to configure Web Service Extension and Metabase. (You can configure for certain text-based (*.htm, *.css, *.js etc) files.)
      Apache: use mod_gzip, mod_deflate modules to configure compression.
    2. Minification: Remove space, newline, tab, comments; shorter strings, variables and literals; remove duplicate script and use CSS inheritance as much possible.
    3. Reduce Overhead:
      COOKIE: every request have Cookie attached to it forth and back.
      • Size: better if less than 100 bytes, ok if less than 500 bytes.
      • Carefully select domain level, i.e.: .mydomain.com OR finance.mydomain.com
      • Carefully select expiry date. Remove when it is not needed.

7. Reduce Domain Lookups

  • Reduce Domain lookups: Generally, 2 is better than one (To get advantage of Browser's parallel downloading capability) and 4 is worse than 2.
  • Using Browser's Cache will also reduce Domain Lookups.

8. Content Delivery Network: (for specific region)

  • Simply, key is to be as close as possible to the source of request. i.e.: Keeping Web Server(s) close to Client's Browser.
  • Server with fewest network hops is best or Server giving faster response.
  • Geographically dispersed servers will make pages load faster by minimizing congestion and reducing unmanageable levels of traffic flow.
  • CDNs typically host static content including images, embedded objects, videos, media files and advertising for dynamic web contents. (for example: Yahoo!'s US audiences will get image pa-icons2.gif from http://us.i1.yimg.com/us.yimg.com/i/ww/t7/pa-icons2.gif while Australian audiences will get same image from http://au.i1.yimg.com/us.yimg.com/i/ww/t7/pa-icons2.gif.

9. AJAX:

  • All precautions for JavaScripts are also true for AJAX libraries. Try to utilize contents from Cache as much possible.
  • Load JavaScript libraries dynamically when required ($import()) or load in background with some delay.
  • Instead of getting 3rd party content on Server side, if possible, load third party content from Client side after displaying YOUR contents.

10. Other/Misc:

  • Using Server Side Include files are better as server keeps them in Cache to serve faster later.
  • Avoid "expression()" in CSS.
  • Move big developer comment/remarks into separate file of same name with *.info extension. e.g.: index.info
  • Trim URLs to short as possible. Use <base href="http://www.domainname.com"> if absolute referencing required.
  • IMPORTANT!: Align these guidelines for: (All quantitative analysis may differ in different environment)
    • Your environment and web structure.
    • Home page vs Interior page.
    • First Time Visitor vs Repeat Visitor.
    • High-Traffic page vs Low-Traffic page.
    • Byte Matters: few guidelines will save bytes while other will save kilobytes.
  • and finally, Measure your improvements.

Summary:

.HTML..........Simplify design.
.HEAD
.LINK......CSS file(s) required for page appearance.
.SCRIPT....JS functions required during page load.
.BODY
...........Small chunks (DIVs, TABLEs), minimize images.
.SCRIPT....JS functions required after page load, validation etc.
.PRELOAD...If required, Pre load any images here.

SECTION C: Tools

Footnotes

Some experts claim, If your home page does not load within 8 seconds, as much as a third of your site visitors will get frustrated and leave. I hope that these guidelines and examples would help to quickly understand and apply improvements to your web development.

Resources and further readings:


# posted by CHANDU @ 1:03 AM
Comments: Post a Comment

Subscribe to Post Comments [Atom]





<< Home

This page is powered by Blogger. Isn't yours?

Subscribe to Comments [Atom]