Speeding up your web site

The most important part for a webdeveloper is to check the website for performance. How to optimize the page (code, database, image, external objects etc..). In the busy world, User will not wait until the page gets loaded. He will quit the website and moves for the another option. So once you have completed the website, you should go for page testing.

How you can test your page?
There are popular page load testing tools such as Yahoo Yslow, google's page test, Pingdom etc..

Yahoo Yslow
YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. Based on your site performance yslow will give you a grade. You can find your page speed before cache and after cache of your css, javascript files.

Image Optimization:
You can compress you image with Yahoo's Smushit, if the graphics contains huge file size.

Statistics:
The statistical graph will show you the http request and total bytes used by the page with empty cache.

Yslow Tools
JSLint - Run JSLint on all JavaScript code in this page
All JS - Show all JavaScript code in this page
All JS Beautified - Show all JavaScript code in this page in an easy to read format
All JS Minified - Show all JavaScript code in this page in a minified (no comments or white space) format
All CSS - Show all CSS code in this page
All Smush.it - Run Smush.it on all image components in this page
Printable View - Show a printable view of grades, component lists, and statistics

Yslow comes along with firebug and they have lots of tools for optimization...

Google's Page Test:
Page Speed is an Firefox3/Firebug Add-on. Web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.

I have not used google's page speed, but heard that it is also good as yslow. They have also got tool for images (just like smushit), css, javascripts etc. for more information, please use this link, Google page test.

Pingdom:
Pingdom is a website, provides free tools for webmaster. You can submit your url to check the load speed for your website. They will provide you information on load time, internal objects, external objects, script size, css size, html size, plugins, redirection if any and much more...

Permalink to this test
You can have the permanent link to the test made so that you can check at any time. You can also email this reports to your managers, friends etc...

How it works
The page load test is done by checking the complete html page including all objects (images, CSS, JavaScripts, etc...). The load time of all objects is shown visually with time bars. The statistics will show you the starting time, connection made and bytes read along with the url and its size take by it.

Test your uptime:
They also provide you a 30 days free trail to test your page and also give you the option for sms and email alerts to your site.

So check for optimization for your web pages, which will help in many ways...

Read more...

Png fix for ie6 using css

Many of the cases we would be like to have a transparent image, which is other wise called png image for our websites. Like if we need an image which is going to place in different backgrounds, we can use a single transparent image inorder to have multiple images. This is done for the purpose of site optimization and performance.

The true color (png24) will be supported by all major browser except ie6. This will automatically create a grey background because ie6 cannot recogonise the alpha filter option. So what we do? Yes we got a simple Css hack to overcome this issue.

Here is the hack
HTML Code
For Example:
<span id="alImg1">
<img border="0" src="images/htw.png"/>
</span>

CSS Code
#alImg1 img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
#alImg1{ display: inline-block; }
#alImg1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/htw.png'); }

In the above example i have htw.png. So use the id like how i have specified and call it with in the css.

Note:
#alImg1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/htw.png'); }
In this case also you need to specify the image path.

Read more...

Popular CSS Frameworks - Yahoo YUI, 960 CSS, Blueprint, Yaml, jQuery

Tried of writing HTML, CSS code to your web pages? Making your site to work with all the major browsers. Running behind CSS hacks? Here is a simple way to solve all your issues, CSS Frames. Most of the designers would heard about CSS Frames, for those who don’t know here is a brief description from: Wikipedia

A CSS framework is a library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks package a number of ready-made options for designing and outlaying a webpage.

5 Popular CSS Frameworks
1) Yahoo YUI (Yahoo User Interface Library)
2) 960 CSS Framework
3) Blueprint CSS Framework
4) Yaml (Yet Another Multicolumn Layout)
5) The jQuery UI CSS Framework

These are the top 5 CSS Framework. I have no idea about the other css framework, but i have used Yahoo's YUI framework. The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. For CSS, they provide

1) CSS Reset (neutralizes browser CSS styles)
2) CSS Base (applies consistent style foundation for common elements)
3) CSS Fonts (foundation for typography and font-sizing)
4) CSS Grids (more than 1,000 CSS-driven wireframes in a 4KB file)

You can choose the overlay of the width, by mentioning #doc or #doc2 or #doc3 etc...
* #doc - 750px centered (good for 800x600)
* #doc2 - 950px centered (good for 1024x768)
* #doc3 - 100% fluid (good for everybody)
* #doc4 - 974px fluid (good for 1024x768)
* #doc-custom - an example of a custom page width

Templates
Optionally choose the secondary column's width and orientation with one of six templates.

* .yui-t1 - Two columns, narrow on left, 160px
* .yui-t2 - Two columns, narrow on left, 180px
* .yui-t3 - Two columns, narrow on left, 300px
* .yui-t4 - Two columns, narrow on right, 180px
* .yui-t5 - Two columns, narrow on right, 240px
* .yui-t6 - Two columns, narrow on right, 300px

