| An important aspect of website design is to reduce | | | | 1. Remove Useless Code: |
| web page load time to the lowest possible. A slim | | | | While using an HTML generator, some extra or |
| trim website design is in some ways like an attractive | | | | empty tags get inserted in the code, for e.g. breaking |
| athletic woman, so let us call this article "A website | | | | spaces, block quotes, unnecessary extra space, blank |
| weight loss programme" that will help you make your | | | | lines etc. Even if you hand-code HTML, always |
| web pages load much faster. | | | | manually check your website design code and |
| Why is it so important to reduce website load time? | | | | remove the empty or unnecessary HTML tags. Use |
| A website has global reach but Internet connection | | | | appropriate DOCTYPE and close all HTML markup |
| speeds in various countries are not the same. A lot | | | | elements. The browser will then have less work to |
| of dial-ups and slow broadband connections still exist. | | | | do matching elements. Clean coding of a web page |
| Recently published research has revealed that unless | | | | will not only reduce website load time but also |
| massive amounts are spent on improving Internet | | | | increases your text-to-code ratio and search engine |
| infrastructure, the average global connection speed | | | | spiders do not have to spend time deciphering |
| may show a dip by 2010. Even for those who do | | | | irrelevant stuff. |
| have high-speed connections, the total number of | | | | 2. Use of Shorthand External CSS |
| relevant websites on the Internet is growing fast. | | | | CSS helps make your website design code compact |
| This directly translates into less time spent by the | | | | as well as clean and its proper usage helps reduce |
| viewer per web page. Generally speaking, patience is | | | | website loading time. Define common font styles, |
| a rare commodity in today's world of reducing | | | | images etc. (used in a set of web pages) in one |
| resource-to-consumption ratios. Do you want to | | | | single external CSS. By doing this, you will not have |
| neglect a large proportion of potential worldwide | | | | to insert the same tags again and again on different |
| customers just because your web page load time is | | | | pages - just call the CSS and apply that particular |
| slow? If not, then follow the steps below to reduce | | | | class. With all your repetitive stuff defined in the CSS |
| website load time. | | | | file, the browser won't have to read each single tag |
| Women usually work on trimming the hips, shaping | | | | all over again. Always use External CSS file and |
| legs and removing cellulites in various places. Similarly, | | | | remember to remove extra, unused styles from it. |
| I have classified below "website weight loss | | | | Use smaller class names and shorthand CSS instead |
| programme" into three 'broad' categories: Graphics, | | | | of putting each CSS attribute in its own line. |
| Code and Other Factors. Please note that you should | | | | For example: |
| meticulously follow as many steps as you can to | | | | "body{background: url("image.jpg");background-color: |
| take the redundant fat out of your website design | | | | #cccccc;background-repeat: repeat-x; |
| and reduce "website loading time" to a bare minimum. | | | | }" |
| WEBSITE WEIGHT LOSS PROGRAMME | | | | Above code can be written as below when using |
| A. TRIM the Graphics (Slim hips:-) | | | | shorthand CSS: |
| 1. Avoid Graphic Heavy or Complicated Web Design | | | | "body |
| Website designs that use many images (especially | | | | {background: #cccccc url('image.jpg') repeat-x; |
| those with special effects) generally take a long time | | | | }" |
| to load. What if a good looking website keeps loosing | | | | A properly created small external CSS file will |
| valuable visitors just because its web pages take too | | | | substantially reduce website load time. |
| much loading time? Try to be discrete and use less | | | | 3. Use External JavaScript |
| number of images / graphics while maintaining the | | | | If you must use JavaScript, merge small common |
| look and impact of the website design. Remember | | | | JavaScript files into a single external file and then (for |
| that text links are easily read by search engines and | | | | newer browsers) you may compress it. This will |
| load faster than graphic buttons. Sometimes it is also | | | | reduce website loading time and you don't have to |
| possible to move large images from an important | | | | write the script on each web page - the web |
| page to a section like "Gallery" to reduce web page | | | | browser has this file in its cache and won't have to |
| load time. | | | | download it each time another web page loads. |
| 2. Use Only Optimized Images | | | | 4. For Table Based Website Design |
| Optimize each image in editing software like | | | | Avoid unnecessary nested and full-page tables. If you |
| Photoshop. There are different image formats like | | | | insert a table inside another table, it increases web |
| GIF, JPEG, PNG, TIFF etc., so try to save images in | | | | page load time because the browser has to read the |
| the appropriate format. As a rule-of-thumb, GIF is | | | | content located in the innermost table. Avoid |
| more suitable for uniform color images and JPEG for | | | | unnecessary nested tables, instead divide your page |
| real world scenes. GIF saved at 256 colors should be | | | | into different sections like header, body, footer etc. |
| reduced (as much as possible) to 128, 64 or 32 colors | | | | according to your layout and use a different table for |
| without comprising image quality. To reduce website | | | | each section. Your browser will be able to load your |
| load time JPEGs should be saved in the lowest quality | | | | web page a bit faster. |
| possible without spoiling picture impact. You can also | | | | 5. Use Table-less Website Designs |
| use PNG if you are sure that your users are using | | | | Every time when a website is opened, the browser |
| newer browsers. | | | | has to first scan tables and then load the content of |
| 3. Specify Image Dimensions | | | | the page which increases the website loading time. |
| While inserting images in HTML always mention height | | | | Using CSS and DIV tags you can avoid tables |
| and width attributes. This helps the web browser to | | | | altogether and reduce website loading time |
| know the image size before loading it. The browser | | | | substantially. |
| will then reserve the area for the images while rest | | | | C. OTHER factors that reduce website load time |
| of the web page design continues to load, thereby | | | | (remove the cellulites:-) |
| reducing website loading time. Do not use the height | | | | 1. Host on a high-end server with fast connectivity to |
| and width tags for image size reduction. | | | | decrease website loading time. |
| 4. Preload Your Images | | | | 2. If you have a database driven website, it is faster |
| You can preload some heavy images of the next | | | | and more secure to place your content on one |
| pages (that can be reached by clicking on links within | | | | server and your database on another. Consider SSI |
| the current page) by defining them at the footer of | | | | for common page elements, AJAX for page |
| the current web page. For example, img | | | | refreshes and Jar compressed files that load faster |
| src="nextimage" height="1" width="1" inserts a 1x1 | | | | into the temp. |
| pixel image in the footer that is read by the browser | | | | 3. Avoid background music files and if it is very |
| when the code above it has been read. Thereafter, | | | | necessary to use them then use highly compressed |
| while your visitor is viewing your main page, images | | | | music file formats. Avoid having much stuff on your |
| of the next page will continue to download to the | | | | website loading from other websites and reduce the |
| viewer's PC in the background and will reduce | | | | number of HTTP requests. |
| subsequent web page load times. This is not | | | | 4. Adding a slash at the end of a link like domain.com |
| recommended for direct Adwords landing pages | | | | contact informs the server that this is a directory |
| because Google has recently announced that high | | | | page and it does not have to waste time working |
| web page load time will negatively impact the landing | | | | out what kind of file exists at that address. |
| page quality score. | | | | 5. Using fewer redirects, Iframes, PhP and database |
| 5. Optimize Flash Files | | | | queries also helps reduce website loading time. |
| Animating important stuff can make an impact on the | | | | If you have followed the above website weight loss |
| visitor. If possible, avoid animated GIF images in | | | | programme and made your website design slim and |
| website designs; instead use Flash with discretion. | | | | trim, you will be thrilled every time you see its |
| Always use optimized flash files. There are so many | | | | performance. Remember that quality websites offer |
| ways to reduce Flash loading time that I will be | | | | a lot of fresh content. When you add new pages, do |
| covering this in a separate article. | | | | not forget to apply the above tips to reduce website |
| B. TRIM the Code (Shapely legs ;-) | | | | load time. |