http://www.articletrader.com/ Articles at ArticleTrader en-us http://www.articletrader.com/internet/web-design/website-design-tips-how-to-reduce-website-load-time.html http://www.articletrader.com/internet/web-design/website-design-tips-how-to-reduce-website-load-time.html Thu, 17 Apr 2008 00:00:00 -0500
Why is it so important to reduce website load time?

A website has global reach but Internet connection speeds in various countries are not the same. A lot of dial-ups and slow broadband connections still exist. Recently published research has revealed that unless massive amounts are spent on improving Internet infrastructure, the average global connection speed may show a dip by 2010. Even for those who do have high-speed connections, the total number of relevant websites on the Internet is growing fast. This directly translates into less time spent by the viewer per web page. Generally speaking, patience is a rare commodity in today's world of reducing resource-to-consumption ratios. Do you want to neglect a large proportion of potential worldwide customers just because your web page load time is slow? If not, then follow the steps below to reduce website load time.

Women usually work on trimming the hips, shaping legs and removing cellulites in various places. Similarly, I have classified below “website weight loss programme” into three ‘broad’ categories: Graphics, Code and Other Factors. Please note that you should meticulously follow as many steps as you can to take the redundant fat out of your website design and reduce “website loading time” to a bare minimum.

WEBSITE WEIGHT LOSS PROGRAMME

A. TRIM the Graphics (Slim hips:-)

1. Avoid Graphic Heavy or Complicated Web Design

Website designs that use many images (especially those with special effects) generally take a long time to load. What if a good looking website keeps loosing valuable visitors just because its web pages take too much loading time? Try to be discrete and use less number of images / graphics while maintaining the look and impact of the website design. Remember that text links are easily read by search engines and load faster than graphic buttons. Sometimes it is also possible to move large images from an important page to a section like “Gallery” to reduce web page load time.


2. Use Only Optimized Images

Optimize each image in editing software like Photoshop. There are different image formats like GIF, JPEG, PNG, TIFF etc., so try to save images in the appropriate format. As a rule-of-thumb, GIF is more suitable for uniform color images and JPEG for real world scenes. GIF saved at 256 colors should be reduced (as much as possible) to 128, 64 or 32 colors without comprising image quality. To reduce website load time JPEGs should be saved in the lowest quality possible without spoiling picture impact. You can also use PNG if you are sure that your users are using newer browsers.

3. Specify Image Dimensions

While inserting images in HTML always mention height and width attributes. This helps the web browser to know the image size before loading it. The browser will then reserve the area for the images while rest of the web page design continues to load, thereby reducing website loading time. Do not use the height and width tags for image size reduction.

4. Preload Your Images

You can preload some heavy images of the next pages (that can be reached by clicking on links within the current page) by defining them at the footer of the current web page. For example, img src=”nextimage” height=”1” width=”1” inserts a 1x1 pixel image in the footer that is read by the browser when the code above it has been read. Thereafter, while your visitor is viewing your main page, images of the next page will continue to download to the viewer's PC in the background and will reduce subsequent web page load times. This is not recommended for direct Adwords landing pages because Google has recently announced that high web page load time will negatively impact the landing page quality score.


5. Optimize Flash Files

Animating important stuff can make an impact on the visitor. If possible, avoid animated GIF images in website designs; instead use Flash with discretion. Always use optimized flash files. There are so many ways to reduce Flash loading time that I will be covering this in a separate article.


B. TRIM the Code (Shapely legs ;-)

1. Remove Useless Code:

While using an HTML generator, some extra or empty tags get inserted in the code, for e.g. breaking spaces, block quotes, unnecessary extra space, blank lines etc. Even if you hand-code HTML, always manually check your website design code and remove the empty or unnecessary HTML tags. Use appropriate DOCTYPE and close all HTML markup elements. The browser will then have less work to do matching elements. Clean coding of a web page will not only reduce website load time but also increases your text-to-code ratio and search engine spiders do not have to spend time deciphering irrelevant stuff.

