How to speed up your online store?
More and more reports and analyses show that the majority of website visitors are mobile channel users. The e-point and Google report also says that this is reflected in the Google search engine itself. The data show that last year the number of queries from mobile phones was twice as high as from computers. Unfortunately not all entrepreneurs take this into account when designing their websites.
During Mobile Trends Conference 2022 two specialists from mobile industry spoke, who are the authors of the audit of 50 Polish online stores. Piotr Kowalski from Google discussed 5 recommendations for improving user experience of mobile website, while Michał Szklarski from e-point suggests 5 ways to speed up loading your portal.
In the introduction of the document, we can read that Google commissioned a study from French research and consulting firm IPSOS. The resulting data shows that Poles are on average in more than seven shopping processes at once. This is a special feature because it means that we shop everywhere: while riding the streetcar, standing in line, in bed or at work. Such optimistic information for sellers, however, needs to be confronted with reality, as ca. 70 percent. Polish customers abandon the shopping cart without making the final conversion. A big culprit for this is user experience, but also the technological limitations of cell phones. Smartphones have up to six times smaller work surface area, which makes navigation much more difficult. A serious design obstacle is also the lower computing power of such devices, resulting from weaker processors, graphics cards or operating memory. Sometimes the network connectivity is unreliable, and additional frustrations are provided by badly designed page scripts or bad loading settings of individual elements of the mobile version of the store.
If we talk about improving CLS then let’s answer the question what is this indicator at all. Cumulative Layout Shift one of Core Web Vitals elements responsible for visual stability of the page during loading. According to SEO specialists this is one of the most important indicators, because it has a real impact on the evaluation of the service in the Google PageSpeed Insights tool. This tool checks optimality of loading a given website. In addition to the technical aspects, it is worth realizing that the lack of optimized CLS is not just about failing a test in a tool. On the other side of the screen there are angry consumers, who may never want to use our store again. As invette points out.pl this indicator should not exceed the level of 0.1, it requires us to Google.
What working on CLS means in practice? With optimization in mind, we need to define a specific size for our images in the HTML code. Michal Szklarski argues that setting precise and HTML-tag-defined width and height for image elements <img> reduces layout offsets and tag loading. So we have a situation in which on a mobile phone the largest elements load first, after which smaller ones appear. The elements are then adjusted to fit the device screen.
According to research, the majority of Polish stores do not have a precise size defined, which causes uneven loading of the site, especially its graphic elements. To fix this you need to define and override the width (‘width’) and height (‘height’) parameters in the right image sets.
Problems with CLS were reported by as many as 82%. of the researched webshops.
The cache allows quick access to data stored on the device, separating it from RAM, says Morele.net. Website harbingers.io makes us aware that cache is responsible for storing data needed when the browser views the page. This is important due to the fact that thanks to this memory based on very fast (and very expensive) nanotechnological semiconductors, the device does not have to download the same data from the web every time. The browser is able to retrieve them from the cache. Another tip for improving the loading speed of our website is to extend the cache storage period. This results in a much greater availability of data for the page. Specialists ensure that the fixed elements of the web portal can be easily stored on the user’s device. The result will be no need to read the page over and over again on each subsequent visit. Apart from shortening the loading time, it is connected with saving mobile data needed for information transfer.
The audit of websites showed that a large part of resources loads with a maximum cache time of 0 to several days, which is not mandatory with little changeable website resources. It is therefore recommended to increase the caching time of permanent resources to as much as 12 months or even longer.
A short caching period was encountered in 65 percent of e-commerce sites surveyed.
Make text visible during font loading
Contrary to what you might think, fonts are usually large files, and loading them can take a while. There are browsers, which do not show the user any text until the fonts are loaded. Then we have the FOIT and FOUT phenomenon. This factor did not cause page-loading problems, but it dramatically affected CLS by “breaking up user attention,” reports the report. As we can guess, this can affect a fairly low level of positive customer experience. It is recommended to replace old fonts in TrueType Font formats with new fonts in Web Open Font Format formats. Furthermore, web store owners should consider implementing the CSS “font-display” feature, which allows you to see the text as it loads.
The problem with old fonts was experienced by over 60 percent. of audited stores.
The m-commerce market is not easy. A huge number of competing players, algorithms constantly lurking from around the corner and customers whose expectations are increasing day by day. The efforts put into marketing and refining your offer may prove to be ineffective if your website does not meet the visual expectations of your customers or they simply get tired of waiting for it to load. After all, competitors’ sites take three seconds less to load. UX and usability of a website are nowadays as important as marketing, sales or logistics. Good first impressions, the ergonomics of the site, as well as solutions that make the site easier to use, are the most important factors in increasing conversions. It is especially important for people with disabilities, who do not need to see our store or be able to move their fingers. The main conclusion of the research is that users demand from the store that the content should appear on the screen with immediate effect, and the interactions should not cause any problem. The more we do to optimize our web resources, the fewer customers we will lose, and perhaps the more we will gain.