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

HipHop for PHP project from Facebook

Today, Facebook shared one of its cool project - HipHop for PHP. Over 90 percent of Facebook servers are now using HipHop as the project opens to the community, promising better performance and scalability.

What is the use?
HipHop can reduce the CPU usage at the server even by 50% depending on the page executing PHP code. Reducing the overhead this way, it can help in scaling complex PHP websites. As per Facebook latest news, HipHop has shown incredible results for Facebook.

How does It optimize?
HipHop doesn't work like a compiler technically, instead HipHop programmatically transforms your PHP source code into highly optimized C++ and then uses g++ to compile it. HipHop executes the source code in a semantically equivalent manner and sacrifices some rarely used features — such as eval() — in exchange for improved performance. HipHop includes a code transformer, a reimplementation of PHP's runtime system, and a rewrite of many common PHP Extensions to take advantage of these performance optimizations.

It's not complete yet, but beta software can be tried before trying it out. I need to still try it out.

Some useful links:

• Twiki : http://github.com/facebook/hiphop-php/wikis
• Dev mailing List : http://groups.google.com/group/hiphop-php-dev
• Source News : http://developers.facebook.com/news.php?blog=1&story=358
  

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.