2. Use of Shorthand External CSS

CSS helps make your website design code compact as well as clean and its proper usage helps reduce website loading time. Define common font styles, images etc. (used in a set of web pages) in one single external CSS. By doing this, you will not have to insert the same tags again and again on different pages - just call the CSS and apply that particular class. With all your repetitive stuff defined in the CSS file, the browser won't have to read each single tag all over again. Always use External CSS file and remember to remove extra, unused styles from it.

Use smaller class names and shorthand CSS instead of putting each CSS attribute in its own line.

For example:

“body{
background: url("image.jpg");
background-color: #cccccc;
background-repeat: repeat-x;
}”

Above code can be written as below when using shorthand CSS:

“body
{
background: #cccccc url('image.jpg') repeat-x;
}”

A properly created small external CSS file will substantially reduce website load time.

3. Use External JavaScript

If you must use JavaScript, merge small common JavaScript files into a single external file and then (for newer browsers) you may compress it. This will reduce website loading time and you don’t have to write the script on each web page – the web browser has this file in its cache and won’t have to download it each time another web page loads.

4. For Table Based Website Design

Avoid unnecessary nested and full-page tables. If you insert a table inside another table, it increases web page load time because the browser has to read the content located in the innermost table. Avoid unnecessary nested tables, instead divide your page into different sections like header, body, footer etc. according to your layout and use a different table for each section. Your browser will be able to load your web page a bit faster.

5. Use Table-less Website Designs

Every time when a website is opened, the browser has to first scan tables and then load the content of the page which increases the website loading time. Using CSS and DIV tags you can avoid tables altogether and reduce website loading time substantially.

C. OTHER factors that reduce website load time (remove the cellulites:-)

1. Host on a high-end server with fast connectivity to decrease website loading time.

2. If you have a database driven website, it is faster and more secure to place your content on one server and your database on another. Consider SSI for common page elements, AJAX for page refreshes and Jar compressed files that load faster into the temp.

3. Avoid background music files and if it is very necessary to use them then use highly compressed music file formats. Avoid having much stuff on your website loading from other websites and reduce the number of HTTP requests.

4. Adding a slash at the end of a link like domain.com/contact informs the server that this is a directory page and it does not have to waste time working out what kind of file exists at that address.

5. Using fewer redirects, Iframes, PhP and database queries also helps reduce website loading time.

If you have followed the above website weight loss programme and made your website design slim and trim, you will be thrilled every time you see its performance. Remember that quality websites offer a lot of fresh content. When you add new pages, do not forget to apply the above tips to reduce website load time.

--
Rajiv Kakar of Centaurhosting.com ( Website Design Company India) has been actively engaged in SEO Services, Web Designing and Hosting for the last several years. He recommends visiting their Web designing Delhi Studio for more information about processes involved in website design.

Source: http://www.articletrader.com ]]> http://www.articletrader.com/internet/web-design/business-website-design-preparation-and-planning.html http://www.articletrader.com/internet/web-design/business-website-design-preparation-and-planning.html Thu, 24 Jan 2008 00:00:00 -0600
"Preparation is half the game" in almost every area of life and thoroughly planning a website design is absolutely critical for its success. At Centaurhosting.com (Website Design Company India), I have often instructed new web designers to do MUCH more than just viewing competitor websites & template concepts before beginning web design. In this article we will study the actual important steps of website design preparation and planning that can result in an international standard, user-oriented business website.

1. (Warren Buffett time) The CEO perspective. Read the information / material of the company and interact with their CEO / marketing head to acquire an understanding of their business and website design requirements. Create what I call a “CEO sheet” and note down the information they give you. What does the company want to achieve through the website? Which products, services or ideas do they want to highlight? What about the company’s brand image and customer focus? Naturally a CEO would think about business, more business, yet more business. While understanding the company’s business perspective do not forget the customers who allow the business to exist. Your website design planning should focus on building an enduring enterprise through the website, not just rapid fortune.

