This is about optimizing php shopping carts mostly. Still you can find useful information for your html site too. Sorry for the bad english, as it isn’t my born language.
In this article I will shortly describe for you, how I managed to obtain and mantain the average page speed of 0.6 sec for Google Site Performance administrative tool, ranking in the top 3% sites in the Google.ro as speed. I am not an SEO expert in site speed optimization, but I’ve read a lot and documented how to optimize my own website speed. Here is a compilation of what I’ve learned. You will only find advices and not examples how to do it. Please search for them, as there are different solutions for different shopping carts and my knowledge is limited for now @ osCommerce.
First of all, I consider that osCommerce is the fastest cart available on market. This is only my observation during past year. This is my live store (sorry about the language used there, it’s romanian), with more than 1000 products : www.e-cosmetics.ro , also used as an example below.
Most important aspect is the content of your main page :
Make sure you are using CSS buttons or, if you are forced to use image buttons, always keep them below 4 kb size. Do not use more than 10 such buttons. If you need more than 10, then always go for CSS buttons. The main advantage of such CSS button is that it only uses one background image and everything else is just formatted text.
If you want to implement some eye candy backgrounds, always implement it from CSS. Do not use page code to do so. CSS is preloaded so your page will respond faster. As you can see on my web page, the full screen background and my header are preloaded from CSS. Try to use only 1 CSS file – it will be preloaded and if you have more than 1 request in preload then your site will load slower. Also make sure you don’t have garbage data in your CSS. That will make it bigger without any purpose at all. Best size for your CSS file is below 16 kb.
Make sure you don’t use more than 2 external scripts on your page (I’m using 2 : google analytics and my yahoo chat module).If you are forced to use more than 2, then struggle to merge them into 2 or 1, and place them in the header of your web page. This way you will also avoid some known errors from W3C.
Try to use as little as you can images on your front page. If you are forced to use some, make sure they are physical resized and not made smaller (to fit) from page code. Bigger images translates into more data to transfer so your page will load slower.
Do not use more information boxes than you actually need. Think about your customers too. They need to find fast what they are looking for, not to struggle in tones of text and images to get to what they need. Keep your page simple and clear, with no more than 1000 words on it (less than 500 is best).
Try to use as little flash objects as you can. One is more than enough.
Do not use more than 30 images on your front page, even if they are < 1kb size. This will multiply the requests for data made to server in the loading process, so your page will load slower.
Do not use music / sound. That is really annoying for 99.99% of your visitors and also will make your page load slower.
Do not use addons that are randomly displaying more than 10 products on your main page. You will have a neverending stream of new images loading every time you open your main page. That will make your site again slower. Even if you use the cache option for all images, there will always come new images to be cached -> increased loading delay. Also make sure that your images are saved in .png / .gif formats and they are optimized for web. Keep in mind to physically resize all images to fit your page. DO NOT use code to resize bigger images, unless we’re talking about the main background preloaded from CSS > that needs to be at least 1600 x 1200 to look good on most computer displays. Still mine is fully optimized and it’s less than 60 kb size … not looking that great like the original image, but it’s loading fast.
Make sure you don’t have images on your site that are loaded externally from your server. Most time consuming are the outside DNS requests. Those will heavily delay your loading time. I had the bad surprize to discover my flash carousel demanding from Adobe the „get flash plugin” image. Of course I imediately stored the image locally and only kept the link to the download location of the Flash plugin.
An exception to this rule are the international sites, who needs their content precached on CDN. That is always the best option for them. Such sites are out of discussion for now. I’m only speaking about local sites for small & medium businesses.Such sites are actually loading slower if they have some content on CDN, because of external DNS requests.
As a general rule here, keep in mind that you should use as much text as you can on your main page, store all images on your server and try to keep their number as low as possible.Your main page should not be larger than 300 kb and highly recommended is the 100 kb size, but that is very hard to obtain for a shopping cart … My site’s front page has about 400 kb and it’s top 3% … so it’s ok like this too.
Activate internal website cache, for you entire content if possible.
For osCommerce there is a great addon made by Chemo (Page Cache) and that addon will save your content as cache files, directly delivered to users – there will be no need to load multiple objects on page – the page will be fully delivered (too bad I can’t use it because of frequent changes). Most carts already have such option built in. Use it ! It’s very important. It will reduce by half your data requests to your server, it will reduce the database computing operation time, and it’s pure win … your site will be 50% faster by one click … or so … depending on your cart. Important! Every time you change something about your cached pages, you need to reset the cache to make the changes visible.
Another gold rule is to enable your expire date for every static content on your site.
Even if the visitor will be spending 2 seconds to get the full first page loaded, from there on the static objects on your page will be loaded from his browser local cache. Best way to do this is by defining everything in your .htaccess file. If everything is cached in the user’s browser, then your server will only send to him the text data and some new images, but those will be stored too. For this, as Yahoo guide recommended, use file versions if you’re updating content (for example if you change a banner, from banner01 rename it to banner02 and so on, but don’t forget to change this also in your site code to be properly displayed).
And this carries us to the very next important thing … about text now:
Activate Gzip compression.
Most SEO „experts” are thinking about this option as something useless, because they have enough storage room on their server. Here is why it’s important to know a little about hardware too. They are perfectly wrong. Gzip compression, activated server side or from the shopping cart, actually compresses the data packages sent to users by the server, thus optimizing the overall page load. Even if it seems low at start (1 kb gain at most), think about the thousand clicks on your pages and every click being reduced to half transfer time this way … you will actually win entire minutes and then hours in the battle for speed against your competitors.
Why am I saying against your competitors ? Because starting in June 2009 Google started to rank our sites by this overall access speed too … and it’s not unimportant at all. As much as 10% of the page ranking is determined by your site speed. I think you all want this 🙂
God speed 😉
LE: feel free to use this text as you wish (it’s entirely written by me), but if you find it useful, please link to it in your blog / site.
Thank you.
Taiji
Here’s only the chart, as I already posted earlier a full screenshot :
First time I loaded the site with nice images and lots of useless information, then I realized it’s really slow and managed to optimize it as described above.