E-commerce Website Speed Optimization:

10 Infallible Tips Every Store Should Implement

Every e-commerce business owner knows how important it is to optimize their website’s speed to create the best user experience possible. Crafting a striking design and developing seamless functionality is only the tip of the iceberg. Maintaining an online store year-round is where most merchants will face various technical issues. To ensure flawless user-experience website speed optimization must be your overarching consideration all other priorities fall under.

The golden standard of page load speed for an e-commerce store is 3 seconds or less. In fact, one out of four of your website visitors will abandon the site if it takes more than 4 seconds to load. That is a significant loss of opportunity for such a small fraction of time. Website speed optimization is not a one day process and takes consistent upkeep to provide stable results. To help you detect and fix the issues of poor load speed, we put together a list of the best website speed optimization tips as determined by years of Whidegroup experience!

What is Website Page Load Speed?

Page load speed refers to the time it takes to completely download a webpage with all its elements to the end user. It’s calculated from the moment a user clicks on a link or types in a website URL to the point when the webpage is fully loaded and a user can start interacting with it.

Page load speed is measured in seconds. The sequence starts with the browser loading HTML, then downloading JavaScript, CSS, fonts, and images in that order. When this process is complete, the webpage is considered fully loaded.

Your website’s load speed is one of the key factors that determines the success of your e-commerce business. High page speed means:

• • Lower bounce rates
  • Higher conversion rates
  • Higher ranking in organic search results
  • Overall superior user-experience

Statistics show that even a one second delay in the load time can reduce conversion rates by 7%. It’s curious how such a seemingly inconspicuous thing can have such a massive impact on your sales. But don’t fret! There is always room for improvement. Keep reading to uncover the tips on how to speed up your website.

Website Speed Optimization Tools: Which Ones to Use and How to Analyze

Before you can apply any of our website speed optimization tips, you first need to investigate what’s causing your e-commerce site to load slowly. Sometimes implementing a wrong solution to the problem can have a negative impact on your website speed too. Assess the current state of your website’s load time using online tools like Google PageSpeed Insights, Lighthouse, GTmetrix, or WebPageTest. Each of these tools will give you a comprehensive overview of your website’s speed and provide recommendations on areas to improve.

All you have to do is type in your website URL into the search bar and start the test. If you’re not a developer, the test results may confuse you. No need to panic because below we’ll decipher some of the key metrics to focus your attention on. To give you an example, let’s examine Amazon’s website speed using GTmetrix latest performance report.

Metrics to look at: understand your website speed optimization tool

The metrics that affect website speed the most that you should evaluate first are:

• Time to first byte (TTFB). Calculates the time between the browser requesting a webpage and the first byte of information you receive from the server. Ideally, your TTFB should be less than 200 milliseconds.
• First contentful paint (FCP). Measures how quickly the visitors will be able to see content on your webpage, such as background, images, text, etc. Having a fast FCP ensures better user-experience. It indicates that loading is in progress and they won’t need to wait much longer until the page fully loads. A good FCP score is 1800 milliseconds or less.
• Time to interactive (TTI). Measures how quickly a user can fully interact with the page. A page is considered fully interactive when it displays FCP and responds to user interactions within 50 milliseconds. A TTI score of less than 2.5 seconds provides the best user-experience.
• Speed index. Measures the speed at which your page is visually complete above-the-fold (meaning the first visible screen). While the aforementioned metrics serve as your timing milestones, Speed Index is a formulated metric that calculates how fast the webpage content is rendered on average. Your Speed Index should be 1.3 seconds or less.

Core Web Vitals – must haves for successful website optimization

One common thing you will notice across all testing tools is your Web Vitals score. Essentially, it’s a combination of load speed metrics that Google uses as one of the factors in their search algorithm. While they don’t directly influence your website speed, these metrics might affect your position in search results so they’re taken into consideration during the website speed optimization process. The three metrics are:

• Largest Contentful Paint (LCP). Measures the time it takes for the largest visible element on your webpage, such as image or text block, to be rendered. A good LCP score should be no longer than 2.5 seconds.
• First Input Delay (FID). This is an interactivity metric. It measures the time from when a user first interacts with the page to the time when the browser is able to begin processing that interaction. Your FID should be less than 100 milliseconds long.
• Cumulative Layout Shift (CLS). Measures the visual stability of your webpage. It calculates how often unexpected shifts to the layout elements occur while the page is loading. You should strive for a CLS score of 0.1 or less.

