Improving a webshop productpage pagespeed

Published on LinkedIn, I did some before and after tests for certain pages:

• A wehkamp productpage;
• An NOS news article (making it 4 times faster on fast 3G);
• Torfs.be franchise productpage (making it 5 times faster).

Why pagespeed is important

Google and other researches are telling us the following:

• 53% percent of your visitors will leave your site or shop when loading takes more than 3 seconds;
• when loading will taken more than 5 seconds, your average bouncerate might become over 90%;
• a one second delay will cause 7% conversion loss.

SEO

Google already stated it is using pagespeed as a ranking factor. However, pagespeed is still inferior to your content.

in July 2018, page speed will be a ranking factor for mobile searches

webmasters.googleblog.com

Beside the direct impact on the ranking of your products or articles, the pagespeed may have influence on your ranking in other ways.

Visitors and user experience

Also consider metrics such as dwell-time and bounce-rate. With mobile audiences increasing, not only your pagespeed but also the performance already became more important. To prevent impatient visitors from clicking away, also consider the following with mobile users in mind:

• Experienced internet speed;
• High network latency (due to being on holiday, far away from your webshop's server);
• Not having the newest maybe less powerful device;
• Not having the newest software / browser, suffering from an older less powerful (JavaScript) browser engine;
• Type of mobile (internet) subscription (some providers might slow down internetspeed when a certain limit has been reached);
• Other reasons (configured Lite or saveData mode on purpose);

Proof of Concept result

I tested the proof of concept in PageSpeed Insights as well as Webpagetest.org. I did two tests in Webpagetest.org:

1. Desktop on average 3G, from Amsterdam (for example, being in the train with your laptop);
2. Average mobile device on slow 3G, from Washington, United States (for example, being on holiday).

Pagespeed Insights

Without further ado, the PageSpeed Insights were as following:

Webpagetest.org

Checkout:

• The loading process on a mobile phone from abroad as a GIF image [937kb], or you can see the video playing in my LinkedIn post regarding this proof of concept;
• The loading process on a slow 3G on laptop/desktop, within The Netherlands (for example, when doing stuff in the train) as a GIF image [2.667kb] where left is the new situation, and right is the old (current) situation. Or checkout my related LinkedIn post for a video.

After improving, text can already be seen on 3.0 seconds. In the situation before, the text would only popup after 12.0 seconds, being 4 times slower.

The loading process isn't that bad. At 9.4 seconds (still three times slower) a visitor could see the page loading, but can't start reading yet.

Performance sidenotes

Some sidenotes and maybe good to know regarding this proof of concept or any other pagespeed and performance optimization project.

Displayed text and layout shifting

Be sure to show text as soon as possible, as a confirmation to the user that they indeed reached the page they were looking for. At the same time, prevent text shifting by picking a system font close to your preferred custom font. Also try to reduce shifting of the layout itself. When using JavaScript to render the page, this might become even more of a challenge.

First Meaningful Paint

While the First Contentful Paint isn't saying much about perceived performance and thus the experienced loading proces, the First Meaningful Paint will give you a better idea.

However, while the First Meaningful Paint will tell you at which moment the biggest change took place, it might not be the most satisfying moment for your visitor. A webshop's challenge is to show text and thus confirmation to your potential customer within this same metric. In a real situation, this might not always be the case, making FMP an unreliable metric to get a grasp of the real perceived performance. This is why FMP will be replaced by a new metric, Largest Contentful Paint (LCP).

By showing meaningful and thus important content as soon as possible, the perceived performance towards your visitors will be better. This will enable your shop to turn visitors into customers, instead of losing them due to bad (user) experience.

Other improvements

Some PageSpeed Insights oppertunities may speak for itself, such as implementing lazyloading, implement correct caching mechanism or using webp images. You can do this on top of correct loading order and applying deferred and critical CSS, as I did in these proof of concepts.

Need help with the latter or want to der a customized proof of concept as well? Get in touch!