Nginx performance optimization

1. Enable woff compression in Nginx
1. Add Mime type - /etc/nginx/mime.types
1. application/font-woff                   woff;
2. Add gzip compression for fonts - /etc/nginx/nginx.conf
1. gzip_types  application/font-woff
2. Administration
1. Reload - sudo service nginx reload
2. Start - sudo nginx
3. stop - sudo nginx -s stop

High Performance Web Sites - Best Practices

Client Side Performance - Best Practices

80% of the end-user response time is spent on the front-end.Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. This document contains a number of best practice rules for making web pages fast. Most of the suggestions improve the performance from the client side i.e. once html is downloaded.

Best Practices

Here are best practices segregated into different categories.

1. Content

---

1.1 Make Fewer HTTP Requests

Reducing the number of components in turn reduces the number of HTTP requests required to render the page.

• Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.
• CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
• Inline images use the data: URL scheme to embed the image data in the actual page. This can increase the size of your HTML document. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages. Inline images are not yet supported across all major browsers.

1.2 Reduce DNS Lookups

The Domain Name System (DNS) maps hostnames to IP addresses. Every DNS lookup typically takes 20-120 milliseconds for DNS to lookup the IP address for a given hostname. The browser can't download anything from this hostname until the DNS lookup is completed.

• Reducing the number of unique hostnames has the potential to reduce the amount of parallel downloading that takes place in the page.
• Caution : Avoiding DNS lookups cuts response times, but reducing parallel downloads may increase response times.
• Guideline is to split these components across at least two but no more than four hostnames

1.3 Make Ajax Cacheable

One of the cited benefits of Ajax is that it provides instantaneous feedback to the user because it requests information asynchronously from the backend web server

• Add an Expires or a Cache-Control Header to make the responses cacheable to improve the performance of Ajax.

1.4 Postload Components

You can take a closer look at your page and ask yourself: "What's absolutely required in order to render the page initially?". The rest of the content and components can wait.

• JavaScript is an ideal candidate for splitting before and after the onload event
  • Example if you have JavaScript code and libraries that do drag and drop and animations, those can wait, because dragging elements on the page comes after the initial rendering
• Post-load hidden content e.g. that appears after a user action
• Images below the fold (you have to scroll to see that)

1.5 Preload Components

Preload may look like the opposite of post-load, but it actually has a different goal.

• Preload components when the browser is idle and request components (like images, styles and scripts) you'll need in the future. This way when the user visits the next page, you could have most of the components already in the cache and your page will load much faster for the user.

There are actually several types of preloading:

1. Unconditional preload - as soon as onload fires, you go ahead and fetch some extra components.
2. Conditional preload - based on a user action you make an educated guess where the user is headed next and preload accordingly.
3. Anticipated preload - preload in advance before launching a redesign or pushing new Build into production

1.6 Reduce the Number of DOM Elements

It makes a difference if you loop through 500 or 5000 DOM elements on the page when you want to add an event handler. It Slows!

• Check : Are you using nested tables for layout purposes? Are you throwing in more
  s only to fix layout issues?
• The number of DOM elements is easy to test, just type in Firebug's console: document.getElementsByTagName('*').length
• Even pretty busy page shouldn't have more than 800-900 DOM elements.

1.7 Split Components Across Domains

Splitting components allows you to maximize parallel downloads.

• Use not more than 2-4 domains because of the DNS lookup penalty.
• Example, you can host your HTML and dynamic content on www.wamart.com and split static components between i1.walmart.com and i2.walmart.com

1.8 Minimize Number of iframes

Iframes allow an HTML document to be inserted in the parent document. It's important to understand how iframes work so they can be used effectively.

• iframe pros:
  1. Helps with slow third-party content like badges and ads
  2. Security sandbox
  3. Download scripts in parallel
• iframe cons:
  1. Costly even if blank
  2. Blocks page onload
  3. Non-semantic

1.9 Avoid 404s

HTTP requests are expensive so making an HTTP request and getting a useless response (i.e. 404 Not Found) is totally unnecessary and will slow down the user experience without any benefit.

• Even worse when the link to an external JavaScript is wrong and the result is a 404
  • First, this download will block parallel downloads.
  • Second, the browser may try to parse the 404 response body as if it were JavaScript code, trying to find something usable in it

