Poor Website Performance Symptoms

• Site loads slowly even on a DSL connection
• When i click on a menu it is unresponsive
• Images take over 30 seconds to load

If this is the case your site needs optimization.

Step 1 – Analyze your website

Analyze why your website is slow. First, but not so obvious reason could be your server performance. If your site is running on a shared account with multiple sites, that could be a problem. Your website could slow down, if your sites gets too much traffic, or one of the sites is not properly coded. But this only happens when your site gets loads of visitors every second. If that is not the case, you are probably facing a problem connected with your website design.

 

Run the test on Website Optimization to see possible problems your site is facing.

http://www.websiteoptimization.com/services/analyze/

 

Enter your website URL and carefully check the results.

1. See the result called Download times. It will tell how much time does your website need to load on a modem and DSL connection. If you get more than 50 seconds for 56K modem, than you have a slow website and need to improve website performance. Your goal should be to load your website under 25 seconds on a 56K modem. I know this can be tough, but lots of users these days still use dial-up connections
   .
2. Check the bottom of results and consider improving results colored red and yellow.

Step 2 – Optimize Website Elements

Reducing Graphics Size

Website Graphics are the biggest elements of any slow website. We love photos and users love them, because they are great eye-stoppers, but they slow your website. You need to optimize your site and make your images smaller and more compressed. You can easily do it by opening your image in a graphic editor like IrfanView or Photoshop and reducing image quality. I really like Photoshop because you can see exact image size and image quality before you save it. Try to experiment with GIF, JPEG and PNG sizes, because images look excellent at smaller sizes with some testing. Here are my simplified rules you can use too:

• .GIF: I use it for images that have a large area of the same color and for transparent images.
• .JPG: I use it for photographic images – photos that have lots of colors
• .PNG: I use it for blended images, gradients and such.

See for yourself the difference between a .gif and .jpg:

These two images are practically the same to the human eye, but computers know the difference.

	This image is saved in .jpg format. Its size is 7 KB.
	This image is saved in .gif format. Its size is 14 KB – twice as much as in .jpg

 

For more information about image extensions read these two resources:

http://www.sitepoint.com/article/gif-jpg-png-whats-difference

http://www.killersites.com/articles_2005/theory/imagesInWebPages.jsp

Reducing number of images

Image is equal to any other html element and counts as an object. So it is wise to combine images that would be otherwise inserted alone to one bigger image or image map. This will speed up your site for sure. You may also consider limiting yourself to a certain amount of KB per page. That works fine with me. I try to keep all images on one page under 50 KB. So when i exceed it i know page will load slowly.

Move your styles to a stand alone document – CSS

In case you don t use css on your sites you should learn about it and implement it. It will strip your code and make your page load faster, since all unnecessary code will not be loaded. You can even create several CSS documents and use them for different parts of pages. Pages without CSS load slower, because browser has to load more html code every time user opens a specific page.

 

Here are two free, online css tools you can use right now:

http://csscreator.com/?q=tools/layout

http://www.qrone.org/cssdesigner.html

Removing all unnecessary objects

Are you streaming music or videos from your site? Many websites become very slow when they want to stream media on shared hosting accounts. The solution is easy: Move your files to Youtube.com or similar online providers and simply put a link on your site. This will also save you bandwidth.

Avoid pasting code from Microsoft Word or other Editors

One of the popular mistakes is to copy text directly from Microsoft Word to Dreamweaver, Joomla or other Editors. Everything looks nice, but it is not. Along with your text, Microsoft Word adds a lot of ballast that slows your website. In Joomla there is a special option to paste content from Word. You can also do it manually – an easy solution is to paste text to Notepad, and then paste it to your Website Editor. You can see how your code looks by going to View>Page Source in any browser.

Step 3 – Retest your website

Check how your page is doing after you have implemented changes:

http://www.websiteoptimization.com/services/analyze/

Super Trick for Pages that cannot reduce number of elements

This is a trick I use on some slow websites, that would not be the same if I would exclude some images. What I do is put extremely attractive text – a few sentences in the visible part of the screen. Because visitors are highly interested they start reading and in the meantime the content loads. When the visitor scrolls down, he or she doesn’t even notice the page was loading almost a minute. Note: this can not be used on every site and you must know what you are doing because this will not load your site faster.

 

If your have a slow website, turn it into a fast one with these tips!