Here are bleep systems we have a number of simple core values that run through all our product design decisions when adding features and functionality to our products. Two of those values are speed and search engine optimisation (SEO).
Product photography and images are an important part of any ecommerce system. Images can be tricky to handle especially when you are dealing with tens of thousands of them at many different sizes. Any small nudge that you can give to your site to help search engines find and index more effectively the better.
We’re not saying that you won’t sell anything if you don’t follow these steps but you must be doing at least the same if not more than your competitors. We love the the lion anecdote in this article that describes perfectly the situation all ecommerce sites are in.
Like many whitehat techniques there is nothing groundbreaking about what we describe here but it is important to get the right foundations before you can build any higher. Its amazing how many people don’t get these right.
Our commerce platform automagically takes care of all of these jobs freeing you up to concentrate on other things.
1. Resize for all image sizes and optimise
We use the GD Image library to resize all of the product images uploaded to our system. Storage is relatively cheap these days so its easy to make 6 sizes of images and store them without breaking the bank. While resizing them its important to save them as small as possible (file size) without compromising quality. We set up our scripts to learn what works best.
Another alernative option which we see done a lot is to dynamically generate all the images as and when you need them. This saves on inital processing but we find this slows down the site when its busy. Also see task 2.
2. Serve the static images from a subdomain
The web browser has a concurrent connection limit which it uses when downloading any webpage. As any webpage is made up of multiple requests (css, javascript, images, html etc) this factor can limit the speed to which any page can be downloaded as the browser gets ‘blocked’ while waiting for connections to download.
By using alternate domain names the browser you create more queues that can be downloaded at the same time. An example for images would be this.
http://images.bleepsystems.com
3. Name the image files correctly
There are different techniques to naming images and the method we use reinforces other parts of our on page SEO efforts. We use the department and product name in both the page title, the meta tags, the URL and the H1 - so having them in the images also helps a lot.
The format we use (for each type of image) is
department-product_name-product_code.jpg
Do a quick search on google and you will see lots of opinion the best way to do this and you will get different results depending on how good the rest of your page is, but if the department (or section) and product name is elsewhere on the page this method will work for you.
4. Use Amazon CloudFront (or another cdn)
Content delivery networks do a few cool things. The main one I want to talk about here is serving our images from a geographical location close to the user. If you are just selling locally this might not be the right thing to do, but for those of you selling globally this is a no brainer. Users hate slow sites and this will help yours to fly.
5. Leverage browser caching for images
Product images change infrequently and they take time to download each time you visit the product page. Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network. Exactly how to do this is out of scope but you can read about how to leverage image caching at Google.
If you are looking for a new ecommerce platform or have any requests for blog articles, please get in touch.
Tools
Two tools for testing your page speed