Posted on April 17, 2017 | Written by Kat Garsi
Most store owners understand the importance of having a quick-loading online store, but not all know how to actually make a site faster.
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 areas taking too long to load.
With this knowledge in mind, how can a store owner test the speed of their site and how exactly can he or she increase the speed?
Complete a Speed Test
First, it’s important to understand the current speed of your site. There are a few ways to test for page speed and Google offers one method that will give you a good overview of areas 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? We’ve outlined ten different methods for increasing the speed of your store and improve the experience for potential customers below.
10 Methods to Increase Site Speed
1. Use a Content Delivery Network (CDN)
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.
2. Minify Files
3. Analyze Hosting
As a store grows, it may also outgrow its original hosting plan. If a 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. Hosts we like for smaller stores are: Hosts we like for larger stores include.
4. Optimize Images
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 image 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.
5. Enable Full Page Caching
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.
6. Optimize Assets on Mobile
Similar to optimizing images and minifying files, a store can make specific changes to their mobile experience to optimize speed. There might be features that don’t make sense for 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.
7. Disable Unused Features from Platform Core
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’s 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.
8. Add Load Balancers
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.
9. Refactor Code
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 a programmer who can determine where to make the most effective changes.
10. Configure Advanced Caching: Database, Memory, Server, Browser
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 bowser uses the one on a users 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. <- Maybe this paragraph is unnecessary.
Where to Start?
Each of these areas can be time consuming and require development expertise to implement. 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]
The team at coolblueweb also offers a Speed Boost Kickstart package to all of our clients, which can make a store load dramatically faster. We apply some of the most effective techniques listed above and provide a recommendation report for even more opportunities to improve site speed. Our methods ensure improvements will achieve the most value for your budget.