Search

17 . 10 . 17

eCommerce Show North – Talking Site Speed & eCommerce


Site Speed and the Digital User Journey at eCommerce Show North

Last week I gave a talk at the eCommerce Show North, in which I emphasised the importance of user centric metrics when assessing the speed of a website (my slides can be found here). The theme was inspired by a trend within web development to utilise more relevant metrics when assessing site speed, with teams from Google the key proponents.

Dan Nutter talking site speed at ecommerce show north

Google1 have advanced the use of more qualitative methods for the measurement of site speed, which seeks to address what they refer to as the ‘performance misconceptions’ of both SEOs and developers alike. They propose the below method of assessing the load times of pages:

Is it happening? Did the navigation start successfully? Has the server responded?
Is it useful? Has enough content rendered that users can engage with it?
Is it usable? Can users interact with the page, or is it still busy loading?
Is it delightful? Are the interactions smooth and natural, free of lag and jank?

I covered the first three questions during my talk, highlighting how they provide more accessible metrics than time to first byte or DOM content loaded. A key point of Google’s proposed measurement system is that the concept of ‘load times’ is fundamentally flawed, as they are often irrelevant to the user and are not uniform across connections or devices. Users are not timing how quickly your page loads, but they are looking for signs that your page is loading and when they can start interacting with it.

Is it happening?

Google propose that the First Paint and First Contentful Paint metrics are used at this stage, as both address the primary concern of the user, as to whether the page is loading. Essentially, they define the first time anything other than a blank screen is displayed to the user.

As soon as the first sign of the page loading is seen by a user their “clock” is essentially reset to zero, you have ensured that the user remains engaged with your site and therefore the final load time is less important.

How can this be achieved? One of the most common methods would be to inline a small amount of CSS to display a block of colour that will mimic the main navigation or a key element on the page that the user will recognise. In the Google YouTube series Designer v Developer Addy Osmani also highlights skeleton layouts, as a technique that is being increasingly utilised.

Skeleton layouts2 provide placeholders for elements yet to be rendered on the page and help to demonstrate to users the content that is in the process of being loaded. A skeleton of the final page provides a strong signal to the user that the fully loaded page will meet the needs of their query, thereby ensuring they continue to remain engaged with your site.

an example of a skeleton layout

Is it useful?

The key to this metric is ensuring that the most useful parts of a page are loaded quickly, thereby allowing the user to continue their engagement with your brand. Google recommends using First Meaningful Paint as the primary metric for evaluating this touch point, because in order to achieve the First Meaningful Paint, the hero elements of a page must be fully rendered.

For an eCommerce site these elements will primarily be the ‘Hero Text’ and ‘Hero Image’, however as is often the case with site speed this is not a one stop shop metric. The example3 below demonstrates how the hero elements can vary by site, with YouTube’s hero elements the video thumbnail and video title, whereas for Twitter this may be Tweets at the top of the timeline and the navigation icons.

These elements are potentially the most important stage of the page load for the user, because from an SEO point of view, they will determine whether the page answers the user’s query. In order to evaluate this in more detail let’s look at a common organic eCommerce user journey at this stage in the page load:

  1. User searches for ‘wireless mouse’.
  2. The search results are displayed and the user clicks on what they think is the most relevant result.
  3. ‘First Paint’ – the user remains engaged with the page.
  4. ‘First Meaningful Paint’ – the hero text and image are displayed.
  5. The user makes a decision on whether this page answers their query or whether they will return to the SERP to find a more relevant result.

Therefore, ensuring that the hero elements are prioritised in the initial phase of the page load, is key to improving the potential for the user converting on the page.

first meaningful paint comparison

Is it usable?

The primary measure for this question is the Time to Interactive, or the time it takes for the page state to reach the point when the user can begin their interaction with the page. The time it takes for the page to become interactive is largely reliant on JavaScript being executed on the main thread.1

Now this is a complex problem to solve, as it could result in the need to make large changes to the way JavaScript is delivered on your site. However, there are some fundamental methods that will help to ensure that render blocking JavaScript is not increasing the Time to Interactive:

  1. Avoid bundled JavaScript, as this can result in Scripts being loaded that are not necessary for the functionality of the current page.4
  2. Prioritise the delivery of Scripts that are required for the primary content to be interactive, lazy loading the remaining Scripts necessary for full functionality.4

