In the relatively early days of web site development, optimizing page load times was a very important issue that you'd read about every other day through various development resources. Over the last couple of years, reminders about the importance of fast loading pages seem to have faded into the background given the uptake of broadband. The bloat on the internet these days are shameful. Just ask anyone you might know still using a slower connection.
Many designers have taken advantage of increased bandwidth available to users to create eye-popping designs that now take as long to load as simpler pages did over a 56k (or even 28.8k) connection. Yes, it's nice to show off artistic skill, but where is the advantage to the user?
Other sites are now so technically complex, with multiple database connections needing to be made each time a page is loaded. It just doesn't make sense to be using faster access speeds to create the same problems that we've all endured on the web in years gone by.
Just because a user now has a faster connection, it doesn't mean that their attention span has increased - in fact, it's probably lessened over the years.
The other issue is that many site owners seemed to have forgotten is that there are still dialup users out there - millions and millions of them. Of the estimated 237 million US adults currently online (2007 figures) 19% still access the Internet via dialup. No doubt there will still be many millions of dialup users globally well into 2010 as well. Some of these users could be your potential customers.
Dialup users are online shoppers too Some rural areas only have dialup and believe me, if they're looking to buy something and the page doesn't load quickly enough - They go elsewhere...
15 seconds page loading time - maximum The old rule of thumb applies - 15 to 20 seconds load time on a 56k connection where possible. That is the maximum you should aim for. If you're using a web page editor such as FrontPage or Dreamweaver, it will tell you how fast the page will load under a particular connection speed.
To set this in FrontPage, go to Tools/Options/Reports View. Set "Assume connection speed of" to 56.6. The page load time will appear in the status bar on the right hand side.
In Dreamweaver, the load time also displays in the status bar. To set the connection speed, go to Edit/Preferences/Status Bar. Select 56.6 from the Connection Speed option.
While these indicators aren't totally accurate, they are a very handy guide.
Optimizing for faster page loading The following are a series of optimization ips that can substantially decrease load times, and make general site management a simpler task overall.
Optimize images This used to be a difficult task, but now almost all graphics editors have features to optimize images for the web - use them. With a few clicks of a button, you can turn a 100kb file into 20kb, without any noticeable loss of quality.
Use thumbnails Do you really need to have an image that takes up half a page? If it's a product, consider using thumbnails. A thumbnail is just a smaller representation of an image that a user can click on if they wish to see the larger version.
Applications such as FrontPage have an automated thumbnailing option. In Frontpage, click on the image and in the picture toolbar that should appear below it, the (usually) third icon along will create a thumbnail automatically. Just be sure to edit the thumbnail link so that the full size image appears in a new window.
Animations Cute, but are they effective? What are they conveying? If they have no practical use, get rid of them. Use a static image instead. If you need to keep an animation, run it through the optimization tool in your graphics package.
Use a common image folder I've seen some sites that have the same image on a number of pages and in different sections; but the image has a different filename. This means that the browser has to fetch it from the server instead of just reloading it from the cache. By using a common image folder, you lessen the chances of having duplicates. It's not only a good tip to improve page load times, but it's part of good file base structure.
Use tables wisely The way browsers work is that they "wait" until all the items in a table are loaded before rendering the content. So, if your entire page content is sitting between a <table> and </table> tag, the user sees nothing until all the items are loaded and then suddenly the page appears. Such as we do on our www.BiddersSite.com site. If the user is waiting too long, they may think that there's something wrong with the page and click off somewhere else.
If you use tables as the framework of your site, it's best to split up the content into header, "middle" and footer tables. That way the user will at least see something while the page is loading and you increase your chances of them hanging around long enough to purchase something from you. Note that our header is loaded almost immediatly, to greet the visitor, while the remainder of the page does the query and generates the data for display.
Tables??? What about CSS! ... I hear the purists yell. I don't claim to be any sort of expert in using CSS (Cascading Style Sheets) for element positioning without tables, but there are many fine resources out there for learning more, including ebooks that can be downloaded freely. (Look in our IT Freebies section)
Other benefits of CSS While I may not be a expert with positioning without tables using CSS, It is used extensively for text formatting. If you're not using Cascading Style Sheets, your page coding probably looks something like this:
code:
<h2><font face="Arial" color="#008000">Here is a heading</font></h2>
<p><font face="Verdana" size="2">This is a sentence</font></p>
This repeated dozens or perhaps even hundreds of times on a page creates substantial code bloat - but this is an issue that's also easy to optimize.
By using a linked Cascading Style Sheet, which is basically just a set of instructions of how to represent elements your source code will be a lot lighter, therefore download faster. CSS has the added benefit of making site-wide formatting updates a lot faster too - change one file and all your pages will change to the new format. This works well for sites that use a consistant look through out.
Do you really need it? Look at your pages objectively - do you really need that groovy little javascript code snippet that displays the users current time? If it's not necessary, lose it. It will not only speed up the load time, but also allow for a less cluttered environment. If your visitor wants to know the time, they can shift their eyes a few inches and see it in their system tray.
Too many database queries With so many sites now powered by database applications, and complex ones at that, the more queries or calls to a database that need to be made in order to generate a page, the slower it will load, and not only that, the more load it will put on the server your site is hosted on. This is something that we are especially well versed in, being that our main site is a auction, we use lots of queries to gather all the different real time data for items, bids, time, pricing, users, fees and features.
Aside from the annoyance to your potential customers, server resource hogs tend to get zapped by hosting companies. While you may be somewhat limited in what you can do about this as it can be the fault of the software vendor, applications like shopping carts that allow you display X number of items per page should be configured to show only the number of items on each page that can be loaded in a reasonable amount of time. Yes, people hate clicking to get to the next page, but they hate waiting for a page to load even more.
If your pages suffer seriously from bloat, try some of these tips out. You'll be amazed at how many seconds you can shave off a page that hasn't been optimized and I'm sure that you'll reap the rewards - increased site stickiness, page views and ultimately, revenue!