Site optimization...with a difference - Get Articles by Steve Shaw |  |
> Get Articles > Search Engines and SEO > Site optimization...with a difference Site optimization...with a difference Download as PDFSteve Shaw stevepopupmaster.com PopUpMaster.com http://popupmaster.com We've all seen the advice telling us that our sites should load within 10 seconds on the average PC with an average internet connection, but what if that expectation does not meet with the practical requirements of our web site? For example, you may have found after months of testing that a longer sales letter with lots of graphics achieves the highest traffic-conversion ratio, DESPITE the long loading time. To get this sort of page to load within 10 seconds you would need to strip out most of the graphics, and in doing so discourage your visitors from reading to the end of the sales letter - the sales figures would crash overnight! So what can we do to improve loading times while still maintaining the overall visible structure and appearance of the web page? Most of us know the basics, but I can virtually guarantee that you'll find something in here you never knew before. It's fairly long this month, but I'm sure you'll find it's all well worth it. Time to get technical... [Before we start, why not find out how long your site takes to load now (or are you too scared to find out?!!). Try the FREE service from NetMechanic by going to http://www.takanomi.com/mechanic.html . Their 5-point check-up will test your links, check your HTML code, rate your page load time, check your spelling, and more! Run the check up now, and then again once you've implemented the techniques below - it's a great way to see what progress you're making, and their excellent reporting systems should find some other problems too that you never knew about!] 1. Optimize images I'm sure you've seen this one before, but it's not all about reducing the size of the images, there are other techniques you can try too. Let's go through each of them: - Reduce the size of the image file - Okay, we'll deal with the most obvious one first. This really consists of reducing the amount of memory the image takes up while still maintaining a quality you feel comfortable with. To start with, see if there are any images on your web site that you could make slightly smaller, just by resizing it within your graphics program. For example, if you have an ebook cover, try reducing the size of the image by 10%. Then you need to run a special optimizer program to reduce the memory size of the image as far as possible. I use PaintShop Pro from http://www.jasc.com/products/psp/ , and run the optimizer when I save the file. It's best to use something like this that allows you to preview your image at different levels of optimization, to ensure you maintain the quality of the image. If you want to use a free utility (but it will take longer to check your images) try the free GIFBot tool at http://www.takanomi.com/gifbot.html - this compresses GIF, JPEG and animated GIF images. - Reuse your images - This can be an easy one to miss, but you may be using the same image on different parts of your web site, but calling them from different locations on your server. For example, you may have the same image in the following locations: <img src="/front/images/button.gif"> <img src="/back/images/button.gif"> The browser will think these are completely different images and so will download them twice. If however they have the same path, the browser will only download it once, and then store it in the cache, improving the load time of your site. Alternatively you may be using slightly different images, when one would do for both. Try to reuse your images throughout your site whenever you can. - Specify the dimensions of EVERY image on - your web site If you tell the browser the exact height and width of every image on your web site, it won't have to waste time sizing and resizing the page as the image loads, which can significantly increase page load times. You've probably seen this effect yourself on web sites, with text moving around the page as images are displayed. For example: <img src="/front/images/button.gif" height="30" width="150"> The browser knows the dimensions of the image immediately and so can concentrate on loading the rest of the page from the server. Once you've set the dimensions of all of your images, use NetMechanic's service at http://www.takanomi.com/mechanic.html to double check your page - it will highlight any images you have missed (and you're bound to miss the odd one or two - well, I did anyway!). 2. Optimize tables You can also specify the dimensions of tables to reduce load time, though you have to be more careful with how your page is constructed, so make a back up first. For example, you may be able to add an exact 'width' and/or height to your table rather than leave the browser to work it out: <table width="600" height="1500"... You can also set the exact dimensions of rows and table cells, though again be wary that you don't damage the overall structure of the page - HTML tables can be delicate and get upset very easily! 3. Use a mini-table If your page consists of one very large table, the browser will wait until it loads completely before displaying it. However if you are able to split the page up into more than one table, each table loads individually, so the user sees something on the page much more quickly. I tried this technique recently on http://popupmaster.com . The page used to be constructed with a single large table, that contained various elements such as other internal tables. I redesigned it so that the top banner and buttons loaded into one table, and the rest of the page loaded into another table - the width and alignment of both tables are the same so they still fit together as if they were one. This meant that the user would see the banner and the buttons at the top, while the rest of the page loaded, thereby keeping their interest, rather than making them wait until the whole page was loaded before displaying a single thing. Using this technique means that although the page as a whole still loads slower than the 10 second optimum, you're increasing the patience of the visitor by giving them something they can look at first. 4. Outsource your scripts You may find that you are using the same scripts and/or the same style sheet information on different pages of your web site, and if it's written onto every single page you're increasing the load time of your web site unnecessarily. For example, on index.html you may have the following script, which for the purposes of the example just opens the simplest popup window: <script language="JavaScript"> <!-- window.open("popup1.html"); //--> </script> You may have the exact same script on your aboutus.html page. Did you know you can put this script in a single place and make both pages 'call' it? This has the added effect that the browser stores it in the cache for future use, so doesn't keep downloading the same script for different pages. This is even more valuable when the script is longer than the example above (which it probably will be, let's face it). To do this, create a completely new file (eg. in Notepad) and copy the script into it, but without the <script> tags, eg. <!-- window.open("popup1.html"); //--> Save this file as 'myscript.js' for example, and upload to your server. Then on any page where you want to use this file just include the following line, rather than the complete script: <script language="JavaScript" src="myscript.js"> </script> You can use the script exactly as if it were written into the page. 5. Create style sheets, and outsource again! How many places on your web page do you have code such as the following: <font face="arial, verdana, helvetica" size="2" color="black"> On many, many web sites that I come across, this type of code is all over the place, and can significantly increase the download size of the web page. There is a technique you can use that reduces the need for all this information, and stores it in a single easy place for the browser to access. Open a text-only application such as Notepad and write in the following information, adjusted as necessary for your own web site: #main{ font-family: arial, verdana, helvetica; font-size: 12pt; color: black; } Save the file as theme.css for example, and upload to your web site - this is known as a style sheet. Now all you need to do is include the following line between the <head> tags on your web page (make a backup of any effected pages before you do anything): <LINK rel="stylesheet" type="text/css" href="theme.css"> And rather than using the extended font information above, use the following tag instead: <font id=main> This will 'call' all the information in the style sheet above and apply it to the page. There's a great deal more to style sheets than this, this is only a very simple example for purposes of illustration. If you have trouble implementing this technique, fear not, it can be quite complicated and style sheets can be very powerful. For more information, or for further help, try consulting my favorite Web developer resource at Webmonkey, http://hotwired.lycos.com/webmonkey/authoring/stylesheets/ . If you don't have the time to implement all of the techniques above, try just one or two - this can sometimes mean shaving a couple of seconds or more off your download time, and this can make all the difference between a user sticking around and purchasing, or getting fed up and going elsewhere (often into the hands of a nasty green-eyed competitor ;) ) Once you've implemented a couple of these techniques, why not check on your progress with the use of NetMechanic at http://www.takanomi.com/mechanic.html . It's sure to pick up some other problems that you can quickly fix before too many of your customers notice (it's very rare for a potential customer to point out a problem to you, they're much more likely just to leave and never come back). ******************************************** Steve Shaw publishes the Takanomi Newsletter, delivering articles like the above to his subscribers free of charge. For more content like this send a blank email to mailto:takanomitakanomi.par32.com or subscribe at http://popupmaster.com . http://PopUpMaster.com - TRIPLE your profits and boost your subscribers by 535% How useful did you find this article? This article can be downloaded freely from http://www.get-articles.com and used on your website or in your ezine so long as the author is credited and their resource box left intact. You should not change any links in the article, and where the article is used on a website it's links should be clickable. Please see our terms and conditions page for more information: http://www.get-articles.com/authors-publishers-terms.php |
|
Top Articles |
||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||
May 28, 2012 © www.Get-Articles.com. All Rights Reserved.