|
Optimize Page Loading Speed
What causes slow loading pages? The short answer is file size. That is a combination of the text, graphics and images contained on any given web page. How fast the web server can display the information coupled with the speed of the web surfers connection complete the cycle of "page loading speed".
As a web designer you may only have limited control over the server's speed and absolutely no control over what connection the surfer is using. The best a designer can do is keeping the code tight and the text to a minimum. One area that the designer can have a great effect on is the size (weight in Kb) of the image.
Preparing Images for web display:
Select only the part of the image necessary to the message. Crop as much as possibly. Lose any part of the image that is empty or un-necessary space. Adjust the resolution from anything over 72 dpi down to 72 dpi. Resize the image to as small as possible without losing the necessary impact. If the image is 200 X 100 call that size in the HTML code. Never use the HTML code to re-size an image, up or down! With jpg and png images (photos) apply as much compression as possible without sacraficing the quality needed. Use gif format (works best for graphics rather than images) with fewest number of colors possible. The level of compression is fixed for gif images.
- Optimum Specifications for Web Images:
- Image size: The smaller the better
- Resolution: 72 dpi
- File format: jpg, png or gif
- Compression: As much as possible while retaining quality
- Never use the surfers "browser" to re-size the image!
Online Graphics Resources:
There are still a few web sites that offer, free, to help optimize web images and graphics. Depending on need and frequency of use it may be more effective (time) to own your own program.
Recommended Programs:
List by greatest suggested retail price: Adobe PhotoShop; Ulead PhotoImpact;
Net Studio (creates buttons & graphics);  CorelDRAW Essentials; Paint Shop Pro (PSP Info);
Freeware & Shareware Programs:
- Optimize all graphics with Trouts Gif Optimizer 2.3 (Adware).
- ShoeString Picture Dicer (Image Slicer) Version 0.39 (Freeware)
- GifClean32 (gif only) Version: 2.6d (Freeware)
- Reasoft.com features several web graphics programs that are very useful.
- (Trialware)
Proper Style & Tight Code:
When writing the page code remember there are choices that can make a page load faster. Listed below are a few tips on keeping the text, code and choices aimed at a fast loading page. Follow proper basic page code techniques. Resource.
- Remove all extra spaces in code and text.
- Keep meta-tags to a minimum.
- Don't run large javascripts in the <head>.
- Remove all comment <!-- Reminder --> tags.
- Keep any single line of code (meta-tags included) to less than 255 characters
- (200 may be better)
- Write (format) code inline rather than stacked or staggered.
- Call a background color rather than use an image. - <body bgcolor=ffffff>
- If used, "tile" small background images.
- Use tags with every graphic. -
- <img src="pic.gif" alt="image description" height="100" width="150">
- In some browsers this will force text to load first giving the user visuals while graphics load.
- Use Thumbnails wherever possible.
- Remove any un-necessary </tags> end tags. - trial & error (test in browsers).
- Write, read, re-read, re-write text to be succinct and economical.
"more" Web Site Design Tips, Tricks and Secrets!
- Browser Friendliness: Take the number of different web browsers and multiply that times the number of different version and multiply that times the number of operating systems and multiply that times the number of different video display modes and you get a staggering number. If the index page isn't simple and well designed there is no way to know how the surfer will see it displayed. This is where K.I.S.S. comes back into play. More information about browser optimization!
- Simple Navigation: Think of web site navigation in outline form. An organized presentation of information. Simple. Easy to follow. The path may need to be forced. Several different links leading to the ultimate goal. That goal is different - based on what the site is trying to accomplish. Have several different "testers" try the site under observation. Modify, based on their reactions, questions, success or failure to browse the site.
- Meta Tags: The "meta-tags" contained between the <head> </head> html tags are used by many search engines to define the title, description and content of a web site. Proper use of meta-tags will help in placement with some of the "big 10" search engines. If the search engines can't find and properly index a site, neither can surfers using those engines. Learn about optimizing meta-tags.
- Facade Pages: Use registered variations of the domain name to build, link, promote and track, "facade pages", to boost traffic to the primary domain. Web host hrc4.net offers facade pages.
- Update Frequently: Give your surfers a valid reason to return to the web site(s) by constantly updating information, entertainment, providing a new service or presenting a new product. Make a "what's new" link part of the index page.
- Ask For Feedback: Contact information and Email links must be easy to find. Ask for Questions and Comments!
Compromise:
Fastest Page Loading: The smaller the image, the greater the compression and the tighter the code the faster the page loads. But does the image still have the enough impact and quality to do its job? Is the code so tight and hacked that a page edit is a nightmare? Write a page not so you can be understood, but rather, that you can't be misunderstood. Web page designers often compare the process of accomplishing both design goals and page goals to that of walking a tightrope, without a net.
To Steal a Phrase ... Just Do It! An idea left on the shelf is truly a loss ... a loss to everyone, most importantly a loss to YOU!
Questions?... Comments ... Please E-Mail us!
Back
Home Photography Graphics Video Models
Web Services Leftovers Links Production Services
New Affiliations Privacy Policy
If you experience any problems with this site, please contact webmaster@rlpg.com
Web Services - Optimizing Page Loading Speed; last updated: 10/31/02 cl
Section Contents Copyright 2000 - 2002 Ray Litman Photo Graphics All rights reserved.
All Other Trademarks And Copyrights Property Of Their Respective Owners, All Rights Reserved
Mention Of A Tradename Or Product Does Not Indicate An Endorsement By Or Knowledge Of The Owner |
