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