| Speed kills. In the case of website usability, the lack | | | | 13. Use CSS Images instead of IMG tag: An easy |
| of speed kills. Manyhave erroneously assumed the | | | | way to speed up the rendering of an image is to |
| advent of high speed internet connections | | | | simply call as a background of a div tag. |
| wouldmake website performance optimization | | | | 14. Use Relative Links: Removing the " " from the |
| irrelevant. On the contrary, it seems asinternet | | | | beginning of every link will shed some weight. Just be |
| connection speeds increase, users simply become | | | | careful not to allow people to jump back and forth |
| more impatient anddemand faster browsing. Below, | | | | between secure and insecure pages, which will |
| I've gathered some simple (and advanced) ways | | | | generate one of those annoying "insecure items" |
| tospeed up your site. | | | | errors in thebrowser. |
| Image Optimizing Tips: | | | | 15. Specify the DocType: Pages that have the |
| | | | DocType specified tend to load faster than those |
| 1. Compress .jpg and .gif images: If you use | | | | that don't. |
| Photoshop, always use the "Save for Web" feature. | | | | |
| If you don't have access to PS, there's a ton of free | | | | Server & Database Tips |
| image compressing freeware out there. | | | | Â |
| 2. Compress or eliminate unnecessary Flash elements: | | | | 16. Reduce Http requests from other sites: Try to |
| In my opinion, flash is over-rated, slow, and buggy. It | | | | eliminate connecting to other servers toretrieve |
| has it's benefits, but make sure you don't rely on it | | | | images, audio, or video. Each http:// connection only |
| for navigation or other necessary site elements. | | | | slows things down. |
| 3. Don't Resize Images within HTML: Don't use the | | | | 17. Don't Use Don't use secure pages if you don't |
| width or height attribute in the IMG tag to resize | | | | have to. Connecting through secure http is about 3 |
| larger options. For example, if you resize an image | | | | times slower than regular http. Obviously, your |
| that was originally 300 x 300 to 100 x 100, the user | | | | checkout process needs to be secure, but your |
| still has to download the full size one. Instead, use | | | | product pages most likely do not. In addition, make |
| thumbnails. | | | | sure your navigation doesn't use relative links which |
| 4. Specify Image Dimensions: Don't leave the width | | | | forces users to flip flop between secure and |
| or height attributes blank. By doing so, you'll slow | | | | non-secure pages. |
| down the browser rendering of the page, since it | | | | 18. Upgrade your Web Server: Just like that old PC |
| doesn't know how much space to give for each | | | | you bought 5 years ago, web servers can go down |
| image. | | | | hill and become outdated. |
| 5. Slice Your Images: Slicing doesn't actually reduce | | | | 19. Use Gzip Compression to Reduce HTML Size: Gzip |
| image size (in fact, it increases the overall size). | | | | is great for compressing html code, however it does |
| However, it does increase the apparent load time by | | | | nothing for images, flash, or other embedded files. |
| making each slice appear one at a time rather than | | | | Many open source programs such as Wordpress and |
| one big image popping up after it downloads. | | | | Joomla already support it. |
| 6. Avoid Too Many Slices: Don't use too much of a | | | | 20. Upgrade Server Memory: A boost in memory |
| good thing. As mentioned above, each slice actually | | | | resources on your server can reduce processing time |
| increases the total size. I would recommend using no | | | | and greatly increase performance. |
| more than 4 slices, unless you are dealing with a huge | | | | 21. Upgrade your Database Server Hard Drive: The |
| image. | | | | faster your server's hard drive is able to access data, |
| Coding Tips | | | | the faster it can serve up files. A fast hard drive is |
| 7. Use CSS instead of Images: Cascading style sheets | | | | especially important for your database server. |
| can do more than you think. Many sites make | | | | 22. Separate Content and Database Servers: If you |
| effective use of CSSformatting and eliminate the | | | | have a high traffic, database driven website, you can |
| need for excessive images. Even effective brand | | | | benefit by placing your content on one server and |
| logos can be created with CSS. CSS Zen Garden has | | | | your database on another. In addition to the speed |
| some examples of creative use of CSS. | | | | benefits, it is more secure. |
| 8. Convert from Table to CSS based layout: Tables | | | | |
| are ok for displaying data in columns and rows, but is | | | | Other Tips |
| grossly inefficient for designing web page layouts. By | | | | Â |
| using DIV tags with CSS, you can cleanup your code | | | | 23. Loading Progress Indicators: By letting users know |
| extensively, which will reduce page load time and also | | | | that you are processing their request, you can |
| offer SEO benefits. | | | | assuage their impatient fears. This won't necessarily |
| 9. Use External Style Sheets: Rather than formatting | | | | speed things up, but it will update them on the |
| through embedded inline styles in pages or html | | | | progress. |
| elements, reference an external css files that the | | | | 24. Use AJAX instead of Page Refreshes: Interacting |
| entire site can reference. The browser will cache this | | | | with a web page is far different than interacting with |
| page on the first visit, so it won't need to download | | | | your computer OS. Imagine if Windows XP had to |
| it repeatedly. | | | | refresh the whole screen ever time you perform an |
| 10. Use External Javascript: Similar to above, put all of | | | | action like websites do? In the next few years, we |
| your JavaScript functions in an external file for | | | | will probably see more adoption of AJAX technology, |
| caching benefits. | | | | which will make page refreshingunnecessary. |
| 11. Remove Unnecessary White Space in HTML: | | | | 25. Reduce Size & Number of Cookies: Each time a |
| Surprisingly,white space hogs a lot of disk space. | | | | browser makes a request, cookies must be |
| 12. Use Shorthand CSS: Instead of putting each CSS | | | | transmitted. Keep an eye on the total number and |
| attribute on its own line, use shorthand CSS to | | | | size of the cookies your site uses. |
| prevent extra line breaks in your external CSS file. | | | | |