Tips to make your webpages load FASTER!
Webpages that load too slowly - especially homepages - probably loose more potential customers than any other website design blunder.
If you've been online more than a few days, you've probably been to websites that took two or three minutes to load...
Maybe you waited for the page to load, and maybe, like most people, you just run out of patience and click away before it's done.
Because that's what happens. If a page takes too long to load, people leave.
I've had people say to me: "I get 250 hits a day, why don't I sell anything?" ...or maybe they get 100 or 1000 visitors a day, whatever, doesn't matter. The point is, they aren't looking at a much more important statistic: Visitor Time On Site.
If your home page takes 90 seconds to load, and your statistics show that 65% of your home page 'hits' are not staying past the 60 second mark, you losing a lot of potential customers!
Here are some tips and guidelines that will help you to get the best possible load-time performance out of your webpages.
Use only the Images you Need. Images should only be used to illustrate or demonstrate your product or service. That animated mermaid is really cool looking - but if your website has nothing to do with fishing or mermaids or fantasy creatures then it does not belong there.
Avoid using a graphics-heavy template... sure, it looks great, but if your visitors aren't waiting for it to download it's just a waste.
Minimize your Image File Size. Just as important as using the fewest images is the file size of each image that you do use. There are tools available that will make the file sizes smaller - which makes them load faster - so use them.
There are free tools available here >> Free Image Cruncher
There is a free program that will do just as well, maybe even better, than the image crunchers above - it's a free download, and free to use - the author only asks for donations. Ignite-2 Graphics Software
Always use the image Height & Width Size Tags. If the browser does not know how big the image is it will download all of it before 'assigning' it a place on the page.
Your image codes should always look like this:
<img src="image.gif" width="100" height="122" alt="my image" border="0">
The height and width are always given in pixels - so the image above is 100 pixels wide and 122 pixels high.
Use the best File Type for the images you are using.
* JPEG, JPG file types - Are best for images that need more color & detail, like a photograph.
* GIF file types - Best for images that don't need fine detail or millions of colors. This is the file type that supports animations and a transparent color, so it is widely used for line-drawings, animated banners, logos, etc.
* BMP file types - These are still fairly common, but the file sizes are huge, so using them for web pages is not a great idea. If you must use the image, save it as a GIF or JPEG with your image editor.
Break large pages into several smaller pages. Text loads a lot faster than images, but if your pages have a lot of text then it may pay to make a page 2, page 3, etc.
Plus - once page 1 loads, the following pages will load a bit faster, because the images will already have loaded once and will display quicker the second time around.
Use External CSS and Javascript. Reduce the file size for individual pages by placing repetitive information in external files that the browser only has to read once, speeding load time by taking advantage of the browser 'cache' feature.
A good Cascading Style Sheet will put all the formatting & layout instructions into one file... as opposed to having all those instructions written on every page, and in every instance it needs to be used.
Using Javascript for your menus, headers, footers, and any place where you want to display the same information on multiple pages also helps a lot. The 0.4% of browsers that don't handle Javascript can be given alternate information.
More information about using CSS & Javascript, and some good tutorials, is available at www.w3.org/.
Break pages into several tables. If you use tables to align your page elements, 'stack' your tables instead of putting everything inside one full-size table. The page won't actually load any faster, but the individual tables will. (See a demo page here)
Browsers load the entire contents of a table before displaying it. If your page is all enclosed in a single table then it will load and position all the elements before it displays anything.
With your page broken into several stacked tables, the top tables will load first, so the viewer will have something to look at while the lower tables load. Note - this won't work easily with some templates. You may have to experiment and test, test, test to make it work.
Don't Use Flash. Flash is great - for about 10% of internet users. Your cstomers are using all types of different computers, connection speeds and internet configuration settings... what may look great to one visitor may not even appear for another.... and it's slow.
Don't Use Music. Music files are usually huge, so they load very slowly.... depending upon where they are placed in the page code they may even stop the page from loading until after the music loads.
If you must use music, Always give the visitor an easy-to-find button to turn it off, and place it after the other information in your code.
Don't use cheap hosting. If a host is selling services more than a few cents below average for the package features, chances are good that the savings are coming at the cost of performance.
It won't matter how good the visitors connection is - if the server can only serve your pages at half-speed due to equipment over-loading or obsolescence.
If you use syndicated content on your pages - make sure that it will not slow your page load times past the acceptable limits. There is a ton of free syndicated content available, but the delivery is not all of equal quality.