1.10 Avoid Redirects

Redirects are accomplished using the 301 and 302 status codes.

• Redirects slow down the user experience. Inserting a redirect between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived.

2. Server

---

2.1 Use a CDN

The user's proximity to your web server has an impact on response times. A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users.

• It may improve the end-user response times by 20% or more

2.2 Add Expires or Cache-Control Header

A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable.

• This avoids unnecessary HTTP requests on subsequent page views.
• Very simple to configure. E.g. in Apache httpd.conf ExpiresDefault "access plus 10 years"
• The number of page views with a primed cache is 70-80% typically for a eCommerce site like walmart.com
• Caution : if you use a far future Expires header you have to change the component's filename whenever the component changes e.g. use version like asda_v1.2.js

2.3 Gzip Components

The time it takes to transfer an HTTP request and response across the network can be significantly reduced by enabling compression for textual components ( e.g. JavaScripts, CSS, HTML)

• Compression reduces response times by reducing the size of the HTTP response.
• Starting with HTTP/1.1, web clients supports compression with the Accept-Encoding header in the HTTP request. Accept-Encoding: gzip, deflate
• Gzipping generally reduces the response size by about 70%
• Caution : Image and PDF files should not be gzipped because they are already compressed. Trying to gzip wastes CPU

2.4 Configure ETags

Entity tags (ETags) are a mechanism that web servers and browsers use to determine whether the component in the browser's cache matches the one on the origin server.

• ETags won't match when a browser gets the original component from one server and later tries to validate that component on a different server, a too common situation on Web sites that use a cluster of servers to handle requests
• If you have multiple servers hosting your web site, users may be getting slower pages, servers may have a higher load & consuming greater bandwidth, and proxies aren't caching the content efficiently.
  • Even if your components have a far future Expires header, a conditional GET request is still made whenever the user hits Reload or Refresh.
• Very simple to configure. E.g. in Apache httpd.conf FileETag none

2.5 Flush Buffer Early

When users request a page, it can take anywhere from 200 to 500ms for the backend server to stitch together the HTML page and serve.

• During this time, the browser is idle as it waits for the data to arrive.
• Use some kind of flush buffer mechanism so that the browser can start fetching components while your backend is busy.
  • E.g. in PHP, flush() can be used.
• A good place to consider flushing is right after the HEAD so that browser can fetch CSS & JavaScript files in parallel.

2.6 Use GET for Ajax Requests

When using XMLHttpRequest, POST is implemented in the browsers as a two-step process: sending the headers first, then sending data.

• It's best to use GET, which only takes one TCP packet to send (unless you have a lot of cookies).
• Also as per W3C standards, GET is meant for retrieving information, so it makes sense (semantically) to use GET when you're only requesting data, as opposed to sending data to be stored server-side.
• Caution : The maximum URL length in IE is 2K, so if you send more than 2K data you might not be able to use GET.

2.7 Avoid Empty Image src

Without a purpose, browser makes another request to the server.

• Browser beahavior:
  • Internet Explorer makes a request to the directory in which the page is located.
  • Safari and Chrome make a request to the actual page itself.
  • Firefox 3 and earlier versions behave the same as Safari and Chrome, but version 3.5 addressed this issue[bug 444931] and no longer sends a request.
  • Opera does not do anything when an empty image src is encountered.
• Possible reason, when creating the image dynamiccaly, and value is not available
  • E.g. Using Javascript, var img = new Image(); img.src = '';

3. Cookie

---

3.1 Reduce Cookie Size

Information about cookies is exchanged in the HTTP headers between web servers and browsers. It's important to keep the size of cookies as low as possible to minimize the impact on the user's response time. Few suggestions:

• Eliminate unnecessary cookies
• Keep cookie sizes as low as possible to minimize the impact on the user response time
• Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected
• Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time

3.2 Use Cookie-Free Domains for Components

Serving static components usually doesn't require a cookie. Therefore, if static components get served from main domain e.g. walmart.com, it will carry unnecessary load of cookies.

• Serve components for other domains e.g. i1.walmart.com, or better to be i1.wmcdn.com similar to YouTube which uses ytimg.com, or Amazon uses images-amazon.com

