An important aspect of website design is to reduce web page load time to the lowest possible. A slim trim website design is in some ways like an attractive athletic woman, so let us call this article “A website weight loss programme” that will help you make your web pages load much faster.
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 losing 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. Pre-load Your Images
You can pre-load 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 1×1 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.
Above code can be written as below when using shorthand CSS:
background: #cccccc url(‘image.jpg’) repeat-x;
A properly created small external CSS file will substantially reduce website load time.
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.