Now that you have your basic website speed metrics down, take a look at the recommendations on how to improve page load speed. Most online tools audit your webpage’s weak points and present a chart that provides valuable suggestions for website speed optimization. Based on results, you will have a more coherent idea of what aspects require attention to improve your load time.

How to Improve Page Load Speed: 10 Steps to Success

Now that you’ve tested your page load speed and identified the issues that are causing an increase in your website’s load time, it’s time to look into appropriate solutions. Keep in mind that most of these optimization options may require coding and development expertise. We advise you to reach out to experienced developers. They will diagnose your website speed and implement relevant website speed optimization tips.

Need help with speed optimization?

Reach Out to an Experienced E-commerce Development Company!

GET IN TOUCH

#1 Upgrade your hosting plan

If load speed testing revealed issues with TTFB or FCP the problem lies in server response time. In this case, we suggest revising your hosting plan or moving your website to a new web server as the first step to optimize website loading speed. Your web host is the cornerstone of your e-commerce website. It determines how good (or bad) the load speed will be. The user-experience on your website is directly connected to the resources that your hosting plan can provide.

Hard drive, RAM, and bandwidth are all deciding factors in your website load speed. They need to be thoroughly examined before signing up to any hosting plan. If any of those characteristics are lacking or insufficient, you’re guaranteed a slower loading website. For example, opting for a web host that utilizes a solid-state drive (SSD) instead of a hard disk drive (HDD) will result in a faster time to first byte (TTFB). Thus, having a fast and reliable web host is the foundation for a proper speed optimization of a website.

What Hosting options do you have?

So, what are the options for web hosting? In order of efficiency:

• Dedicated server. As the name implies, a dedicated server is a hosting option in which a physical server is dedicated to a single owner. Although it’s the most costly option, a dedicated server is ideal for large scale businesses with high traffic. It provides full control over the server and significantly speeds up website load time.
• Virtual Private Server (VPS) hosting. This type of hosting utilizes virtualization technology that provides the user with a private hosting resource while still sharing the physical server with other users. It’s a perfect in-between option for medium sized businesses whose traffic exceeds the abilities of a shared host, but doesn’t require a dedicated server.
• Shared hosting. This hosting solution is the least expensive, since shared hosting allows multiple websites to reside on a single server. It’s a great option for small, non-commercial sites that don’t generate much traffic.

Dedicated server

Needless to say, the most efficient option for website speed optimization is a dedicated server. Not only will you get server resources all to yourself, but the level of flexibility you will have is unmatched. You can customize your server environment, such as software, disk space, the server’s central processing unit (CPU) to meet your optimization needs. On top of that, you can rest assured that your website is completely secure from neighboring sites.

Of course, all of this individualization comes at a price. Quite literally, the price for a dedicated server hosting may not be affordable for some smaller-scale businesses. Most hosting providers offer several plans depending on your needs, from budget-friendly plans to all-inclusive options. The average monthly fee for a dedicated server is around $150.

Additionally, you will require assistance from a DevOps engineer in order to properly setup your dedicated server. If you decide to opt for dedicated server hosting, our expert DevOps engineer will help you configure your server to fit your business’s needs!

VPS hosting

If a dedicated server is not exactly what you’re looking for, consider moving your e-commerce website to VPS hosting. What makes VPS hosting so attractive is the scalability it provides for a relatively affordable price. While the underlying hardware is shared between multiple users, you are granted a part of the CPU, disk space, memory, and bandwidth.

Mimicking the resources of a dedicated server, VPS hosting will provide you with the freedom to choose the operating system, applications, and overall software for your website. The cost varies greatly depending on the plan and the hosting provider. Generally, the price range for VPS hosting is between $20 to $100 per month.

Shared hosting

If your e-commerce website operates on shared hosting, we strongly urge you to upgrade your hosting plan in order to speed up website loading. Shared hosting is not a suitable option to maintain an e-commerce store. This type of server can host hundreds of websites simultaneously and if one of them sees a spike in traffic your site load speed will undoubtedly be affected. This hosting solution only fits non-commercial sites, like blogs, that generate less than 1,000 visitors per day.