Nesting Grids
Optionally nest standard grids (.yui-g) and special grids (.yui-gb, ... .yui-gf) to subdivide.

* .yui-g - Standard half grid (and nest again for quarters).
* .yui-gb - Special grid, 1/3 - 1/3 - 1/3
* .yui-gc - Special grid, 2/3 - 1/3
* .yui-gd - Special grid, 1/3 - 2/3
* .yui-ge - Special grid, 3/4 - 1/4
* .yui-gf - Special grid, 1/4 - 3/4

If you find this is diificult to keep in mind, they have got a grid builder, a simple interface for Grids customization. Where you mention the values in the box, it will provide you the results.

YUI Components
Along with CSS they also provide YUI Components where you can easily integrate with javascripts for animations, Carousel, Slider, Resize and lots more...

YUI Compressor
With this tool YUI Compressor, you compress your css and javascripts file which will reduce your file size into half. This is very much helpful for web optimizer.

To know more details and to download the latest version of YUI, please visit the site Yahoo YUI. Majore Interent companies like Sulekha, Sify are using YUI.

Read more...

How to Create Optimized Landing Pages that Convert?

Like SEO, SEM plays a major role in promoting the website to make revenues on the basis of ROI. The online business battle will be waged over conversion rates and return on investment (ROI), not traffic acquisition. The Landing page is the key factor inorder to make conversions rather than investing in an normal page.

Successful landing page
Your landing page should look like

1) Clear informative layout
2) Use Catchy Headlines, catchy titles are a plus.
3) Using contextual internal links
4) Should focus on What's the offer?
5) Who's interested?
6) Why are they interested, and why should they take further action?
7) How do they get started?

When visitors landed on the common home page, they stayed longer and visited more pages. Yet a larger percentage left without converting. When visitors landed on custom pages, they stayed for less time and viewed fewer pages. But these visitors converted two to three times more than the visitors to generic landing pages.

Make sure that you use your design part most in the header section to attract the audience. And don't use images which ever you want to convey to the audience (the important note) which will be useful for seo section. Don't forget to have an Action Button near to your conveying message. Always keep in mind that most of the visiter would be using 800X600 resolutions, so keep your design with in that screen resolutions.

Optimize your web page when you are using high quality graphic images which will save your loading time. Use HTML Emailers to promote your Landing page.

Read more...

CSS Sprites

Now a days CSS Sprite plays a major role in developing a web page. One of the techniques developed, sprites being plugged into a master grid, then later pulled out as needed by code that mapped the position of each individual graphic and displayed it on the screen. First of all you need to know how to make a transparent gif image with positions using Photoshop.

Sprites were displayed over a static or dynamic background image, and the positioning of the sprite was controlled simply by the css background positions. To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed. Any hover, active or focus effects would be implemented using the simple definition of the background-position property for the displayed element.

When a page is loaded, it will load as a single images which is highly useful in reducing the request time of the server. YAHOO, GOOGLE, DIGG, SULEKHA etc... are also using sprite images inorder to load their pages faster.

For example:
You can see the GOOGLE sprite images, how it was created and called using css bacground.



.logo {background:transparent url(/images/sprite.gif) no-repeat scroll -190px -236px;}

Read more...

CSS Image optimization

Image optimization, plays a majore role inorder to load your page faster. There are many good image editing tools that allow us to get the best visual result for a certain file size, but they lack in quality. Saving bytes has never been so easy. Smushit! is a service that goes beyond the limitations of Photoshop, Fireworks & Co. It uses image format specific non-lossy image optimization tools to squeeze the last bytes out of your images - without changing their look or visual quality. This tool now is also recommended by YAHOO and GOOGLE.

How it Works
You can give any format image like gif, jpeg or even png. Smushit will convert your given format file into png8 format. PNG true colors such as png24 will not support by ie6, but png8 will be supported by all leading browsers.

I also recommend this. for more optimization info also visit Page Speed by google

Read more...

Google’s success is the site’s speed

One of the most fundamental reasons for Google’s success is the site’s speed — search queries typically take a fraction of a second, and most of the company’s other services are usually very snappy as well (save for Gmail, which occasionally bogs down). Part of this speed can be attributed to the company’s obsession with minimalist design and its vast server farms, but you can be sure there’s no shortage of optimization that’s going on to make sure pages load as quickly as possible on the front end, too.

To help streamline its sites, Google has been using an internal tool called Page Speed, and starting today it’s opening up the tool to the developer community. The newly open-sourced tool is a Firefox plugin that integrates with Firebug, making suggestions on how to speed up your site based on best practices.

From the Google blog post:

For example, Page Speed automatically optimizes images for you, giving you a compressed image that you can use immediately on your web site. It also identifies issues such as JavaScript and CSS loaded by your page that wasn’t actually used to display the page, which can help reduce time your users spend waiting for the page to download and display.

If this sounds familiar, it’s because Yahoo offers a similar tool for Firefox called YSlow, which is also meant to help developers streamline their websites.

Read more...