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