#2 To optimize a website speed, use a content delivery network (CDN)

When users are physically far away from your server, the time to process HTTP requests that fetch webpage data extends. This, in turn, slows down your page load speed and creates an awful user-experience. To solve this issue and speed up website loading you should utilize a content delivery network (CDN).

A CDN is a geographically distributed group of servers that help to deliver content to the end users much faster. CDN stores static webpage content (such as HTML, JS files, images) on edge servers across the globe to make your website pages load faster.

Think of it this way: if your origin server is located somewhere in the US and a user from Germany initiates a visit to your website, subsequent requests and data have to travel halfway across the globe to reach the browser. With CDN employed, these requests are routed to the closest edge server, based on user location, significantly reducing latency and improving page load speed.

Most top-notch web hosts provide CDNs by default to take the website speed optimization work off your hands. You can check if your e-commerce website already uses a content delivery network with tools like CDN Finder and WebPageTest. If it doesn’t, look for renowned CDN providers, such as Cloudflare, KeyCDN or MaxCDN, which all have a fairly easy setup process that won’t require any development expertise.

Although implementing a content delivery network can sometimes be costly, the benefits of website speed optimization greatly outweigh the expenditures.

#3 Reduce the number of HTTP requests

Every time a webpage loads, numerous requests are made to the server to fetch webpage data, like images, stylesheets, and scripts. The server then returns the data files contained on a webpage to the user’s browser. This process is repeated for every element on the webpage. Consequently, the more HTTP requests a browser has to make, the slower the webpage will load. Therefore, to speed up website loading you need to reduce the number of HTTP requests.

Check the number of HTTP requests

You can assess the number of HTTP requests your website sends to load every page by using Google Chrome Developer Tools.

If you use Windows, there are several ways to access Developer Tools to choose from:

• Open Chrome menu in the top right corner and select More Tools > Developer Tools
• Right-click on the webpage and choose Inspect
• Press F12 on the page you want to analyze
• Use a combination of Shift + CTRL + J

To access the Developer tools on MacOS, press:

• Option + Command + J

You will see a window pop up on the screen. Click on the “Network” tab. On the bottom left corner you will see the total number of requests a page makes.

Further investigate the files on your webpage by reading the chart presented to you:

• The “Name” column lists all the files contained on the page
• The “Type” column describes the type of each file
• The “Size” column shows the size of each file
• The “Time” column reports how long it takes for each file to load

Another thing you might notice is that images take up a substantial portion of your webpage size. The standard advice is to eliminate unnecessary images altogether, but for an e-commerce business that may not be possible. Further down our website speed optimization tips you will find valuable advice on how to optimize your images.

How many requests to strive for?

When it comes to HTTP requests, there isn’t a magic number you should strive for. In fact, complex websites do have a large number of requests per page. Website speed optimization comes with a set of practices that focus on reducing the size of the files by minifying and combining them. How to speed up a website using these techniques is what we are going to focus on in the next point.

#4 Minify and combine CSS, JavaScript, and HTML files

Minification is the process of removing unnecessary characters from the source code. These characters include comments, whitespaces, line breaks, formatting. By minifying your CSS, JS, and HTML you will reduce the file size and, therefore, speed up website loading.

Thankfully, you don’t have to be a developer or have extensive coding knowledge to successfully minify your CSS, JS, and HTML files. There are lots of free tools that make website speed optimization easy for anyone with just a few clicks.

How to minify files?

The most popular online minification tools are JavaScript Minifier, CSS Minifier, and HTML Minifier. All you have to do is simply paste in your code, then click “Minify” to receive the minified code. You can even download the minified version of the code as a file for convenience. If you’re looking for some offline code optimization toolkits to speed up website loading in the development stage, Google recommends using HTMLMinifier, CSSNano, and UglifyJS.

Simply minifying code by itself isn’t going to help with website speed optimization. To achieve the best possible results, next you want to focus on combining the minified files into single bundles. If your site runs multiple CSS and JS files to render the page, you can combine them into one file.

For example, if your page loads five external CSS files and five external JS files, that means the server has to fetch ten separate files. By combining all of your CSS into a single file, as well as combining your JavaScript, the server only has to fetch two files, instead of ten. Thus, reducing the number of HTTP requests and considerably speeding up website loading.