4. CSS

---

4.1 Put Stylesheets at Top

Moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.

• Problem with putting stylesheets near the bottom of the document is that
  1. it prohibits progressive rendering in many browsers, including Internet Explorer.
  2. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user may stuck sometimes viewing a blank white page.

4.2 Avoid CSS Expressions

CSS expressions are a powerful (and dangerous) way to set CSS properties dynamically.

• Example : background color could be set to alternate every hour using CSS expressions: background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
• Problem with expressions is that they are evaluated more frequently than most people expect.
  1. They get evaluated when the page is rendered or resized or scrolled or even when the user moves the mouse over the pag
  2. Moving the mouse around the page can easily generate more than 10,000 evaluations.

4.3 Choose Over @import

One of the previous best practices states that CSS should be at the top in order to allow for progressive rendering. However, @import doesn't behave the same as does.

• Problem : In IE @import behaves the same as using at the bottom of the page, so it's best not to use it.

4.4 Avoid Filters

The IE-proprietary AlphaImageLoader filter aims to fix a problem with semi-transparent true color PNGs in IE versions < 7

• Problem with this filter is that:
  1. it blocks rendering and freezes the browser while the image is being downloaded
  2. It also increases memory consumption and is applied per element, not per image, so the problem is multiplied.
• The best approach is to avoid AlphaImageLoader completely and use gracefully degrading PNG8 instead, which are fine in IE. If you absolutely need AlphaImageLoader, use the underscore hack _filter as to not penalize your IE7+ users.

5. JavaScript

---

5.1 Put Scripts at Bottom

• The problem caused by scripts is that they block parallel downloads
  • If a script is downloading, the browser won't start any other downloads, even on different hostnames.
• If scripts can't be moved to lower of the page, use deferred scripts, which indicates that the script does not contain document.write, and is a clue to browsers to continue rendering
  • Unfortunately, Firefox doesn't support the DEFER attribute

5.2 Make JavaScript and CSS External

For eCommerce sites like walmart.com, HTML is always dynamic in nature. Javascipts & CSS contents being considered static instead.

• Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser
• JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested, resulting in
  1. Increased HTML size which can't be cached
  2. Increased wait time due to rendering can not be started until HTML get downloaded.
  3. Probable Increased wight as it can't be uses on other pages even if required, so need to download again.

5.3 Minify JavaScript and CSS

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times.

• Minification removes all comments & unneeded white space characters (space, newline, and tab)
• Further Obfuscation can be applied within minification, to reduce size further.
• In a survey of ten top U.S. web sites, minification achieved a 21% size reduction (25% with obfuscation)
• E.g. use YUI Compressor  
  • java -jar yuicompressor3..0.jar -type [js | css] [filename] -o [output filename]

5.4 Remove Duplicate Scripts

It hurts performance to include the same JavaScript file twice in one page and sad part is this isn't as unusual.

• E.g. Some markets having 3 duplicates of jquery.js being downloaded thru different URLs and one with different version (served one from each http, https & google).

5.5 Minimize DOM Access

Accessing DOM elements with JavaScript is slow so in order to have a more responsive page, you should:

• Cache references to accessed elements
• Update nodes "offline" and then add them to the tree
• Avoid fixing layout with JavaScript

5.6 Develop Smart Event Handlers

Sometimes pages feel less responsive because of too many event handlers attached to different elements of the DOM tree which are then executed too often

• Use event delegation e.g. If you have 10 buttons inside a div, attach only one event handler to the div wrapper, instead of one handler for each butto

6. Images

---

6.1 Optimize Images

Optimize images by compressing them in lossless fashion (without compromising any visual quality) to reduce page weight.

• Use Smushit or ImageMagick for lossless compression.

6.2 Optimize CSS Sprites

• Don't leave big gaps between the images in a sprite.
• Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8.
• Arranging the images in the sprite horizontally as opposed to vertically usually results in a smaller file size.

6.3 Do Not Scale Images in HTML

Don't use a bigger image than you need just because you can set the width and height in HTML.

6.4 Make favicon.ico Small and Cacheable

• Since it's on the same server, cookies are sent every time it's requested
• It also interferes with the download sequence, e.g. in IE when you request extra components in the onload, the favicon will be downloaded before these extra components.
• It should be small, preferably under 1K.
• Set Expires header with what you feel comfortable since you cannot rename it if you decide to change it.

