The old expression “time is money” means a lot in e-commerce. Each second or thousandth of second lost to load one page represents many business opportunities that go up in smoke.
This scenario can be evidenced by data demonstrated in the market, such as:
The best way to know if your website takes too long to load is to use speed monitoring tools. The best ones are WebPagetest, Pingdom Website Speed Test, PageSpeed Insights, GTmetrix and the plugin Developer Toolbar of Google Chrome (just press “F12” to access the website, go to the “Network” tab and reload the page to do the measurement).
The results of tests conducted on WebPagetest show interesting metrics that the retailer can take advantage of, such as:
First Byte Time; Load Time; Start Render; Bytes In; Keep-Alive Enabled; Compress Transfer; Compress Images; Cache Static Content; Effective use of CDN.
In general, what takes longest to load the website of the virtual store is customization. This means that the way a website is customized, i.e. the number of HTML, JavaScript, and CSS images and tags is what can make a difference in the performance of an e-commerce as compared to others.
For example, the excess of ad trackers, remarketing, analyses, heatmap, product recommendation engines, and interaction with customers may delay the full load of the website. In addition, many of these tags are activated by third parties to increase the number of resources of the website, but, although some of them may be really necessary, sometimes these extra functionalities are not worth it. Thus, each retailer should analyze how each application impacts the conversions. If the results are positive, these applications may be kept.
In addition, there are other resources, such as caching or the use of CDN (content delivery network). The point is that in these cases, the VTEX customer does not feel the difference because the platform infrastructure supports it all, and handles in the same manner throughout it all. For example, in our system, both the CDN and the time setting for use of cache are native.
There are other more technical and deeper issues that deserve a more detailed analysis:
The number of images loaded onto a virtual platform does not pose a problem, but rather the weight and size of each file are what can compromise performance.
For example, an image weighing more than 100 kb is too heavy, particularly if we consider that an e-commerce loads many images. The ideal size should be between 50 kb and 80 kb.
Regarding the dimensions of these images, the problem arises when, for example, the photo of a product is shown in a reduced size on the shelf of the home page, but, in fact, it has a larger dimension.
Let’s be more practical; here’s another example: Imagine the photo of a blender on the homepage of a virtual appliance store that is shown to the user in a size of 220 x 220 pixels. So far, so good. The error occurs when originally the same image had 1000 x 1000 pixels. The browsers perform the applications, download the original photo and resize it, generally through CSS, to the size established by either the retailer or its developers team.
Previously we mentioned the weight that applications activated by third parties cause in the load of an e-commerce website. In this case, the big problem is in the order of execution tags.
Consider, for example, the benefit of having a customer service chat that works without the user needing to stay for a longer period on the website, or the ability to activate a recommendation engine without the visitor even having to scroll through the product page.
It is not necessary to execute all applications when loading the main page. If this happens, undoubtedly the load becomes much slower.
One practice that generates slowness and that many retailers make use of is horizontal browsing.
Many times, the retailer prefers to exhibit 12 products on the same line, instead of showing only 4 at the same time. The inherent problem is that 8 products are hidden and only appear when the visitor clicks there. However, because visitors are more inclined to scroll, there is a lot to be said for vertical browsing.
Gustavo Rios explained in his webinar, stating that audiences tend to navigate more vertically than horizontally. Therefore, it may not be necessary to include these new applications (more images and horizontal scrolling), unless they work very well in your store.
There are some good practices that help retailers improve the performance of their e-commerce and, therefore, offer the consumer a more user-friendly experience. Below we will point out the main practices considering the advice presented in the webinar:
A 500 kb photo can be compressed to less than 100 kb without the image losing much quality. This is possible with the use of some programs and tools. Adobe Photoshop is one of the options, but there are other simpler applications, such as Riot and websites such as TinyJPG, Kraken (use the option “Lossy”) and Compress PNG.
In most cases, it is possible to reduce at least 50% of the size of image files, which is a very significant reduction for a website.
Resizing the photos is easier than compressing them. It can be done efficiently with Paint, Photoshop, or Riot.
There are websites and tools such as Fotor, iLoveIMG, and ImageResizer on the Internet that make this task simpler.
There is no ideal standard for the size of photos, it depends on the place where they will be shown. On the home page, for example, if they are not extended when the mouse is moved, the images can be uploaded in the size shown. On the product pages, the images may be a little larger because although they are displayed in smaller dimensions, the consumer can zoom in to see the product in high definition.
The compression of these types of code is a more technical task and, in general, it is incumbent upon the developers and the programming team of your platform.
Minimizing applications in Java, HTML, and CSS consist of removing, modifying, or reducing spaces, comments, characters, line breaks, and names of some variables. The intention is to compact these codes in the least number of lines possible so that they are faster and can save resources, while also speeding up the response time of the servers.
There are certain tools that can be used to optimize codes, such as Adobe Dreamweaver (focusing on the improvement of HTML), Minify (CSS and Java), and YUI Compressor (CSS and Java).
As previously mentioned, the visual organization of products shown on the home page and category pages may influence the website load time.
Therefore, it is interesting to try a layout that eliminates all types of horizontal scrolling and focus on vertical scrolling.
The products that were previously hidden may appear on a new line or the number of items may be reduced, causing the browser to have to load fewer applications.
Thanks to the website speed monitoring tools, it is possible to identify the applications loaded by your e-commerce. When analyzing the result, it is worth evaluating the impact of each script on performance and, mainly, on the conversions of the page. This will help to identify the real need of each of them.
In addition, it is important to verify if there are duplicate codes and requests in the results or in the HTML, CSS, and JavaScript structures of your website.
Another interesting bit of advice given by Gustavo Rios is the use of the Ghostery plugin for Google Chrome. With this plugin, it is possible to identify all the trackers and third-party applications that run on the website.
In the event of duplicate tags or if those that perform equal or similar functions are identified, try to block or exclude these applications using Google Tag Manager or any other tag manager from your website.
Another way to manage the use of applications is to reorganize their loads. In this case, the best way is to make certain scripts run according to the user’s interaction with the website.
The retailer can do this using Google Tag Manager. With this application, it is possible, for example, to run a remarketing tag to be activated only when the visitor spends more than 30 seconds on the website.
Another very useful tool is LazyLoad, which improves the loading of pages by making the images run only when they appear in the user’s visual field.
In summary, these services help your website load the primary content more quickly, so that the Time to Interact can be shorter.
The back-end of your e-commerce can also greatly influence the website speed. In the case of VTEX, the infrastructure is the same for all customers, the starting point is the same. Therefore, retailers start with resources that improve their performance.
One of them is the native CDN already mentioned in this article. Additionally, retailers also have access to compressionWebP, that can compact images in PNG, JPG, and JPEG formats from 30% to 40% of the file size, even if it has already been compressed before.
VTEX also assists customers in the implementation of HTTP2 protocol for retailers that migrate their e-commerce to HTTPS on the platform. This combination offers more security for transactions carried out by consumers and is faster when opening pages than the traditional HTTP 1.1.
In addition, we add a graphic on the home page of the dashboard for each client that will monitor the history of the average load time of the store and compare it with other e-commerce websites on the VTEX base.
In a virtual store, loading speed and conversion are two deeply related topics. For this reason, retailers should be aware of the performance of their websites and be a bit more cautious when customizing the pages. Ultimately, customization is what most differentiates the fastest e-commerce from the slowest one.
In the case of VTEX, this is even more evident, since the infrastructure is the same for all customers. In fact, all retailers should know this, because images and codes that are not optimized and unproductive tags may delay consumers.
Thus, it is necessary to monitor applications, compress images and codes, and keep only the scripts that help in conversions. These are some practices that will make you store run faster and, therefore, be more profitable overall.
The CCX Company, in collaboration with VTEX Commerce Cloud, expresses gratitude for having had the opportunity to enhance its understanding of the advantages, trends, and other elements addressed in the current topic. This article was jointly developed and is brought to you by the VTEX Commerce Cloud team.