How to combine CSS and JS?

To successfully combine JavaScript and CSS files, you can simply import one file into another using import defaultExport from “module-name” line. The import process takes milliseconds to complete depending on the file size and server response time. Once you have moved the code from external files into main files, the calls for the old files must be removed from the HTML document.

After implementing these changes, perform a webpage test to see if everything is working properly. Furthermore, you should see a significant improvement to the loading speed of your webpage.

#5 Enable Gzip compression

Beyond minifying and combining code, compressing your files using Gzip is another must-have practice for website speed optimization. Gzip is a file format and a software application that reduces the size of your CSS, HTML, and JavaScript files.

In simple terms, Gzip format locates duplicate strings of code in your text files and abbreviates them to make the file size smaller. Enabling Gzip compression can have a significant effect on website speed optimization as it can achieve a compression ratio of around 70% without any data loss! Thus, minimizing the time needed to download static files to a user’s browser.

While the elements Gzip compression alters are important for a developer to read and work with the code, the browser doesn’t need them to correctly display a webpage. Today, enabling Gzip compression is considered a standard practice of speed optimization. You can check if your website already uses compression here: Gzip Compression Test or Gzip Compression Checker.

How does Gzip compression work?

Gzip compression happens on the server side, meaning the web server compresses the files before sending them over to the browser. To help you understand how Gzip works within server-browser context, think of it this way:

• Files are compressed using Gzip format
• A browser makes a request to the server for a compressed version of a file
• The server returns a Gzipped file to the user’s browser
• The browser then receives and decompresses the file and is able to properly read the data

Most browsers nowadays support Gzip format, but if the request is sent from an old browser that doesn’t understand Gzip, the server will return a regular, uncompressed version of a file.

Follow the configuration guidelines to successfully implement Gzip compression. The exact code may vary depending on the web server your website uses, so we recommend consulting a professional developer. Once you’re done, run a page load speed test using one of the tools mentioned previously to evaluate your website speed optimization progress. We are sure you will be impressed with the outcome!

#6 Optimize the size of your images

High-quality imagery is a necessity for any e-commerce business to build a solid reputation and secure consistent conversions. Since customers want to scrutinize every detail of the product they’re interested in, e-commerce owners tend to upload multiple immensely high resolution pictures. But oftentimes, unoptimized images are the main culprit behind a slow website loading speed.

Back when you conducted your file audit, you may have noticed that images make up a substantial portion of elements on the webpage. If cutting down on the amount of pictures is not an option, reducing the size of your images is something you need to pay close attention to. Below, we will take a look at the ways you can speed up website loading by optimizing your website images.

Consider next-gen formatting

Back in 2010 Google introduced the WebP image format which became a hot-topic within e-commerce circles for its main selling point — compression. The WebP format allows for a much smaller image size than its competitors (JPEG, PNG, GIF) without sacrificing quality. In fact, opting out of old-gen format in favor of WebP format can reduce the weight of your images by roughly 30%. That is a huge advancement in terms of website speed optimization.

But just like everything in life, WebP has its own major disadvantage: at the time of writing this article only 90% of browsers fully support this format. You can check Can I Use? to see the most current information about WebP browser support.

So how can you provide users on the supported browsers with a fast-loading experience, while simultaneously not leaving the 10% with broken images? Google suggests serving fallback images in JPEG and PNG formats for older browser support using HTML tag.

Converting your JPEG and PNG images into WebP format is fairly easy since a lot of free online converters have become available in recent years. The most popular tools for conversion are Photoshop, Convertio, CloudConvert and Ezgif.

Optimize the remaining images

Regardless if you went with the next-gen format or not, the website images that remained in JPEG and PNG formats require optimization as well. First, make sure you’re using the right old-gen format for your images.

Second, you want to compress the size of your images as much as possible. Compressing your images is a tried-and-true website speed optimization technique that doesn’t require any development experience.

There are two methods to go about compressing images: lossless and lossy. The first option lets you reduce the file size without any loss in quality, while the latter allows for a greater size compression with some quality lost in the process. Most online tools offer you a choice between these two options before the compression takes place.

