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.
- The crazy amount of JavaScript
Don’t take it wrong: we all know the potential of JavaScript, and we do not imagine a modern site without it. JavaScript makes websites vivid and - most of all - interactive, but it has to be used responsibly. It is hardly breaking news, as even Google itself was calling for it to be used responsibly. The size of JS scripts, code quality, and complexity can significantly affect devices’ battery life, especially on low-end devices. JS execution takes time and often delays the display of the "hero" and - as such - negatively influences SEO metrics such as Time to First Paint and First Contentful Paint. The golden rule is to use JavaScript only if it is really needed, and if not, use HTML and CSS natively as JavaScript is not a shortcut.
- 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?
Alokai 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, PWA foundation is JavaScript, which causes controversy in the SEO world due to its turbulent relationship with Google. This (and not only this) browser keeps struggle with digesting JavaScript code. Although a lot has been improved over the years, Google engineers and SEO specialists recommend using JavaScript "carefully” and “responsibly.”
What is important is the size of the JavaScript files, the code quality, and the complexity; the rule is simple: the simpler, the better. “Overwritten” code can significantly affect battery life and parse time, which is especially noticeable on low-end devices. Longer JS execution times forced on the user's device delay the first paint of the "hero" content that the user sees on the screen. These negatively influence metrics such as Time to First Paint and First Contentful Paint, which measure how fast content is served to users.
Avoiding JavaScript is - on the other hand - not an option. JavaScript makes sites fun, interactive, and live; without it - it would be just a semi-static skeleton with zero chances to burst engagement. However, it must be used - as we already said - responsibly, and - in practice - it indicates using good practices such as lazy loading (delaying initialization of resources until they’re actually needed to improve performance ), lazy hydration (preventing a component from loading initially, and activating if a given action is triggered), and - of course - server-side rendering (sites marked with special tags are rendered once and saved to a very performant in-memory database, reduces the load on the server and the time required to serve the response).
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 Alokai 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 Alokai’s performance-oriented features and in the way that - we hope - satisfy more tech-savvy readers.
Stay tuned!
The text was written in collaboration with Jakub Andrzejewski, Technology Leader at Alokai, and Maciej Kucmus, Shopware PWA Lead Developer