7. Mobile

---

7.1 Keep Components Under 25 KB

This restriction is related to the fact that iPhone won't cache components bigger than 25K. Note that this is the uncompressed size. This is where minification is important because gzip alone may not be sufficient.

7.2 Pack Components Into a Multipart Document

Packing components into a multipart document is like an email with attachments, it helps you fetch several components with one HTTP request (remember: HTTP requests are expensive).

• Caution : When you use this technique, first check if the user agent supports it (iPhone does not).

Performance Tools

Note : Getting a good grade doesn't mean good performance, rather it tells that standards are being followed for better performance.

YSlow - The Tool

YSlow tool is used to analyze a web pages and get a report on why the web page is slow based on the best practices for high performance web sites. YSlow is a Firefox add-on integrated with the Firebug web development tool, and Grade pages on the basis of certain performance rules.

Google Page Speed

Page sppeed is similar to YSlow, except few more suggestions regarding client side performance optimizations.

Advanced (more)

Useful Reads

• http://developer.yahoo.com/performance/

!(How to Kill PHP Performance)

1. Wrap sting in single quote instead of double quote As PHP searches variable inside "..." but not in '...'
2. echo is faster than print print returns valus on success which degrades the performance.
3. Use echo‘s multiple parameters (or stacked) instead of string concatenation
4. Use pre-calculations set the maximum value for your for-loops before and not in the loop. ie: for ($x=0; $x < count($array); $x)
5. Unset or null your variables to free memory, especially large arrays.
6. Use require() instead of require_once() where possible
7. Use full paths in includes and requires less time spent on resolving the OS paths.
8. Close your database connections when you’re done with them.
9. Avoid use of @ Error suppression with @ is very slow.
10. Methods in derived classes run faster than ones defined in the base class.
11. Use pre-increment over post-increment
12. Use strict code, avoid suppressing errors, notices and warnings thus resulting in cleaner code and less overheads.
13. Avoid PHP scripts (unless cached) compilation on the fly every time you call them. Install a PHP caching product (such as APC, memcached or eAccelerator or Turck MMCache) to typically increase performance by 25-100% by removing compile times.
14. Try to use static pages 
    PHP scripts are be served at 2-10 times slower by Apache httpd than a static page. 
15. else if statements are faster than select statements aka case/switch.
16. In OOP, declare a method as static, if it can be . Speed improvement is by a factor of 4.
17. $row[’id’] is 7 times faster than $row[id], because if you don’t supply quotes it has to guess which index you meant, assuming you didn’t mean a constant.
18. Use 
    $_SERVER[’REQUEST_TIME’] instead of time() or microtime() when script starts
19. When parsing with XML in PHP try xml2array, which makes use of the PHP XML functions
20. Use isset where possible in replace of strlen. (ie: if (strlen($foo) < 5) { echo “Foo is too short”; } vs. if (!isset($foo{5})) { echo “Foo is too short”; } ).
21. Incrementing an object property (eg. $this->prop++) is 3 times slower than a local variable.
22. Incrementing an undefined local variable is 9-10 times slower than a pre-initialized one.
23. Use ip2long() and long2ip() to store IP addresses as integers instead of strings.
24. When using header(‘Location: ‘.$url); remember to follow it with a die(); as the script continues to run even though the location has changed or avoid using it all together where possible.
25. Just declaring a global variable without using it in a function slows things down. PHP checks If it exists or now.
26. Not everything has to be OOP, often it is just overhead, each method and object call consumes a lot of memory.
27. Make use of the countless predefined functions of PHP, don’t attempt to build your own as the native ones will be far quicker; if you have very time and resource consuming functions, consider writing them as C extensions or modules.
28. Profile your code. A profiler shows you, which parts of your code consumes how many time. The Xdebug debugger already contains a profiler. Profiling shows you the bottlenecks in overview

!(How to Kill MySQL Performance)

!(How to Kill MySQL Performance)

View more presentations from Vishnu Agarwal

Firefox Bookmark Keyword Hack

Previously I specified few firefox hacks to ease your daily internet surfing. Here I'm trying to explain how to use Firefox Bookmark Keyword hack.

