83% win in First Meaningful Paint metric on desktop with fast 3G internet. That should make a difference towards bounce-rate and conversion, on desktop and mobile.
With the Proof of Concept I created, I wanted to illustrate the room of improvements towards perceived performance and thus customer retention, reducing bounce rate and thus improve conversion.
This Proof of Concept was done voluntary instead of commissioned as will be used during my Tweakers Developers Summit talk.
To optimize for the first user engagement, I look at the First Meaningful Paint as a performance and user experience metric (to be replaced by Largest Contentful Paint). Elements to check for, are product-title, price and image, as these are most meaningful towards visitors.
I succeeded to improve the loading time on different internet speeds. These were as following:
- on 4G desktop, tested from Amsterdam
1.1 seconds versus 3.6 seconds (improvement of 69%); - on fast 3G desktop, tested from Amsterdam
1.1 seconds versus 6.5 seconds (improvement of 83%); - on slow 3G desktop, tested from Amsterdam
2.9 seconds versus 10.4 seconds (improvement of 72%).
Font loading, FOUT versus FOIT
Especially within the slow 3G version, it is very clear that as of writing Hema does not have an optimal font loading strategy. While font's aren't there, you see a so-called flash of unstyled text (FOUT). Obviously, a FOUT is always better than having FOIT (flash of invisible text), as users can't start reading at all when text remains invisible untill custom fonts are loaded.