How to analyse user centric metrics?

One of the key factors when analysing site speed with user-centric metrics is to emulate real world performance and this means ensuring that the device type, as well as the network connection replicate how a user would interact with the site. When analysing site speed, we are often using a £1500 plus PC on a 200 Mbps plus connection, of course the site seems fast! Both the Lighthouse audit in DevTools and the WebpageTest.org site speed testing tool provide this functionality.

Lighthouse utilises these settings automatically, by throttling your connection and emulating a Motorola Moto 4 (a predetermined mid-range phone). However, WebpageTest.org requires some configuration, I’ve included my settings below:

  • Test Location: Manchester, UK (change to the closest city to your test location)
  • Browser: Chrome
  • Emulated Device: Nexus 5
  • Connection Speed: 3G – 1.6 Mbps-768 Kbps / 300ms RTT

The videos produced by WebpageTest.org provide the basis for analysing First Paint, as well as allowing for an in-depth investigation of the factors involved in the full page load. Whereas, Lighthouse is useful for assessing the First Meaningful Paint and Time to Interactive metrics. Additionally, as the Lighthouse audits are undertaken in DevTools, staging environments can also be tested, which is not the case with other site speed tools.

An example of the output from a Lighthouse audit

Why does it matter?

There are numerous benefits to improving the speed of your site including improved rankings, enhanced performance in the Mobile First Index and an increase in conversion rate, Amazon5 reported a 1% increase in revenue due to a 100ms improvement in page load times.

However, in my opinion, the key factor is the speed performance on mobile devices. Interactions with websites are increasingly being made on mobile devices, with Google revealing that mobile searches overtook desktop searches in 2015. Therefore, site speed needs to be viewed with an even sharper focus, as when viewed on a mobile device not only will the site be accessed on a mobile network and on a device significantly less powerful than a PC, but also when the user is on the move.

Studies have shown6 that when a user is on the move sites, ‘feel slower’, with the perceived reduction in speed likely due to the nature of the query, in that the user may be looking to make a quick purchase or for directions to a store. Therefore, the positive performance of a site on a mobile device takes on increased importance, particularly when 89% of people are likely to recommend a brand after a positive experience on mobile.5

We’re no longer competing with the best experience in our respective categories. We’re now competing with the best experience a consumer has ever had.7

The average consumer in 2017 is digitally savvy and as the above quote highlights, is not simply making comparisons between your site and a direct competitor, but also with the best experience they have ever had. Therefore, seeking to provide the best performance in your sector should no longer be a benchmark, you should be looking to produce the best performing site possible.

From an eCommerce perspective it is important to leverage every interaction with your brand, no matter how small, Google refers to these short interactions as micro-moments. The impact of site speed on bounce rates is well known, with 53% of users abandoning a mobile site if it takes longer than 3 seconds to load5 and bounce rates increasing by up to 90% as the load time goes from 1 to 5 seconds5. However, when placed in the context of micro-moments these bounce rate statistics take on even greater importance.

If you consider the micro-moment that a user is on a train and sees a review for your new product on social media. They like what they see and therefore decide to make a spur of the moment purchase. The user performs a search for your product and navigates to your site; if at this stage your page takes more than 5 seconds to load it is highly unlikely the user will complete the purchase during this micro-moment. As this was a spur of the moment decision, the user may simply move on and decide that they don’t need the product after all, you may have lost that purchase forever.

In an increasingly fast paced and mobile driven world, the importance of site speed should not be understated. Quite simply your business may not be able to afford to ignore site speed.

 

1Source: Google

2Image source: Google

3Image source: Google

4Source: Addy Osmani, Google – Designer vs. Developer

5Source: Think with Google

6Source: Speed Matters: Designing for Mobile Performance

7Source: Think with Google

Dan NutterDan joined twentysix in 2013 and now holds the role of Technical SEO Specialist. He has an unhealthy obsession with Excel and in his spare time he enjoys driving with the roof down. You can find him on Twitter and LinkedIn.

Share This:


Comments