| If you run a website, you know that the content | | | | Example 1: |
| must be well written and designed to keep visitors' | | | | Unnecessary white space This example is beneficial |
| and customers' attention. But if your pages are too | | | | for a web designer as it enables them to scan |
| big, or you have oversized images that are making | | | | through the code, making it easy on the eye. But |
| your visitors wait, your website will be overlooked, | | | | when you have code that doesn't need to be |
| and the visitor will soon skip to your rivals' website. | | | | changed frequently, white space should be minimised: |
| In order to keep your visitors' attention, you need to | | | | Example 2: No unnecessary white space"Divs" vs. |
| optimise your web pages so that they load as quickly | | | | "Tables" |
| as possible, and run smoothly. | | | | Tables were designed to store tabular data on a web |
| By following these techniques, you can expect to: | | | | page, but many website designers still use tables for |
| - Keep visitors interested in your website. | | | | the layout of web pages. When tables are used, the |
| - Keep your customers attention right through to the | | | | design of the website is restricted by the way the |
| shopping cart. | | | | rows and cells are placed. |
| - Have quick loading web pages and images. | | | | By using "Div" tags for the layout of the website, |
| - Save storage space on your host. | | | | designers can control every part of the websites' |
| - Cut your monthly bandwidth usage. | | | | content down to the final pixel. By using "Div" tags, |
| - Have an error free website. | | | | the file size of a web page can be cut by around 4% |
| There are many steps in optimising a website and its' | | | | for small pages, and up to 20% for larger pages. |
| coding, but the following techniques are a select few | | | | Validate your code. |
| that have been tested and have been proven to | | | | There are varied views on whether validating your |
| improve web page loading times. | | | | code will help your website perform better when it |
| Optimising Images. | | | | comes to search engine rankings, but a majority of |
| One very easy method of optimising a website is to | | | | people overlook the importance of valid code when it |
| use images that are of good quality, but have a small | | | | comes to the loading times of a web page. |
| file size. When producing images for the web, take | | | | When a piece of code has errors in it, a visitors' |
| into consideration the actual dimensions that the | | | | browser tries to correct these errors so it can |
| image will appear on the screen. You can set these | | | | display the website properly. For example, a browser |
| dimensions in your favourite imaging software so that | | | | has to assume that you wanted to end a table row, |
| you won't have to crop or resize the image when it | | | | even if the appropriate tag had been neglected. The |
| comes to loading it on the web page. | | | | more corrections the browser has to perform, the |
| Another factor of image loading times is the image | | | | slower your web page will take to load. By having |
| format. There is much speculation about what image | | | | valid code, the browser will read straight through |
| format is the "optimum" format for the web, but the | | | | your script easily, and will load a lot quicker. |
| answer depends on what you want the image to | | | | W3C's website contains various tools to help you |
| look like and in what context in the image will be | | | | validate your web pages. |
| used. | | | | Simple PHP optimisation. |
| If for example, you have images of products on an | | | | To make your PHP code load quickly, you should |
| e-commerce web page with dimensions of 150 pixels | | | | always consider using single quotation marks (') as |
| width by 200 pixels height, the best format would | | | | opposed to double quotation marks (") in a string. In |
| probably be JPG (JPEG). But if you have for example, | | | | addition to this, always use the "echo" function in |
| a logo that requires transparency, the best format | | | | place of "print", and always remove any unnecessary |
| would probably by PNG. | | | | "echo" functions to print standard HTML. |
| As a general rule, all GIF formatted images should be | | | | CSS Optimisation. |
| replaced by the PNG format. This is due to the PNG | | | | By placing styles into a CSS style sheet, and |
| format being more efficient when it comes to saving | | | | subsequently optimising these style sheets, the |
| the image data. | | | | loading time of a web page will be greatly diminished. |
| When saving JPG formatted images, use options | | | | The following code is a typical example of a |
| such as the "Save for web" function (Adobe | | | | non-optimised CSS style sheet: |
| Photoshop) to lower the file size of the image. | | | | Example 3:p { font-weight: bold; font-style: italic; |
| Optimising HTML and PHP code. | | | | font-size: 10px; color: black; margin-top: 1px; |
| The main structure of a website comes from the | | | | margin-right: 2px; margin-bottom: 3px; margin-left: |
| HTML coding. With overly complicated and error | | | | 4px; } li { font-weight: bold; font-style: italic; font-size: |
| ridden coding, comes slow loading pages and large file | | | | 10px; color: black; margin-top: 1px; margin-right: 2px; |
| sizes. | | | | margin-bottom: 3px; margin-left: 4px; } |
| By optimising your HTML and PHP code, you can | | | | By grouping these two CSS properties and by using |
| have faster loading web pages. Here are some | | | | shorthand CSS script, you can lower the amount of |
| examples on how to optimise your code: | | | | code in your style sheet considerably. The following |
| Remove unnecessary white space. | | | | example shows how much coding space can be |
| By removing white space such as unnecessary | | | | saved by employing these techniques. |
| indents (tabs) and line-breaks, you can lower your | | | | Example 4:p, li { font: italic bold 10px Arial; color: black; |
| web page file size considerably. Although white space | | | | margin: 1px 2px 3px 4px; } |
| is preferred by web designers to navigate through | | | | By using the techniques described above, your |
| code more efficiently, a large amount of it can add | | | | website will start to load a lot quicker, and will help to |
| to file size, and will start to slow your web pages | | | | keep them important visitors or customers engaged |
| down. | | | | and interested. |