Evaluating eCommerce site with webpagetest.org

I have used webpagetest.org on this site in past post to evaluate a blog performance. Today I thought it would be fun to do a similar exercise on a eCommerce site with webpagetest.org. I don’t own a eCommerce site so I wont be able to show the before and after like I did in the past. For this post I picked Dazadi.com because it has everything you need to outfit your man cave and I like the site.

When evaluating a eCommerce site I look at site search, site navigation and site speed.  Site search performance is measured on relevance which is difficult to do without access to analytic data from the site. Site navigation performance is subjective and I measure it by shopping on the site. Site speed is easy to measure and  is becoming more important now that search engines care about speed and some studies show that it can directly effect sales. Site speed usually has some low hanging fruit which makes it a fun one to look at.

When looking at eCommerce site performance I like to pick a product page to evaluate because a eCommerce main goal is to sell products and that’s where most visitors will speed their time. The product page I picked was the Harvil 3-in-1 Mahogany Bumper Pool – Table Top – Poker Table with 4 Chairs because its a awesome looking product and if I had the space in my man cave I would have one.

The first step was to enter the produce URL in http://www.webpagetest.org and run the test. The data we want to focus on is under the Page Speed tab and anything with a red exclamation point or yellow triangle next to it. The site will sort the results so it will be at the top. This is a snippet of the results I got from the test.

 

 

First in the list is Serve resources from a consistent URL

“The following resources have identical contents, but are served from different URLs. Serve these resources from a consistent URL to save 7 request(s) and 575.5KiB.”

That looks like some low hanging fruit which will make a big differences  Not only will it reduce the page by 575.5KiB but it will also save 7 request which frees up load on the server and browser because the browser can cache the image so its only retrieved once. I say its low hanging fruit but its probably more then a quick content change. This could require a code change which will make it less of a low hanging fruit but it would be worth the time because  575.5KiB is a lot to mobile and slow internet browsers.

Second in the list is Leverage browser caching

The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources:

This is a long list and I only included objects without expiration. To help understand the importance of this one I’ll use product.css as an example because I found it on other product pages I browsed. Procduct.css is 3.5K which is relativity tiny but my browser isn’t told to cache it so as I’m shopping  my browser needs to request that 3.5K on each product page I view. If my browser was told to cache it the browser would pull it on the first page that needed it and after that it would use it out of cache. This makes the pages load quicker and reduces request on the web server.

I think you should always have a expiration set even if its as low as 15 min for content that you change frequently. This is a quick server side change and one that should always be done. I like to do it in the main config on the web servers so it globaly applies to all objects being served but it can also be done with a .htaccess file.

 

Third in the list is Combine images into CSS sprites

The following images served from dazadi.com should be combined into as few images as possible using CSS sprites.

This requires code change and isn’t as easy as it sounds. I have also seen mixed results with this. You can reduce the amount of images requested but I have seen it add to the total page load time because the browser had to do more work processing it. Its worth looking into and real user monitoring is helpful to measure the before and after with this type of change.

 

Fourth in the list is Optimize images

Optimizing the following images could reduce their size by 43.2KiB (30% reduction).

This is one I like because its so easy and wont have any negative affects. On Linux for the png files you can automate this very easily with something a simple as a cron job running my pngcrush script nightly on your server. For the jpg files I would look at jpegoptim or imagemagick. For the gif’s I would leave them as is or convert them to PNG if they where above 30k or converting them to a PNG kept the size the same or smaller.  I have found the size savings webpagetest.org give to be a little height most them time.

Fifth in the list is Minimize redirects.

They all look like 3rd parties redirects so Im not going to expand on them because about all you can do is stop using that 3rd parties if you don’t like their redirects. This one is out of your control.

Sixth is Defer parsing of JavaScript

390.6KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.

A lot of these also look like 3rd parties. If you would like to read more on deferring java script this is a good recourse on it.  Not sure how much you will save but deferring as much as possible will make the page look like its loading faster and if a 3rd parties site is having performance issues its less of a impact on yours because your customer isn’t waiting on that 3rd party site before rendering your product page.

Other improvements

Something else I would like to touch on is Content delivery Networks or CDN.  A list of CDN’s can be fount at this link. Not all CDN’s are created equal and the price very greatly between them.  I think everyone should look into using a CDN but if its not in your budge look at having Google host your java script libraries. Google Hosted Libraries has a advantage even over a CDN’s because its likely that your browser already has them cached from another site so your browser doesn’t need to retrieve them. Google Hosted Libraries can be used in conjunction with a CDN for even more gain.

One Response to 'Evaluating eCommerce site with webpagetest.org'

  1. test me now says:

    What’s up, this weekend is nice in favor of me, as this point in time i am reading this wonderful informative piece of writing here at my residence.

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*