2. (David Ogilvy time) The Advertising perspective. Mental gymnastics is not effortless but if you have a strong imagination you will be able to comprehend many focus areas of the company’s advertising department. If possible, meet the Advertising Head. If the company does not have a dedicated PR / advertising department try changing the questions in the CEO sheet from “what/which” category to “how”? Think HOW you can use the website design to increase awareness of most important products, how to create a good reputation, how to improve customer perception etc.? Get information or think up punch lines that hit the customer, banners that catch the eye, special offers etc. Write down all of this on the second website design preparation sheet - “Advertising Objectives Sheet”.

3. (Chanakya Strategy Time) R & D. Before any website design concepts begin to take shape in your mind, it is time to do thorough research. Analyze (not view) design and functionality of competitor websites to assess their weaknesses and strengths. Look at the navigation, organization, performance, customer impact etc. and record what they are doing well and how you can do it better. For noting these points, I suggest that you create your third website design planning sheet titled “Competition Analysis”. Create a table with features as rows and competitor names as headings. Then write down your views about each feature in the relevant boxes.

4. (Srinivasa Ramanujan style) Dream time: By now your should have some idea about the business objectives and advertising strategies that your website design will incorporate. You also know what your website is going to be competing against. To avoid “analysis paralysis”, take a short mental break and indulge in daydreaming. This is the special prerogative of website designers – being paid to day dream on the job :) Allow what you have done so far to draw a rough image of the website in your mind. Imagination is the true measure of intellect. Dream languidly or even fantasize about your website design till you begin to feel the excitement that indicates you are getting close to completing your website design preparation. Compare your dream image with hard business facts and mould the website design mentally.

5. (Common Man Time) Be thy customer. This is perhaps the single most important factor in website design preparation and planning. Customers’ website experiences not only affect brand satisfaction but also directly translates into sales. Imagine that you visit the website that you have mentally visualized. Would you feel at home with its colors, usability, functionality, personalization, level of detail, aesthetics, speed and security?

6. Leonardo Da Vinci Time: Mental refinements can only go so far. It is time now to amalgamate the mental imagery more concretely with our website design planning sheets. I have frequently stressed upon website designers to first draw their concepts on paper with colored pencils before starting their favorite editing software. It allows free expression without constraining your ideas to tool limitations. Draw, redraw and refine your concept. Refer to the CEO, Advertising and Competitive Analysis sheets frequently. Stop only when you are satisfied that all the mental exercise you have done in the above steps is well reflected in your drawing. Now consider the web designing tools that you will need yourself and consult with your web programming team regarding scripts, databases and other technical requirements of the website. I strongly suggest expanding knowledge of tools or finding alternate methods rather than completely distorting your drawn concept due to software limitations. If you try hard enough the solution will present itself.

7. (Sherlock Holmes Time) Resign: Sherlock himself did play the violin at strange hours and was acutely aware of the power of detachment. A well-rested free mind is a potent weapon. Let go of all thoughts related to website designing for a while and do something else. After a short total break begin designing your website.

Names of some famous people have been mentioned above for a reason. The more astute website designer can read about them in free time or on a holiday to acquire insights into requisite perspectives.

Talent fuels passion. Many would be inclined to think that after spending so much time and energy on website design preparation and planning, would one have enough left for implementing the same. Strange are the neuron pathways. The conscious and sub conscious are both far more powerful than we comprehend. You will pleasantly surprise yourself when occasionally the entire website design planning takes a few hours. One last word: Remember to savor and cherish your creation when it is complete.

--
Article written by Rajiv Kakar (of Centaurhosting.com) actively engaged in SEO Services, Web Designing and Web Hosting. He recommends visiting their Web designing Delhi Studio for processes followed in website design.

Source: http://www.articletrader.com ]]>