With free online tools like TinyJPG, TinyPNG, Kraken.io or Compressor.io you can reduce the size of your images by up to 60%! This step alone could bring major results in the website speed optimization process and elevate user-experience.

Size your images properly

One of the fastest ways to optimize website loading speed is to size images that appear on the webpage appropriately. For example, if you want an image to appear 400px wide on the webpage, don’t upload a 2000px image and set the width parameter to the size you want. The browser will need to load the full picture first, then adjust it to the desired size, ultimately slowing down your page load speed.

If you’re currently using this approach, we strongly suggest cropping your existing images to a correct size. Making this step a priority each time you upload images to the website your website speed optimization efforts are going to be much more productive.

The only exception to this rule is the product imagery on your product pages. Most e-commerce stores these days allow customers to zoom in on pictures and analyze the product in great detail. In that case, upload an image in a larger size and configure it to display at prefered width on the webpage to preserve the quality.

#7 Leverage browser caching

Like we discussed earlier, to load a webpage the browser has to send multiple requests to the server to retrieve data files. This back-and-forth process repeats each time a user wants to access a certain webpage. But what if there was a way to serve static assets, such as HTML, CSS, JS, and images, to returning visitors in a much quicker fashion? Thankfully, an answer to this question has been around for a long time — browser caching.

What is caching?

Caching is a process of storing copies of files contained on the webpage in a temporary storage location (i.e. cache) so the browser can gain access to them quicker. This feature is especially useful to e-commerce websites since customer retention is one of the main principles of a successful business. Leveraging caching is not only going to help with website speed optimization, but create a splendid user-experience for customers who revisit your website.

How does caching work?

The way caching works is rather simple to understand:

• The HTTP request browser sends are first routed to the browser cache
• Browser checks to see if any valid cached responses are available
• If there is a match, the response is fulfilled by serving a cached asset

Caching diminishes the need to send additional HTTP requests, thus reducing the server workload and latency which will speed up website loading.

The caching process is controlled by caching headers. Using a Cache-Control directive you can manage how and for how long cached responses will be stored by the browser. Depending on the resource you want to cache, an appropriate expiration date must be set in place. For instance, the assets that change infrequently, like brand logo or product pictures, can have an expiration date set from one month to a year as a reasonable time period.

These assets will be stored in the browser until the cache meets its expiration date or the hard drive cache is full. When the hard drive cache is full the end user can empty it since every browser nowadays allows one to “clear cache” in the settings. Leveraging browser caching correctly will require some coding expertise, so you should better leave this job to developers. Nonetheless, adding caching to your website speed optimization process will undoubtedly take your website performance to the next level.

#8 Eliminate unnecessary functionality

Without a doubt, third-party features are a necessity for any e-commerce website, regardless of the platform your site is running on. Plugins and apps add custom functionality, from social media integration to checkout options, to create the best possible user-experience on your website. However, scheduling plugin audits is a great maintenance practice to adopt.

The more plugins you install on your website, the more website speed will be affected and there’s no way around it. Any outdated, incorrectly configured or simply inefficient plugins can be damaging to the website speed optimization process.

Having an excessive amount of third-party functionality not only slows down your loading speed, but can create an additional number of issues. For example, compatibility issues may arise when two or more installed plugins try to change how the same feature works. Maintaining third-party applications is tedious work, so conducting an audit and eliminating all unnecessary functionality is the most reasonable thing to do.

Which features to remove from your website?

Start by pinpointing the plugins you never or only occasionally use. These would be your prime candidates for elimination. Then, identify the plugins that offer the same or similar functionality. If two different plugins provide the same functionality, evaluate which one of the plugins is more convenient for your website and uninstall the other.

Keep in mind that simply deactivating a third-party installment is not enough to completely eradicate it from your website. If the plugin is not properly uninstalled, some plugin files can still be found on the back end of your website and slow down the loading time. The instructions for uninstalling and deleting all plugin files from your website will vary depending on the platform your e-commerce site operates on. Consulting with a support team to find out how to properly remove an extension would be beneficial.

After eliminating unnecessary third-party functionality, perform a page speed test to see your website speed optimization progress. Deleting even a few plugins should increase website loading speed.

#9 Reduce the number of redirects

