Back to Blogs
11 Surefire Ways to Increase eCommerce Site Speed
April 17, 2017
Most store owners understand the importance of having a quick-loading online store, but not all know how to actually make a site faster. The importance of eCommerce site speed cannot be understated. Search engine crawlers and humans alike are turned off by a slow online store. Don’t be that store.
They also know that customers are more likely to leave a site without buying anything and won’t come back if a site loads slower than expected. Customers need to shop for products and complete purchases without any pages taking too long to load. Page load times can mean the difference between a sale and a bounce.
With this knowledge in mind, how can a store owner figure out how exactly they can test and increase the speed of their online shop?
Table of Contents
First things first, you have to get an understanding of the current speed of your site. There are a few ways to test for page speed. Google offers one method that will give you a decent overview of all the areas you need to improve upon. Visit this page to test your site: developers.google.com/speed/pagespeed/insights.
You’ll start to see some areas where your site could be optimized even further. Ready to make improvements? Keep reading to learn how you can make your eCommerce site speed worthy of the site you’ve created.
A CDN is a service that stores and serves web content such as images, videos and other assets over a global network. Because the assets are stored on very large servers running globally, they are loaded much faster than when stored through a regular hosting company. Services such as Amazon CloudFront and Cloudflare charge for each download of an asset, but the cost is minimal and worth it. Every little thing counts.
To minify the files, you can use many different tools available. Magento 2 has file minification built in and WooCommerce offers several plugins such as autoptimize, W3TC and BWP minify.
As a store grows, it may also outgrow its original hosting plan. If your site appears to load slowly and goes offline often, an inefficient hosting plan might be the culprit. Your hosting company may offer another level up or you may need to migrate hosts entirely to get a plan that’s a better fit.
Be careful that you don’t pay more than you need, though. The host we consistently recommend is Nexcess. They are customer-focused and will be reactive to your needs.
Image optimization is a method for making sure that the right image is loading at the right size even when browser sizes change. Many sites upload images that are larger than the size the image will display at. For example, if an image is set to display at 300px x 300px, the image size should match that size (twice the size for retina). Uploading a 1200px x 1200px image in this example will not result in a clearer image.
While this action can be done with code, you can also do some work before an image is uploaded. Keep the images closer to the size at which they will display, use the right file type such as jpgs for photos, pngs or svgs for icons and run through an image optimizer like ImageOptim before uploading.
Full page caching stores a site’s pages in a cache. Each hit to the page loads the cache so the server displays what has already been rendered instead of pulling dynamically from the server itself. For example: When User A visits a newly updated page, the server will render the page and save it to the cache. Then, when Users B, C, D, E, etc visit the page the server will render the cache version, increasing the speed.
Magento 2 has Full Page Caching built into the platform however, you can add Amasty Full Page Cache for Magento 1 and WP Super Cache or W3 Total Cache for WooCommerce to enable caching options. Make sure that pages like the user’s My Account and Cart are not included in the cache configuration since this information needs to updated dynamically.
Similar to optimizing images and minifying files, a store can make specific changes to their mobile experience to optimize speed. There may be features that don’t make sense for the mobile user to interact with, so why not turn them off for mobile? If those features are still present, they can slow down a mobile experience. Beyond merely being a frustrating experience, Google will penalize a site’s ranking for a bad mobile experience.
We don’t recommend this concept very often, however, if a store isn’t using a feature that is built into the basic core of a platform, it is ok to disable it. One example is WordPress blog comments. If your store doesn’t want to allow user comments, it can reduce the load time of the entire store to turn this feature off in the core of WordPress.
A load balancer is set up by a hosting company to distribute network or application traffic across a number of servers. For sites that are very large and have a lot of traffic, a load balancer is one way to allow traffic to come from multiple servers more quickly than from one specific server.
As a site is developed and features are added over time, the original code may need to be restructured to improve readability, reduce complexity and improve extensibility for future enhancements. While speed may not always be the main objective of refactoring, it can be one of the advantages. Unfortunately, there isn’t a plugin or extension for refactoring. It’s something that needs to be done by an experienced programmer who can determine where to make the most effective changes.
While full page caching stores a site’s pages in a cache, there are additional methods for caching a store at various levels, including the database, memory, server, and browser.
Leveraging Browser Caching With Browser Cache configured correctly, users visiting your site will have a copy of the pages visited, stored via cache in the browser. If the date on the page is the same date as the previously stored copy, then the browser uses the one on a user’s hard drive rather than re-downloading it from the internet, allowing the pages to render faster.
Database Caching If you have a large catalog or are running a series of advanced filters, database caching allows the server to cache the heaviest and most used queries used by your platform and stores the results in cache. The next time that query is served up by a user hitting your website, the platform will not have to reach back out to the database to retrieve results, it instead uses the cached results by bypassing the load on the Database and allowing the results to return in a more expedient fashion.
In Memory Object Data Storage using Server Caching For maximum performance, try leveraging WordPress’s built-in Object caching system in conjunction with Server Side Caching using tools like Redis, Memcached or APC. MySQL and PHP are fast on their own, and with object caching the speed of retrieving the data directly stored in memory can bring the forth the fastest method of delivering data.
Use of an in-memory data storage back-end can provide an enormous performance advantage to sites using them in conjunction with the WordPress object caching API. It is common to see WordPress go from 30+ MySQL queries per page down to 7 queries since the object caching backend takes care of storing all of the data.
Each of these areas can be time-consuming and require some level of development. Because each store is unique, there isn’t one simple method that will fit all sites. If you’d like more information on where you can start, please contact us at [email protected].
Your team is about to get a whole lot mightier.
If it sounds like we might be a good fit, send us a message. We’ll get back to you within 24 hours. And then we can hit the ground running.