Introduction
Once, loading speed did not affect a site’s ranking. Just 20 years ago, all websites were equally slow, since the internet speed was low in general. So, users were patiently waiting for their favourite site to load. One could go to make tea, return to the computer, and see a half-loaded picture. Of course, it was charming in its own way.
However, the times are changing: Internet speed has grown up to tens of megabits per second and sites have learned to load a lot quicker – all that despite them becoming heavier, and users growing more impatient. Search engines like Google or Bing have improved their quality, reworked their algorithms, and also lost their patience – which means that no one tolerates slow sites anymore.
Why is high website speed so important for e-Commerce?
Increasing bounce rate
If your page loading time is too long, people are more likely to leave your website and go to your competitor. This leads to the loss of potential conversion. Such user behaviour increases the bounce rate. Search engines can consider your content irrelevant for users and downgrade the website by moving it downwards in the search results. That would harm your conversions, too. According to the research made by Akamai, a 0.1-second loading delay reduces conversion up to 7%. According to Google, if the loading time of the website is higher than 3 seconds, then 53% of people leave the site. Another Google study has shown that the probability of bounce reaches 123% in case the speed falls from 1 to 10 seconds.
Negative ranking factor
Google has also shown that low website download speed is a negative ranking factor.
A few years ago people were talking about Mobilegeddon. Google began to check how well the website’s mobile version was optimized. If the optimization was bad, the site went down in the mobile search results.
At first, everyone was scared – but then, breathed a sigh of relief: the usual search results were not affected by the changes. At least, not until Google announced its Mobile-First Index. Its principle is as follows: if a site has a slow, poorly optimized mobile version, then it will also drop in the desktop search results.
Short session length
A number of sessions is the number of visits, but not visitors. The total number of unique visitors is usually less than the number of visits, because each visitor can have more than one session. If fewer visitors come back to your e-Commerce store, you’re getting fewer sessions. The main reason for that is the slow loading speed of the site, disregarding some seasonal trends.
Akamai’s report found that a 2-second delay in page load speed reduced session duration by 51%. The fewer times a visitor returns, the fewer opportunities you have to introduce them to your brand or products, and, consequently, the fewer conversions you end up with. As an example, we can mention Ancestry, who increased their conversions up to 7% by decreasing their loading time by 64%. AliExpress shared that reducing the load time of their pages by 36% led to a 27% increase in conversion rates for new customers. Amazon found out that every 100ms of delay cost them 1% in sales. It seems like no big deal, but this little delay could result in Amazon losing almost $4 billion in 2020.
Main speed indicators
Let’s take a closer look at what speed is because so far, everything seems to have been limited to the notions of “quickly loaded” and “not loaded quickly”. Speed is made up of the three main indicators:
- Page rendering speed
Roughly speaking, your site consists of content, pictures, scripts, and other elements. And in the end, all this is compiled into a single page. It means that when a person visits a page on the site, it is rendered in some way. This can happen quickly or slowly depending on the amount of content, layout, site complexity, engine, hosting, and many other factors. - Content loading speed
It refers to how quickly the picture itself travels from your server to the user’s device. Of course, it depends on the Internet channel of the end user, but also on the channel where your server is running, your hosting, its capabilities, tariffs, and others. - Site response rate or Time to First Byte (TTFB)
This is the amount of time from the moment a browser sends a request to the server till the time the server responds. Ideally, the time should be no more than 200 milliseconds. TTFB is influenced by dozens of factors, including design complexity, the amount of static data and styles being loaded, and the lack of browser caching functionality.
Reasons for slow page loading
It seems that the problem of slow loading times should have died alongside the era of analogue modems, with the help of which users once accessed the Internet. However, the root of the current issue isn’t modems. Then what is it? There are multiple.
Passion for visual effects. Designers love animation and video, they value dynamics, and try to fill the sites they create with interesting visuals. At the same time, from the visitor’s point of view, the value of these elements tends to be zero if they cause the site to load at a snail’s pace. Visitors are ready to opt out of “live” images to quickly access the information they need.
Heavy images. Beautiful pictures are very important, but it is preferable to minimize their weight without sacrificing quality – fortunately, today it is possible.
Embedded videos. Any videos posted on your website’s platform (especially the non-optimized ones) increase the resource loading time. If the hosting is of poor quality, they are also played with freezes and slowdowns. The optimal solution is to first post videos on specialized video hosting sites, like YouTube, and only then embed them on the resource.
Excessive plugins, add-ons, scripts. Plugins are good because they provide additional capabilities to both site visitors and site owners. But too many plugins, add-ons, and scripts slow down the page loading speed, which means they reduce the conversion rate of the site. It is unlikely that it’s ever been part of your long-term plans.
Too many HTTP requests. Most of the total load time is taken up by stylesheets, images, and scripts. The more such components on the site, the more HTTP requests it has to make, and the lower the download speed will get. By simplifying the design, reducing complex elements and unnecessary redirects, you will help make the site load instantly.
The remoteness of the server from the user’s computer. The closer the user is to the server geographically, the faster the site loads the content for them. In order not to lose a remote audience, it is advisable to use distributed content delivery networks, or CDNs.
Ways to improve your site speed
There are ways to solve some of the slowdown issues by looking into the main reasons behind them:
Large pages
To reduce the amount of data sent to the user’s browser, use GZIP compression. This solution can reduce the size of web files by 70% without degrading their quality. You can check if this compression method is available for your site by using GiftOfSpeed. Remember that the process is running on the side of the web server. If your company uses NGINX Web Server, for example, there is a ngx_http_gzip_module module that acts as a filter that compresses responses using the “gzip” method.
Example Configuration
gzip on; gzip_min_length 1000; gzip_proxied expired no-cache no-store private auth; gzip_types text/plain application/xml;
Heavy images
Images that are large in size and resolution slow down page loading significantly. To avoid this, Google recommends using JPEG 2000, JPEG XR, and WebP formats that are much better than their JPEG and PNG predecessors. You can reduce the image size by using any online optimizer: Optimizilla, Compressor, Imagify, TinyPNG, etc. Also remember, that e-Commerce platforms have their own plugins for that purpose. For example, Shopify has such plugins as Unlimited SEO Image Compressor, Image Optimizer & Compression, and Image Optimizer.
A lot of requests from the browser
The higher the number of elements on the page is, the more requests the browser sends to the server, and the slower the loading becomes. To break this vicious cycle and reduce the number of requests, you can:
- remove unnecessary images, JS files, codes of third-party services;
- combine several small elements (icons, buttons) into one CSS sprite by using CSS Sprites generator, CssSpritegen or any other generator;
- use caching. Every time a person visits the site, their browser downloads all the necessary web files from the server. If you enable caching, the browser will save the data to the user’s device and pull it from there upon subsequent visits. You can choose a cache plugin to speed up the site, depending on what kind of CMS you use. For example, Hyperspeed, Page Speed Booster, and Fire AMP are all suitable for Shopify.
Overloaded JavaScript and CSS code
If the JavaScript and CSS code is too long and contains a lot of unnecessary elements (spaces, comments, etc.), then the page may load with delays. To optimize your code, you can:
- shorten the name of functions and clean up the code by using special services, for example, JavaScript / CSS / HTML Compressor or JSCompress;
- place CSS files at the very beginning of the page, so that they will be displayed gradually, component by component;
- move JS files to the bottom of the page. Thanks to this, the browser will load the page’s content first and the script – second.
A long distance between the server and the user
CDN content delivery networks such as Amazon CloudFront help reduce this distance. When a person visits a site, the CDN downloads the needed web files from the server closest to the user.
Slow hosting
If you have tried all of the tips above and your site speed is still poor, check the server response time. For example, this can be done in the Google Analytics report “Site speed” → “Overview”.
And some additional tips:
Choose a fast e-Commerce platform
Business needs an e-Commerce platform that has the infrastructure to accelerate downloads. Shopify, for example, has a Storefront Renderer (SFR) tool that speeds up your website. The working principle of SFR is to serve storefront requests as quickly as possible. If we compare the speed of requests before and after implementing SFR, then the performance in the second case is 5 times faster. The highest performance gains with SFRs occur on cache misses. A cache miss is when a page or other requested data is not found in the cache and must be fetched from other cache levels or the main memory, causing delays and slowdowns.
Use a Tag Management System
e-Commerce and digital marketing platforms use customer data. But this data collection can make the performance of your site worse. In most cases, the problem is caused by JavaScript tracking tags used for general analytics, conversions, behavioural retargeting, and other targets. Collecting customer data can also consume time and resources for your teams. A Tag Management System (TMS) like Google Tag Manager bundles all of your tags into one JavaScript request. If a bad tag is causing your website to crash, having a TMS can also help you remove that tag quickly.
Use pop-ups sparingly
Providing a quick view pop-up window might seem like common sense for an e-Commerce store. Pop-ups can help customers save time by showing product details directly from the catalogue. But it can actually make for a bad customer’s experience on your e-Commerce site. Pop-ups add an extra step for the customers and can slow down your page loading time. That’s because quick view pop-up implementations can sometimes pre-load the information from an entire product page. It’s a huge amount of loaded data, especially when there are lots of products on the page. To understand if the website needs built-in quick view pop-ups, use Click mapping. It’s a tool that tracks users’ behaviour on your site and can help you see where they click and scroll. Some apps that help with click mapping are Hindsight, Sumo, and Hotjar.
Avoid loops
The Liquid is a powerful Shopify template language offering a vast number of global and content objects for outputting dynamic content on the site page. Forloop is one of the objects that provide data about the collection being looped over. It happens when the system searches through all the products in a collection for a specific parameter like a price or a tag. If you have a large product catalogue, looping will take a long time. This issue happens when:
- the system uses nested forloops to look through all the products and find the relevant ones;
- the code loops through all of the products in the collection, then through all of the images, and renders a custom accent color close to each image’s palette;
- instead of limiting the number of products per page, the site shows every item on one page by using JavaScript to progressively load more content on demand.
Use premium hosting
Your web hosting is the backbone of your website. It should provide fast loading for millions visitors in case you manage to get that much traffic. If your web host doesn’t have a solid infrastructure, you will inevitably run into slow loading times. If traffic peaks, your visitors may start to experience problems with the site, so make sure you make the right hosting choice right from the start
Update your site theme
Make sure to see what updates have been included in the latest version of the online store. This often means improved code structure, compatibility with the latest browsers or CMS.
Remove unnecessary plugins
People love plugins as they add features that are not available by default. However, the more plugins you have, the slower your site becomes, since they require loading CSS and JavaScript files. Many plugins secretly install tracking scripts to collect data, which will affect page loading times. If you haven’t checked the plugin repository yet, make an audit. Also, check if any of the external plugin functionality can be coded into the core of your site. This will reduce the additional load.
Essential tools to monitor your site speed
Google Page Speed Insights
Google PageSpeed Insights is an official Google tool known and respected by web professionals all around the world. It has a very simple intuitive interface and a good set of features. Launched in 2012.
Just paste the site address into the search box and click the Analyze button. It checks the mobile version by default, but you can check the desktop one as well. You will see an estimation of the site’s loading speed on a 100-point scale. Note that from 2018, a speed of 90-100 points is considered satisfactory. The service will simulate page loading and give you 6 significant indicators. Finally, the service will carry out diagnostics and give recommendations on how to optimize the page and its loading speed.
GTmetrix
GTmetrix.com is another analytical resource that is useful, uncomplicated, and effective. It was launched in 2010. Its main feature is that the system executes the test request from Vancouver, Canada. Good distance to gauge speed!
Enter the site URL and click the “Test your site” button. If the resource is large, you will have to wait a while. In case the loading takes more than two minutes, then the system will disregard the request and give you an error. If the site loading time does not exceed reasonable limits, then you can receive a detailed report on the speed, the total page size, and the total number of requests. And you will also see an estimation of the resource loading speed relative to the average value of all analyzed sites – these are tens of thousands of units every day. The system will mark the flaws in red and recommend working on them. Everything that ends up in the green zone works sufficiently and wouldn’t significantly affect your site loading speed.
Dotcom-Monitor
Dotcom-Monitor is a service that was launched in 2014 and has been gaining more and more popularity each year. The sites are tested by simulating connections from 25 countries at once. It measures the website loading speed with and without cache. You can also check how it works on different browsers.
WebPageTest
WebPageTest is a proven service launched in 2009. Testing can be done by simulating a request from the USA, North and South America, Europe, Asia, Africa, the Middle East, and even Oceania. You can test website loading speed for free. Three test downloads are carried out, and the results of each are written out in a very detailed way. The service also shows which content took longer to load.
Pingdom Tools
Pingdom Tools is a nice tool with wide functionality that has been working since 2006. It estimates the website loading speed in milliseconds. The final report will show the time it took to load, the size/weight of the site and each type of the posted content, and the number of HTTP requests carried out. In addition to stating the facts, the service will give working recommendations for improving the indicators.
k6
k6 is a very useful Swedish service. It was launched in 2008 under the name of Load Impact, but was rebranded on January 1, 2021. It measures the speed of the site, simulating an increase in load (the number of visitors who came to the site simultaneously). Perhaps, k6 is the only service that will help you find out your site’s maximum load capacity – this is an important parameter. In the report, you will see a graph of changes in the site loading speed depending on the number of users.
The demo allows you to do 50 tests. There is also a completely free version of the program that you need to install on your computer.
Conclusion
Undoubtedly, site speed is one of the key factors in achieving great performance, customer loyalty, conversions, and, of course, search rankings. There’s nothing wrong with making the needed improvements by yourself, but you can always entrust this work to an experienced company. Bamboo Agile has a team of great professionals who can not only improve your website performance, but also develop a new one from scratch.
Contact us by filling out the form to get a free consultation – let’s discuss your online store needs!