Firefox provides a nice feature to Bookmark a URL and opening that for different input provided. E.g. If you want to search "Barack Osama", you can simply type "yahoo Barack Osama", and it will directly give your the search results.

Lets do it step wise.

1. Open the desired URL e.g. http://search.yahoo.com/search?p=Barack+Osama
2. Bookmark the page
3. Go to Organise bookmarks (FF version < 4.0) or Show All Bookmarks (FF version >= 4.0)
4. Search for the book-marked page here e.g. ysearch
5. Expand the property of bookmark (below "tag")
6. Replace the search string "Barack Osama" with %s
7. Enter keyword using what you want to do the search e.g. "yahoo"
8. DONE!

Type e.g. "yahoo < your name > " and enjoy the search results.

Don't limit yourself to this, create more bookmarks. Like for my personal use, I've setup many bookmarks like:

• Facebook name search "fb < name >" (http://www.facebook.com/search.php?type=users&q=%s), 
• Bugzilla search "bug < bug id >", 
• Yahoo search "yahoo < search string >", 
• Microsoft bing search "bing < search string >", 
• Google search "google < search string >".

IE9 Release Candidate (RC)

I never liked IE personally to use, specially IE6 which gave so many heart attacks (headache precisely) to almost every web developer and I'm a victim too. But after listening so many feedback and research work, I'm keen to try the new IE9 RC, and I hope this become irrelevant

Few good points in terms of performance and standards, which I hope stands true are

• Faster with real world sites
• Faster script engine
• Improved rest of the browser
• Network cache Tuning
• New Compiler optimization

Read more & Download  IE9 here:

  http://blogs.msdn.com/b/ie/archive/2011/02/10/acting-on-feedback-ie9-release-candidate-available-for-download.aspx

Firefox hacks to make browsing easy

Undoubtedly, Firefox is the best browser available in the market. Virtually there is no limit of customization you can do with Firefox. Most of these comes as extensions (add-ons).
However, settings can also be customized easily by accessing convenient location using Firefox's "about:config" hack, which can be opened by typing it into the address bar. Steps to change settings can be followed as:

• Type "about:config" in the address bar, and press enter
• Search for the setting in the "Filter" bar within that
• If desired search result found, double click to change the value, which can be integer, Boolean or string type
• In case a setting doesn’t show up in the search, just right-click and select New to create it.
• Restart Firefox
  

By following the above steps, different customizations can be done. I'll list a few here which may be useful for you as well.

1. Stop sites to blink the Text : Some websites have blinking text which irritates a lot. It can be stopped as

• In Filter search, type: "browser.blink_allowed"
• Set its the value as "false"
  

2. Open search result in new tab : Search has become the integral part of our net surfing, and while using Firefox, I quickly hit "Ctrl + k" or "Command + k" (mac) to type the keywords to get the results. However, either it will over-write the existing page or I need to open new tab first, which means extra key strokes. The setting to open the search results in new tab can be done as

• In the Filter search, type: "browser.search.openintab"
• Set its value as "true"
  

3. RAM (Memory) optimization when Firefox is minimized (Windows only) : RAM is a precious commodity. All the applications carry out their processing in the RAM. Many applications in some operating systems, returns unused RAM when they are minimized. The problem with Firefox arises in the way it handles RAM - Not releasing it when minimized. It can be handled using config.trim_on_minimize setting. Please note that, it (Windows only) does not reduce the amount of memory used, it just swaps memory from RAM to disk.

• Create new Boolean variable "New -> Boolean" by doing right click
• Name it as "config.trim_on_minimize" and set the value as "true"

4. Maximum amount of pages to be stored in memory (more) Variable browser.sessionhistory.max_total_viewers can be set to some positive number in about:config to limit the amount of pages to be stored in the memory. Default is -1, which means it automatically determines the maximum number of pages. Users not facing any memory problem may set -1. To change it

• In the Filter search, type: "browser.sessionhistory.max_total_viewers"
• Double click, and change value to some positive number (number of pages allowed to be stored in memory)
  

5. Use Firefox Bookmark Keyword

• http://vishnu-agarwal.blogspot.com/2011/05/firefox-bookmark-keyword-hack.html

Other References:

• http://kb.mozillazine.org/Memory_Leak

Favicon Optimization - Some facts

Every time a page a requested, favicon is also downloaded if present at the server. Though favicon download doesn't affect you page response time directly, but it share the bandwidth. So better to keep favicon small (preferably less than 1 KB) & cacheable.
Favicon can be used in two ways:

• Keeping the favicon.ico file in the server root directory
• favicon.ico using link attribute in the header of the HTML

I consider second approach better for the following reasons

• can be cached with the proper expiry header and can be served from CDN.
• E.g. <link rel="shortcut icon" href="http://in.yahoo.com/favicon.ico" type="image/x-icon" />

Please note that, If favicon is changed, It name cann't be changed to clear the cache, so choose the expiry time wisely.

However there are something more to know about the second approach:

• IE loads favicon before lazy-loaded components.
• It increases the load on your application server.
• Favicon loaded with a <link> are loaded early in the FF waterfall

Image Optimization

Images may be the culprit in making web page slower as images contribute the good amount to page weight. So I dedicated my little time researching about it, and found few things noticeable, which hit the web performance directly if not being followed. Ok. So question is what to do to avoid that?
Wow! You combined the images into sprites. But Is your task over?
Answer is No. The basic Idea is, how are you making the simple images and how are you combining them into one sprite.
I've few basic suggestions which should be there in our mind, while making images or sprites :
1. Avoid white spaces
2. Avoid diagonal gradients
3. Avoid Alpha transparency
4. Avoid filters eg. AlphaImageLoader
5. Limit colors
6. Horizontal is better than vertical
7. First optimize individual images, then sprite
8. Change gradient color every 2-3 pixels
9. Combine like colors
10. Reduce anti-aliased pixels - via size and alignment

The next level optimization, can be done with the help of different tools & by following some best practices.

1. SmushIt images. Do remember that this tool don't remove the meta information (author, date etc.) from the images as of now. and second point that sometimes it suggests the .png image output for some .gif image. Other So beware about the alpha color transparency in your images.
2. Use PNG (Portable Network Graphics) images are better then gifs in size. PNG8 are smaller in size, but it losses the quality of the image. so I prefer png over png8 where quality matters. Otherwise use progressively enhanced PNG8
3. PNGCrush is an open source command line optimizer for PNG files. It reduces the size of the PNG IDAT data stream by trying various compression levels an PNG filter methods
4. Avoid filters as I) Blocks rendering, freezes the browser, II) Increased memory consumption, III) per element, not per image.