Redirects are imperative when you reconstruct your website’s content to avoid leaving broken links behind. They signal to search engines (and users) that the page has been moved to a new URL by automatically “redirecting” them to the final destination page. In this case, if the redirect was not in place, the user would have landed on a page with a 404 error.

With that being said, having too many redirects can create additional HTTP request-response cycles and have a negative impact on website speed optimization. The catch here is that redirects are read in sequential order, meaning the server has to read every single redirect before rendering the desired page. All of these unnecessary steps add to the Time To First Byte and create server overhead, which have the potential to slow your website down.

How to find all redirects within your website?

But all hope is not lost. Start by checking how many and what kinds of redirects your website currently has. You can do this with online tools like Screaming Frog, Redirect Checker, Redirect Detective, or WhereGoes.

Your priority should be identifying redirect chains as they have the biggest impact on your page load speed. Redirect chains occur when an initial page — let’s call it page-1 — redirects to page-2, which redirects to page-3 and so on until the final destination page is reached. A redirect chain with over five redirects is a major concern to website speed optimization.

When it comes to the amount of redirect directives in your .htaccess file, if you have less than 50,000 redirects, your website speed probably won’t be affected. The issues start to arise after 50,000+ redirect directives have been placed in your configuration file. You might start to notice a considerable increase to your TTFB, which means it’s time for a redirect audit.

How many redirects is ok?

Ideally, you want to aim for a total redirect elimination from your site to optimize website loading speed as much as possible. Unfortunately, this goal is likely unachievable for most e-commerce websites. For now, if you detect any redirect chains, focus on updating links to avoid unnecessary server round trips. While the improvement to the load speed won’t be tremendous, when speaking of website speed optimization every second counts.

#10 Implement lazy loading

To close out our website speed optimization tips, the last but certainly not least practice we want to discuss is lazy loading. Lazy loading is a technique that prioritizes your above-the-fold content (the top part of the screen) by loading only the content that appears in the viewport first. Then, as the user scrolls down the page the rest of the images will load when a user gets close to them.

To put it in perspective, let’s imagine that your homepage features 15 pictures. Without lazy loading the browser will have to download each image before your webpage can actually show any content. With lazy loading, the user will be able to interact with your homepage before the images below-the-fold fully load. Utilizing lazy loading is a great way to reduce the initial page load time and conserve both server and client system resources.

While implementing lazy loading for all of your webpage images may be tempting, you must avoid doing so. Consider your above the fold content as a critical resource that should be loaded accordingly.

How Helpful Is Lazy Load?

Check Out Our Latest Case Study

Check now

The cons of Lazy Loading and how to avoid them?

One downside of lazy loading is that you can’t pinpoint where the fold lies for every visitor, especially since at least half of online traffic is generated through mobile devices. To combat this issue your best bet is to create a buffer zone for your content just a bit below the fold. That way the images in this buffer zone will begin loading before they appear in the user’s viewport and prevent any loading delay or broken images.

To avoid layout shifting when lazy loading is initiated, you must set lightweight placeholder images in place. Your placeholder can be a solid color image with the same dimensions as the actual image you want to display on the page.

Make the Mobile User Experience Even Better

Find Out the Reasons to Optimize Your Website for Mobile

Find out now

If you’re comfortable with basic JS code editing you can implement lazy loading with open-source scripts like LazyLoad and bLazy. Otherwise, we recommend contacting a professional e-commerce development company to properly install lazy loading to make sure your website speed optimization goals are achieved.

Looking for help?

Contact Professional Shopify Development Company

GET IN TOUCH

Final Thoughts

Website speed optimization is a challenging undertaking that should be handled with the utmost care. Before making any changes to the website’s structure, you should conduct a proper website speed diagnosis. The last thing you would want is fixing nonexistent issues that could potentially change how your website operates. Instead, spend some time investigating what’s causing website load speed issues and focus on the high-impact factors first.

In this article, we have uncovered the most common factors that affect website speed and provided website speed optimization tips to help you find the most appropriate solution. You may have noticed that some methods go hand-in-hand with each other and bring more value when incorporated together. But you must remember that most of these website speed optimization techniques require coding expertise and must be implemented by an experienced developer. Feel free to contact us anytime for a consultation with our experts. The Whidegroup team will gladly help you optimize your website’s load speed to create a user-experience worth coming back to!