Thursday, May 28, 2009

Best Practices for Speeding Up Your Web Site - Avoid Filters

The IE-proprietary AlphaImageLoader filter aims to fix a problem with semi-transparent true color PNGs in IE versions < 7. The problem with this filter is that it blocks rendering and freezes the browser while the image is being downloaded. 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.

Saturday, May 2, 2009

Best Practices for Speeding Up Your Web Site - Choose <link> over @import

One of the previous best practices states that CSS should be at the top in order to allow for progressive rendering.

In IE @import behaves the same as using <link> at the bottom of the page, so it's best not to use it.

Saturday, April 25, 2009

Best Practices for Speeding Up Your Web Site - Don't Scale Images in HTML

Don't use a bigger image than you need just because you can set the width and height in HTML. If you need
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
then your image (mycat.jpg) should be 100x100px rather than a scaled down 500x500px image.

Tuesday, April 7, 2009

Best Practices for Speeding Up Your Web Site - Optimize Images

After a designer is done with creating the images for your web page, there are still some things you can try before you FTP those images to your web server.

     
  • You can check the GIFs and see if they are using a palette size corresponding to the number of colors in the image. Using imagemagick it's easy to check using
    identify -verbose image.gif
    When you see an image useing 4 colors and a 256 color "slots" in the palette, there is room for improvement.
  •  
  • Try converting GIFs to PNGs and see if there is a saving. More often than not, there is. Developers often hesitate to use PNGs due to the limited support in browsers, but this is now a thing of the past. The only real problem is alpha-transparency in true color PNGs, but then again, GIFs are not true color and don't support variable transparency either. So anything a GIF can do, a palette PNG (PNG8) can do too (except for animations). This simple imagemagick command results in totally safe-to-use PNGs:
    convert image.gif image.png
    "All we are saying is: Give PiNG a Chance!"
  •  
  • Run pngcrush (or any other PNG optimizer tool) on all your PNGs. Example:
    pngcrush image.png -rem alla -reduce -brute result.png
  •  
  • Run jpegtran on all your JPEGs. This tool does lossless JPEG operations such as rotation and can also be used to optimize and remove comments and other useless information (such as EXIF information) from your images.
    jpegtran -copy none -optimize -perfect src.jpg dest.jpg

Monday, March 9, 2009

20 very useful Eclipse IDE Shortcuts for Developers

Eclipse have been my favorite Java IDE since I started coding in  Java. Shortcuts makes life very easy when you are working with any IDE.  Eclipse also comes with lot of shortcuts that makes like of a developer  easy.

Following are few shortcuts of my choice.

     
  1. Ctrl + Shift + O : Organize imports
  2.  
  3. Ctrl + / : Line Comment
  4.  
  5. Ctrl + Shift + T : Open Type
  6.  
  7. Ctrl + O : Open declarations
  8.  
  9. Ctrl + E : Open Editor
  10.  
  11. Ctrl + Shift + F4 : Close all Opened Editors
  12.  
  13. Alt + Shift + R : Rename
  14.  
  15. Alt + Shift + L : Extract to Local Variable
  16.  
  17. Alt + Shift + M : Extract to Method
  18.  
  19. F3 : Open Declaration
  20.  
  21. Alt + Shift + X : Run As…
  22.  
  23. Alt + Shift + D : Debug As…
  24.  
  25. Alt + Shift + W : show the class in the package view.
  26.  
  27. Ctrl + T : Type hierarchy
  28.  
  29. Ctrl+Q : Last edit
  30.  
  31. Alt + Left or Alt + Right : Navigate Left and Right
  32.  
  33. Ctrl + 1 : Quick Fix
  34.  
  35. Ctrl + Space : Content Assist
  36.  
  37. Alt + Shift + F : Format code
  38.  
  39. Alt + Shift + S + R : Generate getter and setter methods