These are the basics, but there are many more optimization practices.

Improve Web Page Performance

There are a lot of articles available over the internet for the same. But I found few handy for me & It will surely help the developers who are not in much of it yet. Few of the points specified over here are based on the assumption that CDN is used for the static contents, while other may work without CDN requirement.

So let me do it point vise:

1. Make fewer HTTP Requests

• Make appropriate Sprites. CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
  
• Use combo handlers to reduce the http requests
  
• Use inline code if code is small (JS/CSS)

2. Reduce DNS Lookups.

3. Use a CDN for static components.

4. Add an Expire Header

5. Compress / Gzip appropriate components.

6. Put CSS at Top.

7. Put JS at Bottom.

8. Avoid much JavaScript/CSS code as Inline.

9. Minify Javascript.

10. Avoid Redirects.

11. Optimize the images

• Use optimized favicon (favicon cann't be served from CDN)
  
• Use SmushIt.
  
• Check for unnecessary use of high quality images. eg. 45KB 300x200 dimention.
  
• Remove duplicate images.
  
• Use background-repeat CSS property for the continous images with gradient, by picking up appropriate slice of image.
  
• For the continous images without gradient, use CSS background-color. For the rounded corner use CSS properties or corner images.
  
• Avoid empty space while making sprites.
  

12. Do the Post-loading of the components, which are not in visible area intially. eg. which can be seen only after scrolling down.

13. Use AJAX to fatch the components, which are not visible in page initially. eg. tab like structure

14. Make AJAX cacheable.

Yahoo! is the clear leader in the Research for Performance. That's why I always prefer to give reference from Yahoo! sites. Like for the more performance tips in detail please refer Yahoo! performance rules.

Enjoy improved performance.