One of the top customer complaints about websites is speed (along with ads and broken links). Both speed and ads made up for 60% of the complaints, making each a subject of interest in the web design industry. Your design may be aesthetically pleasing from all angles but if it takes more than 5 seconds to load, your design is far from impressive.
Designing websites for speed should not limit your abilities and hamper your creativity as a web designer. In fact, this is what sets a talented web designer from a mediocre one.
So what can you do to optimize your web pages for speedy downloads? There are many ways with which you can accomplish this. Here are 5 tips on how to optimize your website for speed:
Keep the size of each of your web pages below 30 kilobytes (30kb), including images. The internet may be getting faster but for some users and readers speed is still a big issue.
Get rid of code bloat. Certain web design programs, especially those that make use of WYSIWYG (What You See Is What You Get) interfaces, produce HTML and CSS codes that are unnecessarily lengthy. Adobe Dreamweaver is no exception. When you look at the code after you use the WYSIWYG editor to create your page, you will notice a lot of unnecessary empty tags and unused CSS classes.
Without some sort of knowledge about reading, analyzing and editing HTML and CSS code, you will not be able to clean this code bloat up. This is why basic HTML and CSS coding is an essential part of a web designer's skill set.
Use as few images as you can and make sure that they are optimized. Images may enhance a page but having too much is just overkill â€“ especially if having more images does not add to the substance of your content. Keep your image resolution at 72dpi (dots per inch) and specify the dimensions for your images.
Remember to use the right image format â€“ JPEG for photographs and images that require full color, and GIF or PNG for "flat-color" high-contrast images such as icons, buttons and cartoon images. To handle a large image you can compress it, slice it or make use of thumbnails. Many websites apply the latter concept â€“ your user will have the option of viewing the image in full size without disrupting the overall loading time of the page.
Avoid using extremely complex tables. If you're in the habit of using tables for laying out websites, my advice to you is DON'T. Not only is this semantically incorrect, this is also bad for SEO.
Use HTML tags appropriately and within context. Tables are good for displaying relationships among sets of data, not for making sure your text is aligned properly. A lot of people are under the impression that tables load fast â€“ this is wrong. In order to pull off the perfect lay out, you'd have to make use of nested tables. Nested tables take longer to load because the browser has to go through the rest of the code first to figure out where the end of the main table is (as well as of the tables inside it).
Those are but a handful of web design tips you can follow to help improve the loading times of your website. Like I said, optimizing your website for speed shouldn't hamper your creativity and limit what you can do as a web designer.