According to a Deloitte study, improving website speed by just 0.1s causes an 8.4% increase in conversions with retail consumers and an average order value of 9.2%. When it comes to customer engagement, it increases by 5.2%. Hence, it won't be an exaggeration to say that poor performance kills your sales; it will be only trivial.
Performance has been a ranking factor for many years and keeps gaining importance. With Google’s shift towards mobile-first indexing, and recently with Core Web Vitals update, taking proper care of performance might seem as clear as the necessity to have a mobile page. And it’s quite a good comparison, as “mobile awareness” also struggled to break into the mainstream, even though it is a much less complex issue to address.
Although very easy to notice, the challenges related to performance are extremely tough to detect and resolve. There is no silver bullet to use, nor a cure-all remedy, and - let’s say it right away - just a mundane groundwork, constant monitoring, and, unfortunately, some manual work can keep performance on the highest possible level.
Yes, it is definitely not a very sexy topic, yet, crucial to address as performance is the foundation of discoverability and - Google made it more than clear - the overall user experience.
The rule is simple: the longer something takes - site loading, finding a product, filling the forms, looking for the suitable payments - the more likely the user abandons the purchase intention and ruins the conversion rates.
Numbers don’t lie.
According to a study conducted by Google in 2017, as page load time goes from one second to:
- three seconds, the probability of a bounce increases by 32%.
- five seconds, the probability of a bounce increases by 90%.
- six seconds, the probability of a bounce increases by 106%.
- ten seconds, the probability of a bounce increases by 126%.
It is more than certain that these stats had increased in 2021, and on mobile are even more deadly.
Thus, according to Backlinko's study from 2019, the average time it takes to load a webpage fully was 10.3 seconds on desktop and 27.3 seconds on mobile.
That being told, there is a load of work to do, as it simply doesn’t matter how good your site looks if it takes too much time to load - users have zero intention to wait and see it.
Factors that influence performance
We had said it before, but we will keep repeating it repeatedly: performance results from plenty of factors in the infrastructure and both backend and frontend architecture. As such, it can’t be addressed by implementing a specific tool or using some magic practice. It’s way more complicated. In fact, it is a never-ending process of monitoring particular elements and optimizing their work to keep performance on the highest level.
To prove it, we gathered the factors that influence performance in the below sets. Yet, be aware that this is a far-fetched simplification of the problem.
- Animated element overloaded with CSS
It is almost the same case with CSS. Rich media are undeniably beautiful and make UI more impactful, but they consume a lot of resources. Again, it is about the code quality, as cutting them all is not an option.
- Unoptimized images
Poorly optimized images and videos definitely can be blamed for poor performance and lower engagement. Image optimization relies on compression that reduces image detail and size by removing some of its header information. The most favored file format, for now, is WebP. It was introduced by Google and integrated the Lossy and Lossless Compression technique. Thanks to WebP, the images can be compressed 30% more efficiently while keeping the image quality intact.
To optimize images efficiently, third-party services that optimize them on the fly - such as Cloudinary - can be helpful.
- 3rd party libraries & external plugins
The third-party libraries are a blessing. They reduce the repetitive work and save precious developers’ time by liberating them from reinventing the wheel all over again. However, it is not uncommon that 3rd party libraries are taken too lightly while overloaded with redundant functionalities.
Before using a given library, you should carefully consider whether it will really be useful in its entirety. If saving the developer’s time will cost the user time, this decision will backfire sooner or later.
- Lack of CDNs
CDN, which stands for Content Delivery Network, delivers content by caching servers placed across the entire globe. It is designed to cut the page loading time by serving content from the server placed in the client’s physical proximity.
How does Vue storefront approach the issues?
Vue Storefront has numerous performance-oriented features such as SSR, performance optimization, lazy loading, lazy hydrate, and all PWA-related, to name just a few, but - individually - none of them is a remedy for bad performance; they have to work hand in hand to make a difference.
Even if we are talking about PWA, which promises fast performance on its banners, we cannot perceive it as some kind of silver bullet. Indeed, it was designed to create a site or web app that is always accessible, fast, and engaging and is definitely one - but not the only one - of the ways to meet Google requirements in terms of UX.
Still, the above is just a fraction of our performance-aimed issues, and we are far from announcing a victory, as there is plenty of work that we are doing right now. There is our Vue Storefront cloud-native platform that - by default - takes care of properly, performance-wise setting of infrastructure (in a moment, we will provide a technical demo, thanks to which developers will be able to field-test this environment); and we are working on optimizing Storefront UI to make it even more optimized due to performance and easy to use.
Long story short - a lot is happening. It is impossible to cover it all in one piece. In the following articles, we will elaborate on the specifics of Vue Storefront’s performance-oriented features and in the way that - we hope - satisfy more tech-savvy readers.
The text was written in collaboration with Jakub Andrzejewski, Technology Leader at Vue Storefront, and Maciej Kucmus, Shopware PWA Lead Developer