Why load speed is crucial to your e-commerce – and ten ways to improve it.

load speed

Two-thirds of people now own a smart phone. The average smart phone user checks their phone 40 times a day. As smart phone use spreads and the majority think of the internet as an everyday necessity, our expectation of instant access to information increases, and our patience levels drop. Load speed is only getting more important.

Google evaluates your website landing pages to determine your website’s Quality Score and Ad Rank. If your landing page experience is slow, you get a lower Quality Score from Google. Which means your ads will likely rank lower in paid search results, and you’ll have a harder time climbing rank for organic search terms.

Slower sites have to bid super high to compete with faster, better quality ads and landing pages. That’s because your Quality Score is tied to the cost-per-click (CPC). So, a faster load speed can also indirectly help to drive down your advertising costs.

Google even went on record back in 2010 saying site speed was used as a ranking factor, saying;

“…faster sites don’t just improve user experience; improving site speed also reduces operating costs. Like us, our users place a lot of value in speed — that’s why we’ve decided to take site speed into account in our search rankings”

If you have been struggling to get certain pages to climb the search rankings, or are trying to drive down your advertising costs, you might want to factor in page load speed as part of a great landing page user experience.

People like fast sites. Search engines like fast sites. If your site is slow to load, now is time to do something about it.

For e-commerce sites, load speed can be directly related to sales. Amazon analyzed their ratio of sales to website performance in 2016, and discovered that for every 100ms of page load time there was a 1% decrease in sales. 40% of customers will abandon a website and not return after two seconds of waiting for a page to load. E-commerce designers are dealing with rapidly decreasing margins for load times to not result in cart abandonment.

Clearly, speeding up your website is critical—not just to ranking well with Google, but to keep your conversion rate high. Frooition sites are all created to load in one second or less across all devices, but for those of you who have non Frooition sites, we are sharing 10 things you can do to shave seconds off your site load speed and enjoy higher profits.

1. Use a Content Delivery Network

One benefit of being online is that you can sell to customers around the world. A content delivery network caches the content on servers located in different parts of the world, which reduces load times. This would help, say, a customer in Hong Kong, who could load a page from a server in China, versus hitting the master server in U.S.

2. Optimize Your Images

With images, you need to focus on three things: size, format, and the src attribute.

Image size

Oversized images take longer to load, so it’s important that you keep your images as small as possible. In Photoshop or Fireworks, you can use the “Save for Web” option to drastically reduce image size. Also:

  • Crop your images to the correct size. For instance, if your page is 570px wide, resize the image to that width. Don’t just upload a 2000px-wide image and set the width parameter (width=”570”). This slows your page load time and creates a bad user experience.
  • Reduce colour depth to the lowest acceptable level.
  • Remove image comments.

Image fromat

  • JPEG is your best option.
  • PNG is also good, though older browsers may not fully support it.
  • GIFs should only be used for small or simple graphics (less than 10×10 pixels, or a colour palette of 3 or fewer colours) and for animated images.
  • Do not use BMPs or TIFFs.

SRC attribute

Once you’ve got the size and format right, make sure the code is right too. Avoid empty image src codes.

In HTML, the code for an image includes this:

<img src=””>

When there’s no source in the quotation marks, the browser makes a request to the directory of the page or to the actual page itself. This can add unnecessary traffic to your servers and even corrupt user data.

Pro tip: Never Rely on HTML to Resize Images – HTML (and by extension, WordPress blogs), make it easy to create a smaller version of a larger graphic. But just because you load that smaller size, doesn’t mean it’s taking up any less room on the server. The browser still has to load the full image, then check the width and height you want and then resize it accordingly.

3. Minimize HTTP Requests

According to Yahoo, 80% of a Web page’s load time is spent downloading the different pieces-parts of the page: images, stylesheets, scripts, Flash, etc. An HTTP request is made for each one of these elements, so the more on-page components, the longer it takes for the page to render.
That being the case, the quickest way to improve site speed is to simplify your design.

    • Streamline the number of elements on your page.
    • Use CSS instead of images whenever possible.
    • Combine multiple style sheets into one.
    • Reduce scripts and put them at the bottom of the page.

Always remember, when it comes to your website, leaner is better.

Pro tip: BigCommerce sites made on the new stencil platform and coded in the handlebars language JavaScript and CSS are minified and combined, reducing file size and web requests.

4. Optimize CSS delivery

CSS holds the style requirements for your page. Generally, your website accesses this information in one of two ways: in an external file, which loads before your page renders, and inline, which is inserted in the HTML document itself.

The external CSS is loaded in the head of your HTML with code that looks something like this:

<!—Your styles –>

<link rel=”stylesheet” type=”text/css” media=”all” href=http://yourURL/style.css />

In general, an external style sheet is preferable, because it reduces the size of your code and creates fewer code duplications.

5. Reduce server response time

Your target is a server response time of less than 200ms (milliseconds). Google recommends using a web application monitoring solution and checking for bottlenecks in performance.

Big Commerce runs handlebars on the store’s server, which means there’s less strain on the browser and less Javascript is needed.

6. Enable browser caching

When you visit a website, the elements on the page you visit are stored on your hard drive in a cache or temporary storage, so the next time you visit the site, your browser can load the page without having to send another HTTP request to the server.

So the first time someone comes to your website, they have to download the HTML document, stylesheets, javascript files and images before being able to use your page. That may be as many as 30 components and 2.4 seconds.

Once the page has been loaded and the different components stored in the user’s cache, only a few components needs to be downloaded for subsequent visits. This can take an average of two seconds off load time for returning visitors.

Depending on your individual traffic, around 40-60% of daily visitors to your site will be arriving with an empty cache, so it’s critical that you make your page fast for these first-time visitors. But you also need to enable caching to shave time off subsequent visits.

7. Prioritize above-the-fold content

You can improve user experience by having your above-the-fold (top of the page) load faster—even if the rest of the page takes a few seconds to load.

Pro tip: New BigCommerce sites coded in Handlebars offers lazy-loading, which means product images will only load as the user scrolls down the page, reducing the initial load time.

8. Reduce the number of plugins you use on your site

Too many plugins slow your site, create security issues, and often cause crashes and other technical difficulties.

Pro tip: Deactivate and delete any unnecessary plugins. Then weed out any plugins that slow your load speed.

Try selectively disabling plugins, then measuring server performance. This way you can identify any plugins that harm your site speed.

9. Compress data

Large pages are bulky and slow to download. The best way to improve their load speed is to zip them—a technique called compression. Compression reduces the bandwidth of your pages, reducing HTTP response time.

BigCommerce stencil sites bundle information into a zip file for fast deployment and optimal load speed.

10. Reduce redirects

Redirects create additional HTTP requests and increase load time. So should be kept to a minimum.

If you have a responsive website, it’s more than likely that you have redirects in place to take mobile users from your main website to the responsive version.

Pro tip: Google recommends these two actions to make sure a responsive redirect doesn’t slow your site:

Use a HTTP redirect to send users with mobile user agents directly to the mobile equivalent URL without any intermediate redirects, and include the markup in your desktop pages to identify the mobile equivalent URL so Googlebot can discover your mobile pages.

The Bottom Line

Some of these tips are easy to implement, but a few are advanced tactics that can be difficult if you aren’t the most confident with web development.

If you like the idea of digging in and doing it yourself, Google Developers has useful information that can help you improve site performance.

If you know what you need, but want an expert to create it, speak to one of our e-commerce design experts.

Why load speed is crucial to your e-commerce – and ten ways to improve it. was last modified: August 14th, 2017 by Jessica McDonald