by Mike Ober
Friday, April 6th, 2012
Sounds like this is going to be an article for geeks, right? Wrong. Well, I hope the geeks read it too. This is for anyone that owns or runs an ecommerce web site, but especially the tens of thousands of merchants who rely on Yahoo! to process billions of dollars in annual online sales through the Yahoo! Merchant Solutions platform – the #1 Hosted Ecommerce Solution in the Internet Retailer® Top 500 and Second 500. Whether you own the business or run the daily operations of the web site, these are two important topics for you – and I am going to provide 3 recommendations that will help you make quick changes, today.
Before we begin, let me define what I mean here by "optimize images." Images can be product images or graphics – essentially any file in an image format. Every week, I view hundreds of web sites. A consistent finding is that almost all image files that I see on web pages can have their file size reduced without impacting image quality. In geekspeak, this is called "lossless image optimization." Huh? You heard me right – these images have unnecessary bytes that bloat the file size. When the bytes are removed from the file, the only impact is a smaller file size – and a smaller file size means a lighter page weight. A lighter page weight means a faster page load time – and we all like faster page loads… right?
So, let’s get on with it…
Step 1: Install YSlow
YSlow is a browser add-on that analyzes and suggests ways to improve web page performance. It is compatible with multiple browsers and is a simple download that provides instant feedback to you, the user. If you are not already using YSlow, download it now – we’ll use it in our next step. (Sidenote – notice the anchor text used for the links here – I am not trying to optimize for the phrase "download it now" – Adobe and Apple seem to have that buttoned up.)
Step 2: Run YSlow on your home page
Now that YSlow is installed on the browser of your choice, enable it and navigate to your home page. In the YSlow window, go to the YSlow tab and then the Tools subtab. Scroll down and select "All Smush.it™." Check it out! You are brought to Smush.it™, the easiest to use lossless image optimization tool on the web. You can now see how well the images on your entire page have been optimized. And… you can download all of the optimized images in a single zip file to load back on to your web site. Pretty cool right?
While you’re on the Smush.it™ screen, check out the different options. Notice that you can either upload existing images or enter existing image URLs. Regardless of the method you choose, you still get the option to download a file with the optimized images. My suggestion? Use the uploader – upload your image library from your local systems, optimize and download. (Of course you have all of your images stored locally and in a backup location, right?)
Step 3: It’s where you put it and how you call it that counts
Now that you have optimized images, where do you put them? Of course you’re going to put them back "on your site," but how? Where? Ideally, these images will be loaded onto a Content Delivery Network ("CDN"). For Yahoo! stores, the CDN is accessed using image, inset and/or icon variables in the Store Editor or by the multiple image upload process. All images loaded in this way are automatically put onto the Yahoo! CDN.
I frequently see web sites where the images are loaded from the LIB (the "Files" area of the Store Manager). The LIB is not on a CDN and therefore content being served from LIB is not delivered in the fastest manner possible. You can identify LIB content as anything that is loaded from the domain lib.store.yahoo.net. Convert images in LIB to image variables or work with your ecommerce developer to make the transition happen.
Finally, be cautious of calling page elements in a secure fashion. Elements should be called securely only when they need to be called securely, such as in checkout. Loading elements through https on http pages is generally unnecessary and can impact page load speed.
So there you have it! Three quick steps that you can follow today to optimize your images, lighten your page weights and increase page load speeds.
From all of us at Yahoo! Small Business, we wish you continued success.