Chances are, you rarely wait more than four seconds for a page to load. You may be thinking, “Wait, I have more patience than that!” But, the fact of the matter is, when staring at a blank screen, four seconds can feel like an eternity.
Whether it’s due to a change in our attention spans or a transition into fast-paced lifestyles, there’s no denying long page load times negatively impact user experience. In fact, 40% of shoppers abandon sites that take longer than three seconds to load.
Better load times lead to a better user experience, which in turn leads to higher conversions. So much so, that recent research by Shopify came to the following conclusions:
- A site that makes $100k daily will generate $7k in additional revenue with a one-second load time improvement.
- A one second load time delay can lead to an 11% drop in page views.
- A one second load time delay also leads to a 7% drop in conversions.
Slow load times also negatively impact SEO, contributing to ranking drops. Even Google suggests keeping page load time below two seconds. This seems like a feat, but it’s not impossible. The following strategies can help you improve your page load time.
Limit the amount of redirects
Since e-commerce companies tend to have more product and category turnover, they will often change or discontinue the use of certain website pages. They are often more concerned with the competitiveness of their online presence, so they will update their website framework often, which leads to new page URLs being created.
As a result, e-commerce websites face more issues with redirects than lead gen sites and blogs. The key is to limit the number of redirects.
The more redirects on a page, the higher the page load time. Simple as that. Oftentimes, redirects are meant to improve SEO, but doing them incorrectly can have a negative impact. You’ll want to avoid excessive redirects on your site, as they add to the site’s overhead and slow it down.
Redirects can be minimized, or even eliminated, by taking the following precautions.
-
- Avoid linking to a page that has a redirect on it. When you create a redirect, update all links pointing to the old page by pointing them to the new one.
- Avoid long redirect chains. It shouldn’t take more than one redirect to get to a specific source.
- Stick to 301 redirects only. This indicates a permanent redirect, thus giving 99% of the link equity to the redirected page.
Source: Redirect Checker
In e-commerce, 301 redirects are typically used in three cases.
- When redirecting users from an old product that is no longer being sold to a similar one.
- When you’ve removed a sales landing page and want to send traffic to that page to your home page instead.
- When you’ve changed your site’s structure entirely.
If you’re reflecting upon your site’s redirects and want to review them all, the best way to do so is run a crawl. There are many tools for doing this, such as Screaming Frog. Once the crawl is complete, redirects will be listed with a 300 code. From there, you can see which pages exactly are being redirected and better optimize them.
Minimize your images
This issue is especially common on e-commerce sites, as they are product-based and, therefore, image-heavy. Whether they be thumbnails or product photos, large images are notorious for slowing down load times. Shopify estimates that images account for 50-75% of an e-commerce site’s total size.
Images should be scaled appropriately. The easiest way to do this is to compress and re-upload existing images. There are plenty of online programs and softwares that allow you to mass-compress images to a specific file size.
You should also use JPGs instead of PNGs where possible. While many site owners prefer PNGs because their lossless compression makes for slightly better image quality, they are often significantly larger in size. They also support transparency, which means PNGs may be better in some cases (like where your logo is involved), but certainly not necessary for all images.
If you use a shopping platform with specific image size recommendations for products, make sure to adhere to those. If you use an open source platform like WordPress or Magento, there are plug-ins and extensions that can optimize your images for you.
Optimize your CSS and Javascript
Since CSS loads before the rest of the page, you’ll want to make sure it’s properly optimized. Excessive amounts of CSS will slow down load times, but you can prevent this by taking the following steps.
- Remove unnecessary code. Sometimes there are duplicate snippets of CSS. While going through the entire code manually to locate them is tedious, you can locate them with online tools such as UnusedCSS.
- Remove white space. White space in your CSS code takes up unnecessary space (in the form of bytes). Be sure to go in and delete it.
- Minify/compress your CSS. There are free tools for this online. Just paste your CSS in and it will automatically generate a minified version.
Similarly, keep your Javascript code in check too. Do this by placing it “below the fold” (in other words, the section of the webpage that is visible after scrolling down). Javascript is usually larger in size, which means it can really hinder load times. By keeping it toward the bottom, users can see your page without having to wait for these files to load.
Consider using async and defer tags for your Javascript also. Async allows some scripts to load simultaneously, as opposed to one at time, meaning the browser can load other elements on the page while the files load. Meanwhile, deferring Javascript means that it won’t load until the other elements on the site have, preventing delays.
Source: Growing with the Web
Find a suitable hosting service
If you’ve optimized the content on your site to the best of your ability, the solution may be to change hosting providers – or to scale up your plan with your existing one. Flash sales and high-traffic events, like Black Friday and Cyber Monday, can seriously impact an e-commerce site’s load time. This can cost you thousands in sales.
Based on your site’s average traffic, your host can resize your server to accommodate spikes and decrease the likelihood of crashing. Also, research the best web hosting specifically for e-commerce. Shopify and BigCommerce are two of the major ones.
Furthermore, if your budget warrants it, consider getting a virtual private server (VPS) as opposed to a shared one. A VPS is a private, dedicated server within a larger server with independent server resources. Conversely, a shared server means you also share that server’s bandwidth, something that can be detrimental to your site’s load speed.
Other minor fixes
Equally important to regular load time is mobile load time, as the majority of online purchases nowadays take place on mobile devices. To improve mobile load time, your e-commerce site should be mobile responsive. You can check your site’s mobile responsiveness and load times with Google’s Mobile-Friendly Test.
Limiting pop-ups, slideshows, and similar features will also make an impact. Try to save pop-ups, and other similar website animations, for important announcements and sales.
If your site has a global reach, consider using a content delivery network (CDN). CDNs cache your website content on servers around the world. This makes local load times faster and more reliable for users in different regions.
Improving load times is essential for improving your conversions and ranking. Aside from its very obvious UX benefits, it’s also a prime SEO factor. Implementing a combination of the aforementioned solutions will drive more traffic and, in turn, more sales.