Site Speed – Solutions

There are always options to improve speed, but I wanted to outline a few of the key ones and some quick pros/cons of each. Each service has their own strengths and if you really want to get aggressive, they actually can all four work together (at least on Yahoo! where our services work). One thing to note is that 3rd party services for the most part can’t be adjusted by any service.

Sometimes they can be moved later on the page load, but caching, image compression, etc. are often not able to be adjusted by any of these options. Some can be addressed but the Speed Wizard service but it only can address certain cases where we know it’s safe to do so.

Your Store Wizards Speed Wizard Service

The Speed Wizard Service addresses many of the speed issues found on a site. This currently only works on Yahoo! Merchant Solutions Stores (and legacy Yahoo! Store), so that’s it’s down side. This service doesn’t deal with product images (images uploaded in variables in the store), but works to adjust framework images (header/footer, navigation, reused graphics, etc) as well as javascript and css files. This also puts them on a CDN, compresses them, provides long life caching, combining files, moving files later for load, and more.

Strengths

  • Solves or reduces most major speed issues
  • Simple interface allows store owners or developers to add or remove files
  • Image Compression and quality settings can be adjusted in one dashboard allowing quick changes
  • JS and CSS Compression is automatically updated on each publish which allows developers to work on non-compressed files easily
  • Installation includes manual review of your scripts and styles to maximize increase while making sure everything functions completely the same

Limitations

  • Works only on Yahoo! Merchant Solutions and legacy Yahoo! Store
  • Does not work on images uploaded into editor properties (product images and some banners)

Problems Addressed (Completely or Mitigated):

  • Optimize Images – All framework images (not product) and 3rd party images where we can
  • Enable Compression
  • Leverage Browser Caching
  • Render Blocking Javascript and CSS
  • Minify Javascript
  • Minify CSS
  • Avoid Landing Page Redirects
  • Effective Use of a CDN
  • Minimize HTTP Requests

Your Store Wizards Product Image Optimization Service:

The product image optimization service is built as a service to specifically address the one area that the Speed Wizard Service can’t, product images. This service optimizes your images on the fly when you publish. Quality settings are tested and approved by the store owner when we install but can also be adjusted on the fly in the editor. We’ve found that not only can we reduce the image weight (size) but sometimes can even improve the quality at the same time.

Before 368 KB
LAPG Before Image
After 77 KB
LAPG After Image

Images courtesy of LA Police Gear.

Strengths

  • Solves product and uploaded image optimization issues
  • Image Compression and quality settings can be adjusted easily in editor settings
  • Images auto compress (or change quality if adjusted in settings) on each publish

Limitations

  • Works only on Yahoo! Merchant Solutions and legacy Yahoo! Store

Problems Addressed:

  • Optimize Images – Product and uploaded images

Cloudflare:

Cloudflare is a service that works as a proxy for your site. They host your pages but in reality they are requesting them from your ecommerce host, then modifying them (per your settings) and delivering to your visitors. There are many benefits to the service including security and speed. This service is highly recommended but the one key limitation it has that impacts many hosted eCommerce sites (Yahoo!, Shopify, etc) is that they can only change CDN, Caching, and Compression on files that are hosted on the store’s domain. So files and images on Yahoo!’s CDN, Shopify’s CDN and others won’t get optimized. They can do some things such as delaying script loading through a beta feature but it’s automated so you’ll want to test as it can cause issues depending on how the scripts operate. For example, when rocket loader is enabled it can cause Yahoo!’s floating cart script to not function (along with other scripts), but it will still run on IE and Safari because those browsers aren’t supported by rocket loader.

Strengths

  • Works on any eCommerce site (as long as you have your own domain)
  • Adds increased security
  • Many features and controls to impact speed, security, caching and more
  • Javascript and CSS can auto compress – if files are on the store domain

Limitations

  • Image, CSS and JS compression and CDN benefits only works on files hosted on the store’s domain
  • Delayed Javascript loading is available but can cause issues so should be monitored and checked

Problems Addressed  (note: all except render blocking are limited to files hosted on the store domain):

  • Optimize Images
  • Enable Compression
  • Leverage Browser Caching
  • Render Blocking Javascript and CSS
  • Minify Javascript
  • Minify CSS
  • Effective Use of a CDN

Manual Optimization (by store owner or developer):

Manual optimization is just that. Review by a developer who can then manually adjust scripts, css, move files, add lazy loading for images, etc. The nice part is that it’s done once and no recurring cost, but the down side is that if files need to be adjusted later or new files added, they have to be either re-optimized or adjusted in the compressed files. Manual optimization of images is possible but if later you need different quality levels or options, you will be re-optimizing all the needed images and reloading.

Strengths

  • Works on any eCommerce site
  • One time cost

Limitations

  • New files, or changed files have to be optimized as loaded or existing files manually updated
  • Unless files are hosted at a CDN location controlled by the store owner or developer, CDN issues can’t be adjusted/resolved

Problems Addressed (note: all except render blocking are limited to files hosted on the store domain):

  • Optimize Images
  • Render Blocking Javascript and CSS
  • Minify Javascript
  • Minify CSS

Frequently Asked Questions

Can these services work together?

Yes, they can and can work well. Each service has it’s strengths and can work together nicely to get the benefit of each. For example, Cloudflare provides fast DNS and Security but can’t touch images on a Yahoo! Store to optimize (or Javascript and CSS files), so the Speed Wizard service and Product Image Optimization can optimize those while letting Cloudflare deal with DNS, Security and other aspects.

If I use the speed service from Your Store Wizards, or Cloudflare, is it harder to update or add files? Do I have to update a different location? If I disable will I have old files?

The beauty of using Cloudflare or the Speed Wizard from Your Store Wizards is that you only update your base files where they exist now. Any updates you put in your base files will automatically get used as is. And if you should disable either, the base file would still be used. The benefit of the Speed Wizard, since it can impact files not in your domain, is that we automatically make a copy of the base file on every publish and reoptimize. So any updates or changes are automatically applied without you doing anything new or different. The only case you’d have to do anything is if you add a new file, you’d want to register it with Speed Wizard so it could be optimized.

I combined my files together to minimize requests but now it’s saying my use of a CDN (or caching) is worse. What happened?

Often the tests give grades based on the percent of files that exhibit an issue. So lets say you have 100 files being requested to load your page. 95 of them are on a CDN and 5 aren’t (probably a 3rd party service). You’ll get a good grade for use of a CDN. But now lets say you reduce the files down to 10 files, so browsers don’t have to make so many requests. Now 5 files are on a CDN and 5 aren’t. Now you’ll be told you didn’t make good use of a CDN. You actually improved your page load but the CDN score will be worse (and probably caching score as well). So take every score with a grain of salt.

Note: This is part 4 of 4 blog posts related to Site Speed. Below are the others.

Site Speed – Part 1 – Why Do We Care?
Site Speed – Part 2 – Testing Tools
Site Speed – Part 3 – Analyzing Test Results

Leave a Reply